node.js+express留言板功能實(shí)現(xiàn)示例

更新時(shí)間：2021年09月21日 09:07:24 作者：Moshow鄭鍇

本文介紹基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和發(fā)送留言功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

留言板

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

所需類庫(kù)

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

package.json所需內(nèi)容如下。

{
  "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"
  }
}

開源項(xiàng)目

本項(xiàng)目收錄在【Node.js Study】nodejs開源學(xué)習(xí)項(xiàng)目中的express_message_board 。歡迎大家學(xué)習(xí)和下載。

運(yùn)行效果 localhost ，留言首頁(yè)

在這里插入圖片描述 localhost/post ，

添加留言頁(yè)面

在這里插入圖片描述 localhost/say?

name=xxx&message=xxx ，發(fā)送留言并重定向到首頁(yè)功能

在這里插入圖片描述

項(xiàng)目結(jié)構(gòu)

index.html

這是留言列表，也是首頁(yè)。根據(jù)傳過(guò)來(lái)的值渲染列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>留言板</title>
  <link rel="stylesheet" href="/public/css/bootstrap4.css" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<div class="header container">
  <div class="page-header">
    <h1>留言板 <small>留言列表</small></h1>
    <a class="btn btn-success" href="/post" rel="external nofollow" >發(fā)表留言</a>
  </div>
</div>
<div class="comments container">
  <ul class="list-group">
    {{each comments}}
    <li class="list-group-item">
      {{$value.name}}說(shuō):  {{$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" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<div class="header container">
    <div class="page-header">
        <h1><a href="/" rel="external nofollow"  >留言板 <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="請(qǐng)輸入姓名" required minlength="2" maxlength="10">
        </div>
        <div class="form-group">
            <label for="message">留言內(nèi)容</label>
            <textarea id="message" name="message" class="form-control" placeholder="請(qǐng)輸入留言內(nèi)容" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">發(fā)表</button>
    </form>
</div>
</body>
</html>

route/index.js

這里是路由器

const express = require('express');
const router = express.Router();


// 模擬首頁(yè)留言列表數(shù)據(jù)
var comments= {"comments":[
    {name:"AAA",message:"你用什么編輯器？WebStorem or VSCODE",datetime:"2021-1-1"},
    {name:"BBB",message:"今天天氣真好?釣魚or代碼",datetime:"2021-1-1"},
    {name:"Moshow",message:"zhengkai.blog.csdn.net",datetime:"2021-1-1"},
    {name:"DDD",message:"哈與哈哈與哈哈哈的區(qū)別",datetime:"2021-1-1"},
    {name:"EEE",message:"王守義十三香還是iphone十三香",datetime:"2021-1-1"}
]}

/* by zhengkai.blog.csdn.net - 靜態(tài)路由托管 */
router.get('/', function(req, res, next) {
    res.render('index', comments);
});
router.get('/post', function(req, res, next) {
    res.render('post', comments);
});
router.get('/say', function(req, res, next) {
    console.log(req.query)
    console.log(req.url)
    const comment=req.query;
    comment.datetime='2021-10-01';
    comments.comments.unshift(comment);
    //重定向到首頁(yè)，沒(méi)有url后綴 localhost
    res.redirect('/');
    //直接渲染首頁(yè)，有url后綴 localhost/say?xxxx=xxx
    //res.render('index', comments);
});

module.exports = router;

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);


//創(chuàng)建監(jiān)聽對(duì)象
app.listen(80,function(){
  console.log('zhengkai.blog.csdn.net 項(xiàng)目啟動(dòng)成功 http://localhost')
})

到此這篇關(guān)于node.js+express留言板功能實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)node.js express留言板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: