express-art-template用法+express实现留言板

安装(两个都要下载)

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 页面(留言板首页)

    
    
    



    

        
Example page header
            Subtext for header
        
        发表留言
    


    

        {{each list}}
        
{{$value.name}}说:{{$value.message}}{{$value.dateTime}}
        {{/each}}
    

2.post.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