nodejs+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">
</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

这里是路由器

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后缀 localhostres.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')
})

补充：关于unshift的用法

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)

nodejs+express留言板功能实现相关推荐

php给留言分配id_简单实现PHP留言板功能
本文实例为大家分享了PHP留言板功能的具体实现代码,供大家参考,具体内容如下 HTML代码 PHP留言本留言者: {$vo.nickname} | 邮箱: {$vo.email} 时间: {$vo. ...
html留言板 php,linux下使用Apache+php实现留言板功能的网站
一.首先我们的linux服务器上要安装Apache和php php的安装方法和Apache方法如同一辙二.关闭防火墙服务,关闭selinux 请参考:http://www.cnblogs.com/d ...
phpcms留言板功能的实现
文章目录 phpcms如何```实现留言板```功能? 1. 留言板插件下载及使用说明: 2. 解压并安装 3. 代码调用教程 4. 参考代码1:(附图) 5. 参考代码2:(附图) 6. 后台接 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
PHP+MySQL实现留言板功能（一）
1.登陆注册页面前端设计由于小编第一次写博客,加上前端知识还不够扎实,本文小编着重处理后端,及PHP连接数据库,实现添加留言,删除留言功能.话不多说,我们直接上代码. 登陆页面设计:我们将其命名为: ...
PHP 留言板功能需求分析
一.PHP 留言板功能需求分析: 功能需求:用户利用留言板可以发表自己的留言,管理员可以在后台对留言进行回复或删除管理. 主要功能分为:前台用户留言展示与后台留言管理两个部分. 二.前台用户留言 ...
php简易留言板功能,PHP实现简单留言板功能的方法
这篇文章主要为大家详细介绍了PHP简单留言板功能的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下具体内容如下: index.php error_reporting(0); //关闭NOT ...
php留言板的实验步骤,PHP实现基本留言板功能原理与步骤详解
本文实例讲述了PHP实现基本留言板功能的方法.分享给大家供大家参考,具体如下: 作为一个PHP的初学者,我试着写了一个留言板,页面有点丑,多多见谅,嘻嘻嘻 #我们写留言板需要用到数据库,所以我们先要建 ...
JavaScript用事件委托实现留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
vue脚手架实现留言板功能
利用vue-cli创建的vue脚手架,实现留言板功能 1.搭建项目结构命令行中创建vue项目,在src路径下的assets文件夹中创建images文件夹存放用户头像,并新建一个pages文件夹用于存 ...