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页面

    
    
    
    


    
            <% list.forEach(item => { %>
                
            <% }) %>
        

        

            

                
id
                
姓名
                
头像
                
地址
                
性别
                
账号
                
密码
                
电话
                
邮箱
                
创建时间
            
        
        

                    
<%= item.id %>
                    
<%= item.name %>
                    
<%= item.pic %>
                    
<%= item.address %>
                    
<%= item.sex %>
                    
<%= item.account %>
                    
<%= item.password %>
                    
<%= item.phone %>
                    
<%= item.email %>
                    
<%= item.create_at %>