nodejs+express留言板功能实现

左手的ㄟ右手 2022-08-28 13:46 170阅读 0赞

## 留言板 ##

基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能。

## 所需类库 ##

直接copy以下`package.json` 然后直接 `npm install` 或者`yarn install` 即可。

package.json所需内容如下。

{ 
      "name": "nodejs_message_board",
      "version": "2021.09",
      "private": true,
      "scripts": { 
        "start": "node app"
      },
      "dependencies": { 
        "art-template": "^4.13.2",
        "debug": "~2.6.9",
        "express": "~4.16.1",
        "express-art-template": "^1.0.1"
      }
    }

## 开源项目 ##

本项目收录在[【Node.js Study】nodejs开源学习项目][Node.js Study_nodejs] 中的`express_message_board` 。欢迎大家学习和下载。

## 运行效果 ##

*  localhost ，留言首页  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]
 *  localhost/post ，添加留言页面  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 1]
 *  localhost/say?name=xxx&message=xxx ，发送留言并重定向到首页功能  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 项目结构 ##

## index.html ##

这是留言列表，也是首页。根据传过来的值渲染列表。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>留言板</title>
      <link rel="stylesheet" href="/public/css/bootstrap4.css">
    </head>
    <body>
    <div class="header container">
      <div class="page-header">
        <h1>留言板 <small>留言列表</small></h1>
        <a class="btn btn-success" href="/post">发表留言</a>
      </div>
    </div>
    <div class="comments container">
      <ul class="list-group">
        {
       {each comments}}
        <li class="list-group-item">
          {
       {$value.name}}说:  {
       {$value.message}}
          <span class="pull-right">{
       {$value.datetime}}</span>
        </li>
        {
       {/each}}
      </ul>
    </div>
    </body>
    </html>

## post.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <link rel="stylesheet" href="/public/css/bootstrap4.css">
    </head>
    <body>
    <div class="header container">
        <div class="page-header">
            <h1><a href="/" >留言板 <small>添加留言</small></a></h1>
        </div>
    </div>
    <div class="comments container">
        <form action="/say" method="GET">
            <div class="form-group">
                <label for="name">你的大名</label>
                <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名" required minlength="2" maxlength="10">
            </div>
            <div class="form-group">
                <label for="message">留言内容</label>
                <textarea id="message" name="message" class="form-control" placeholder="请输入留言内容" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
            </div>
            <button type="submit" class="btn btn-default">发表</button>
        </form>
    </div>
    </body>
    </html>

## route/index.js ##

这里是路由器

## app.js ##

这里作为总控制

//加载模块
    const http=require('http');
    const fs=require('fs');
    const url=require('url');
    const template=require('art-template');
    const path = require('path');
    const express = require('express');
    const router = express.Router();
    const app = express();
    
    
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'html');
    app.engine('html',require('express-art-template'));
    
    app.use('/public',express.static(path.join(__dirname, 'public')));
    
    const indexRouter = require('./routes/index');
    app.use('/', indexRouter);
    
    
    //创建监听对象
    app.listen(80,function(){ 
      console.log('zhengkai.blog.csdn.net 项目启动成功 http://localhost')
    })

## 补充：关于unshift的用法 ##

[https://www.w3school.com.cn/jsref/jsref\_unshift.asp][https_www.w3school.com.cn_jsref_jsref_unshift.asp]

把一个元素添加到数组的开头，并返回数组的新长度

var arr = new Array()
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    console.log(arr.unshift("William"))
    console.log(arr)

![在这里插入图片描述][a6c5678868c848f1b348bbb1ad49e676.png]

[Node.js Study_nodejs]: https://github.com/moshowgame/nodejs-study
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b0723a585c8f4203a65a36d5caee85e2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/eacf38bf72fe44fe97d13e7fb328b9ca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/8aa3cefb79bc4c85bb8e78081bd37283.png
[https_www.w3school.com.cn_jsref_jsref_unshift.asp]: https://www.w3school.com.cn/jsref/jsref_unshift.asp
[a6c5678868c848f1b348bbb1ad49e676.png]: /images/20220828/662359efb4be4b868c7bf259a81f7786.png