node.js+express留言板功能實現示例
留言板
基於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開源學習項目 中的express_message_board
。歡迎大傢學習和下載。
運行效果 localhost ,留言首頁
添加留言頁面
localhost/say?
name=xxx&message=xxx ,發送留言並重定向到首頁功能
項目結構
index.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>留言板 <small>留言列表</small></h1> <a class="btn btn-success" href="/post" rel="external nofollow" >發表留言</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" 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="請輸入姓名" 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
這裡是路由器
const express = require('express'); const router = express.Router(); // 模擬首頁留言列表數據 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:"哈與哈哈與哈哈哈的區別",datetime:"2021-1-1"}, {name:"EEE",message:"王守義十三香還是iphone十三香",datetime:"2021-1-1"} ]} /* by zhengkai.blog.csdn.net - 靜態路由托管 */ 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); //重定向到首頁,沒有url後綴 localhost res.redirect('/'); //直接渲染首頁,有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); //創建監聽對象 app.listen(80,function(){ console.log('zhengkai.blog.csdn.net 項目啟動成功 http://localhost') })
到此這篇關於node.js+express留言板功能實現示例的文章就介紹到這瞭,更多相關node.js express留言板內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解如何使用Node.js實現熱重載頁面
- Nodejs之Express中間件的分類介紹
- Ajax 的初步實現(使用vscode+node.js+express框架)
- 詳解Node.js中間件是怎樣工作的
- 利用node+koa+axios實現圖片上傳和回顯功能