安裝(兩個都要下載)
npm install --save art-template
npm install --save express-art-template
配置express-art-template模板
第一個參數(shù):表示 當(dāng)渲染以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方法 當(dāng)配置了express-art-template才會添加此方法 ,
第一個參數(shù):寫相對views目錄下的文件路徑
所要渲染的文件要放到新建的views文件內(nèi) 因為渲染路徑默認(rèn)在 views文件下 也可以改變默認(rèn)路徑
app.set("views","設(shè)置render新的默認(rèn)路徑")就是改變新路徑的方法
/改變默認(rèn)路徑
//app.set("views","設(shè)置render新的默認(rèn)路徑")
app.get("/",(req,res)=>{
let data={
list:comments//要渲染的數(shù)據(jù)
}
res.render("home.html",dataStr)//第一個參數(shù)是要渲染的文件
用express-art-template實現(xiàn)留言板 主要是運用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">發(fā)表留言</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>發(fā)表評論</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">留言內(nèi)容</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">發(fā)表</button>
</form>
</div>
</body>
</html>
3.js代碼
const express = require("express");
let app = express();
///是 express 的一個中間件 , 作用對post 請求的請求參數(shù)進(jìn)行解析
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")
});
//傳過來的叫請求參數(shù)
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
