溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用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/post ，
添加留言頁面
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">
<h2>留言板 <small>留言列表</small></h2>
<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"> <h2><a href="/" rel="external nofollow" >留言板 <small>添加留言</small></a></h2> </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實現留言板功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
