安装(两个都要下载)
npm install --save art-template
npm install --save express-art-template
配置express-art-template模板
第一个参数:表示 当渲染以html后缀的文件时,使用art-template模板引擎
express-art-template就是把art-template整合到express
const express = requires("express");
let app = express();
app.engine('html',require('express-art-template'));
res.render():
res,对象本身没有render方法 当配置了express-art-template才会添加此方法 ,
第一个参数:写相对views目录下的文件路径
所要渲染的文件要放到新建的views文件内 因为渲染路径默认在 views文件下 也可以改变默认路径
app.set("views","设置render新的默认路径")就是改变新路径的方法
/改变默认路径
//app.set("views","设置render新的默认路径")
app.get("/",(req,res)=>{
let data={
list:comments//要渲染的数据
}
res.render("home.html",dataStr)//第一个参数是要渲染的文件
用express-art-template实现留言板 主要是运用express
html文件(这里运用到了bootstrap工具包)
下载bootstrap 第三版 : npm i bootstrap@3
1.home.html 页面(留言板首页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example page header
<small>Subtext for header</small>
</h1>
<a href="/post" class="btn btn-success">发表留言</a>
</div>
</div>
<div class="container">
<ul class="list-group">
{{each list}}
<li class="list-group-item">{{$value.name}}说:{{$value.message}}<span class="pull-right">{{$value.dateTime}}</span>
{{/each}}
</ul>
</div>
</body>
</html>
2.post.html 页面(添加页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1><a href="/">首页</a> <small>发表评论</small></h1>
</div>
</div>
<div class="container">
<form action="mes" method="post">
<div class="form-group">
<label for="username">你的大名</label>
<input type="text" id="username"
class="form-control"
name="name"
placeholder="请输入名字"
minlength="2" required>
</div>
<div class="form-group">
<label for="mes">留言内容</label>
<textarea type="text" id="mes"
class="form-control"
name="message"
rows="10"
minlength="5" required>
</textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>
3.js代码
const express = require("express");
let app = express();
///是 express 的一个中间件 , 作用对post 请求的请求参数进行解析
const bodyParser = require("body-parser");
//配置之后会给req 添加body属性,来获取请求体
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
app.use("/node_modules",express.static("./node_modules"));
app.engine('html', require('express-art-template'));
let comments = [
{
name: '张三',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三2',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三3',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三4',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三5',
message: '今天天气不错！',
dateTime: '2015-10-16'
}
];
app.get("/", (req, res) => {
let dataStr = {
list: comments
};
console.log(dataStr);
res.render('home.html', dataStr)
});
app.get("/post",(req,res)=>{
res.render("post.html")
});
//传过来的叫请求参数
app.post("/mes",(req,res)=>{
let reqBody = req.body;
reqBody.dateTime = "2018-11-27";
comments.unshift(reqBody);
//重定向 (因为配置了express才能用)
res.redirect("/");
});
app.listen(7000);
运行样式
QQ图片20181127205932.gif
网友评论