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

最新推荐文章于 2024-05-11 04:41:32 发布

晨�

最新推荐文章于 2024-05-11 04:41:32 发布

阅读量424

点赞数

本文链接：https://blog.csdn.net/weixin_43828045/article/details/84579662

版权

安装(两个都要下载)

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

晨�

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
express-art-template用法+express实现留言板

安装(两个都要下载)npm install --save art-templatenpm install --save express-art-template##配置express-art-template模板##第一个参数:表示当渲染以html后缀的文件时,使用art-template模板引擎express-art-template就是把art-template整合到express...
复制链接

扫一扫