nodeJS+express+art-template实现评论

最新推荐文章于 2024-04-17 12:30:48 发布

_freely

最新推荐文章于 2024-04-17 12:30:48 发布

阅读量192

点赞数 1

分类专栏： nodejs js 文章标签： nodejs express express-art-template

本文链接：https://blog.csdn.net/hbjiankely/article/details/101036177

版权

js 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

nodejs

3 篇文章 0 订阅

订阅专栏

实现一个简单的评论

目录结构

app.js

const fs = require('fs')
// const http = require('http')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()

// 配置artemplate
app.engine('html', require('express-art-template'))
// 配置body-parser获取表单提交的数据
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())
// 评论列表
app.get('/', (req, res) => {
    // 读取数据
	fs.readFile('./data.json', (err, data) => {
		if (err) {
			throw err
		}
		// console.log(JSON.parse(data).list)
        // 模板渲染
		res.render('index.html', {
			list: JSON.parse(data).list
		})
	})
})
app.get('/publish', (req, res) => {
	
	res.render('publish.html')

})
// 表单提交POST
app.post('/publish', (req, res) => {
    // 获取表单提交的数据
	const obj = req.body
	fs.readFile('./data.json', (err, data) => {
		if (err) {
			throw err
		}
		data = JSON.parse(data)
		data.list.unshift(obj)
		// 数据持久化
		fs.writeFile('./data.json', JSON.stringify(data))
		// 重定向
		res.redirect('/')
	})
})
// 服务
app.listen(3001, () => console.log('running....'))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<a href="/publish">评论</a>
	<ul>
		{{ each list}}
		<li>网友{{$value.name}}说：{{$value.msg}}</li>
		{{/each}}
	</ul>
</body>
</html>

publish.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<form action="/publish" method="post">
		<div>
			<label>名称：</label>
			<input type="text" name="name">
		</div>
		<div>
			<label>邮箱：</label>
			<input type="email" name="email">
		</div>
		<div>
			<label>留言：</label>
			<textarea name="msg" cols="30" rows="10"></textarea>
		</div>
		<button>提交</button>
	</form>
</body>
</html>