项目源码地址：https://github.com/GSemir0418/express-board

1 ejs模板引擎

1.1 安装

1

yarn add ejs

1.2 设置应用模版配置

1
2

app.set('views', './templates')// 配置模板路径
app.set('view engine', 'ejs')// 配置模板渲染引擎

1.3 ejs语法

  • <%= title %>：转义输出，若含有HTML代码，则会被转义为实体字符
  • <%- title %>：不转义输出，不转义HTML代码，存在XSS攻击风险
  • <% 代码 %>：执行JS代码
  • <% include 模板路径 %>：导入其他模板

2 留言板源码

2.1 项目初始化

1
2

yarn init -y
yarn add express body-parser ejs

2.2 index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

const express = require('express')
// 用于请求体解析的中间件
const bodyParser = require('body-parser')
// 实例化express
const app = express()

// 模版引擎配置
app.set('views', './views')
app.set('view engine', 'ejs')

app.use(bodyParser())

// 留言内容
const messages = []

// 首页路由
app.get('/', (req, res, next) => {
    res.render('home', { messages })
})

// 留言页路由
app.route('/publish')
    .get((req, res, next) => {
        // 渲染发布留言表单页面
        res.render('publish')
    })
    .post((req, res, next) => {
        const now = (new Date()).toLocaleDateString()
        messages.push({
            name: req.body.name,
            content: req.body.content,
            date: now
        })
        res.redirect('/')
    })

// 开启监听
app.listen('8081', () => {
    console.log('正在监听8081端口')
})

2.3 views/index.ejs首页模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div><a href="/publish">发表留言</a></div>
    <% if(messages.length===0){%>
    <p>当前暂无留言</p>
    <% } else {%>
    <table>
        <tr>
            <th>留言时间</th>
            <th>留言内容</th>
            <th>留言人</th>
        </tr>
        <% messages.forEach(message => {%>
        <tr>
            <td><%= message.date %></td>
            <td><%= message.content %></td>
            <td><%= message.name %></td>
        </tr>
    </table>
    <%})%>
    <% } %>
</body>
</html>

2.4 views/publish.ejs发布页模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布留言</title>
</head>
<body>
    <form action="/publish" method="post">
        <fieldset>
            <legend>发表留言</legend>
            <div>
                <label for="name">姓名</label>
                <input type="text" name='name' id='name' required />
            </div>
            <div>
                <label for="content">内容</label>
                <textarea name='content'></textarea>
            </div>
            <div>
                <button type="submit">发表</button>
                <button type="reset">重置</button>
            </div>
        </fieldset>
    </form>
</body>
</html>