node.js+express留言板功能實現示例
阿新 • • 發佈：2021-09-22
目錄
- 留言板
- 所需類庫
- 開源專案
- 專案結構
留言板
基於node+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//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 post.html
<!DOCTYPE html>
<html http://www.cppcns.comlang="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程式碼",{name:"Moshow",message:"zhengkai.blog.csdn.net",{name:"DDD",message:"哈與哈哈與哈哈哈的區別",{name:"EEE",message:"王守義十三香還是iphone十三香",datetime:"2021-1-1"}
]}
/* by zhengkai.blog.csdn.net - 靜態路由託管 */
router.get('/',function(r客棧eq,res,next) {
res.render('index',comments);
});
router.get('/post',function(req,next) {
res.render('post',comments);
});
router.get('/say',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留言板內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！