Express通过ejs模板引擎渲染页面

一般浏览器渲染页面：是通过先请求我们放在服务器上的页面文件，然后浏览器通过运行页面内的js以及ajax再向服务器请求数据，然后渲染到页面上。通过开发者工具可以看到每一次的请求，数据的请求组装渲染都是在客户端完成的。
使用ejs模板引擎渲染：浏览器向服务器请求页面，服务器拦截路由后，请求该页面需要的相关数据，然后将数据组装到页面上，通过render函数一起返回到页面。通过开发者工具可以看到，客户端只做了一次请求，其他的操作全都在服务端完成。

入口文件设置app.js

// 引入页面路由配置文件
var pageRouter = require('./routes/page');

// 模板相关设置
app.set('views', path.join(__dirname, 'views')); // 设置模版文件夹的路径，配置后网址可直接访问views文件夹下面的页面
app.set('view engine', 'ejs'); //设置视图为ejs引擎，配置后可以省略页面文件后缀名.ejs

// 加载页面路由
// 建议页面路由放在API路由之前
app.use('/', pageRouter);

页面路由拦截

var express = require('express');
var router = express.Router();
var page = require('../controllers/pageController')

// 首页路由拦截
router.get('/index', page.index);

module.exports = router;

页面路由处理函数

var dbConfig = require('../util/dbConfig')

// 获取所有用户
const index = (req, res) => {
    var sql = "select * from user"
    var sqlArr = []
    var callBack = (err, data) => {
        if (err) {
            console.log('连接出错了')
        } else {
            // 该方法表示给views下的index.ejs页面传递数据对象{list:data}
            // index页面拿到数据后进行页面组装
            // render函数将组装好的index页面返回给浏览器展示
            res.render('index', {
                list: data
            })
        }
    }
    dbConfig.sqlConnect(sql, sqlArr, callBack)
}

module.exports = {
    index
}

index.ejs页面

<!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>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>头像</td>
                <td>地址</td>
                <td>性别</td>
                <td>账号</td>
                <td>密码</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>创建时间</td>
            </tr>
        </thead>
        <tbody>
            <% list.forEach(item => { %>
                <tr>
                    <td><%= item.id %></td>
                    <td><%= item.name %></td>
                    <td><%= item.pic %></td>
                    <td><%= item.address %></td>
                    <td><%= item.sex %></td>
                    <td><%= item.account %></td>
                    <td><%= item.password %></td>
                    <td><%= item.phone %></td>
                    <td><%= item.email %></td>
                    <td><%= item.create_at %></td>
                </tr>
            <% }) %>
        </tbody>
    </table>
</body>
</html>
posted @ 2021-11-19 14:17  木-鱼  阅读(442)  评论(0)    收藏  举报