Node.js留言板，art-tamplate模板，express框架使用

拼搏现实的明天。 2021-09-29 02:56 234阅读 0赞

在项目根目录中npm init -y 生成package.json文件

npm init -y

安装express框架

npm i express -S

在express中使用art-tamplate模板引擎,安装

npm i -S art-template express-art-template

安装body-parser插件，post表单提交需要用到

npm i -S body-parser

在项目根目录中创建public目录和views目录

在views目录下创建两个静态页面，index.html 和post.html （使用了bootstrap框架）

index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Clear的留言板</title>
    		<link rel="stylesheet" type="text/css" href="/public/lib/bootstrap.css" />
    	</head>
    	<body>
    		<div class="header container">
    			<div class="page-header">
    				<h1>Here you can see the latest message</h1>
    				<a href="/post" class="btn btn-success">发表留言</a>
    			</div>
    		</div>
    		<div class="comments container"> 
    			<ul class="list-group">
    				<li class="list-group-item">Here is Web Full Stack of study</li>
    				
    				{
       {each comments}}
    				<li class="list-group-item">{
       { $value.name }}说：{
       { $value.context }}
    				<span class="pull-right">{
       { $value.dateTime }}</span></li>
    				{
       {/each}}
    			</ul>
    		</div>
    	</body>
    </html>

post.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>编写留言内容</title>
    		<link rel="stylesheet" type="text/css" href="/public/lib/bootstrap.css" />
    	</head>
    	<body>
    		<div class="header container">
    			<div class="page-header">
    				<h1><a href="/views/index">Please leave your message.</a><small>发表评论</small></h1>
    			</div>
    		</div>
    		<div class="container">
    			<form action="/pinglun" method="post">
    			  <div class="form-group">
    				<label for="name">你的大名</label>
    				<input type="text" required="required" maxlength="10"
    				 class="form-control" name="name" id="name" placeholder="your name">
    			  </div>
    			  <textarea class="form-control" required="required" name="context" rows="4"></textarea>
    			  <br />
    			  <button type="submit" class="btn btn-default">发表</button>
    			</form>
    		</div>
    	</body>
    </html>

在项目根目录下创建app.js文件

// 加载express框架
    var express=require('express')
    // app程序
    var app=express()
    // 公开项目资源
    app.use('/public',express.static('./public/'))
    // 配置art-template模板
    app.engine('html',require('express-art-template'))
    // 配置body-parser中间件，获取表单数据
    var bodyParser=require('body-parser')
    app.use(bodyParser.urlencoded({extended:false}))
    app.use(bodyParser.json())
    // 模板内容
    var comments=[
    	{
    		name:'张三',
    		context:'今天天气不错，node.js 牛逼',
    		dateTime:'2019-6-23'
    	},
    	{
    		name:'张三',
    		context:'今天天气不错，node.js 牛逼',
    		dateTime:'2019-6-23'
    	},
    	{
    		name:'张三',
    		context:'今天天气不错，node.js 牛逼',
    		dateTime:'2019-6-23'
    	},
    	{
    		name:'张三',
    		context:'今天天气不错，node.js 牛逼',
    		dateTime:'2019-6-23'
    	}
    ]
    // 拦截根目录请求
    app.get('/',function(req,res){
    	// 模板渲染
    		res.render('index.html',{
    			comments:comments
    		})
    	})
    	// 拦截/post请求
    app.get('/post',function(req,res){
    	// 响应
    		res.render('post.html')
    	})
    	// 拦截评论请求 get方式
    // app.get('/pinglun',function(req,res){
    // 		// 拿到评论字段
    // 		var comment=req.query
    // 		// 追加一个时间
    // 		comment.dateTime='2019-6-29 19:18:06'
    // 		// 追加到comment数组中
    // 		comments.unshift(comment)
    // 		// 响应，重定向到根目录
    // 		res.redirect('/')
    // 	})
    	// 拦截评论请求 post方式
    app.post('/pinglun',function(req,res){
    		//req.body获取表单内容 
    		var comment=req.body
    		// 追加一个时间
    		comment.dateTime='2019-6-29 19:18:06'
    		// 追加到comment数组中
    		comments.unshift(comment)
    		// 响应，重定向到根目录
    		res.redirect('/')
    })
    // 开启服务器端口
    app.listen(3000,function(req,res){
    	console.log('running....')
    })

完成效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20210724/bd1754a5a6c040ffa1ce8c01f8f4ae42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1]: /images/20210724/7cb42c5d446b4642b8b2bd3213ab89d4.png