模板引擎有很多,跟express结合比较好的是ejs

ejs是用来向(模板)字符串中,动态插入数据来用的,现在基本上已经不使用这样的方式了,现在后端渲染的话vue ssr,react ssr

安装模板引擎

npm i ejs@3.1.2

简单使用

  2. const ejs = require('ejs');
  4. let str = `数字是:<%= number %>`;
  6. const result = ejs.render(str, { number: 100 })
  8. console.log(result) // 数字是:100
  • <%= number %> 这是ejs模板引擎的语法规范,number是我们实际需要传入的值
  • ejs.render: 模板字符串和数据对象,一起传入,动态替换字符串中应该使用到的动态数据,并且把渲染好的字符串返回

列表使用

注意:此处使用的是express自带的模板引擎

  1. 封装一个类似路由的控制器,用来处理渲染 ```json const express = require(‘express’); const router = express.Router(); const StudentServices = require(‘../services/studentService’) router.get(“/“, async (req, res) => { const { page } = req.query; const data = await StudentServices.findAndCountAll(page); res.render(‘./student.ejs’, {
    1.  data
    }) });

module.exports = router;

  2. - 请求普通的接口返回数据,交给模板引擎来用`const data = await StudentServices.findAndCountAll(page);`
  3. - express找到`./student.ejs`模板需要在设置一下模板的默认路径
  4. ```json
  5. app.set('views', path.resolve(__dirname, "../views"))
  1. 引擎使用数据 ```json <!DOCTYPE html>

学生列表页

学生总数:<%= data.total %> 当前第 <%= data.page %> 页,每页 <%= data. limit %> 条数据

    <% data.data.forEach(element=> { %>
  • <%= element.name %>
    • <% }) %>
上一页; 下一页

```

  • data数据就是res.render模板引擎,传递过来的数据
  • 其他都是ejs的语法

注意

这种方法已经老旧,很少在现在的开发模式中使用