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

最新推荐文章于 2023-06-30 16:52:47 发布

haoqi好奇

最新推荐文章于 2023-06-30 16:52:47 发布

阅读量469

点赞数 1

分类专栏： node 案例文章标签： node.js experss

本文链接：https://blog.csdn.net/qq_41956789/article/details/94196416

版权

案例同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

node

8 篇文章 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....')
})

完成效果

haoqi好奇

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Node.js留言板，art-tamplate模板，express框架使用

在项目根目录中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 ...
复制链接

扫一扫