一、前端渲染

访问网页时，先请求到 html 内容，并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。

二、后端渲染

访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。

三、EJS 模板引擎

模板引擎概述

模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。

一个模板引擎使您能够在您的应用程序中使用静态模板文件。在运行时，模板引擎用实际值替换模板文件中的变量，并将模板转换为发送给客户端的HTML文件。这种方法使设计HTML页面更加容易。

EJS 模板引擎

EJS 官网

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

1. 后端渲染使用 EJS

  1. 安装

    1. $ npm install ejs

  2. 设置 ```javascript // index.js const app = express()

// 告诉Express我使用的ejs模板引擎 app.set(‘view engine’, ‘ejs’) // 告诉Express我的模板页面存放在 views 目录中 app.set(‘views’, ‘./views’)

  2. 3. 编写模板页面（后缀为 .ejs）
  3. ```html
  4. // views/fruits.ejs
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.   <title>Document</title>
  12. </head>
  13. <body>
  14.   <h1>我喜欢的 水果有</h1>
  16.   <ul>
  17.     <% for (var i = 0; i < fruits.length; i++) { %>
  18.       <li><%= fruits[i] %></li>
  19.     <% } %>
  20.   </ul>
  22. </body>
  23. </html>
  1. res.render() 渲染 ```javascript // index.js

app.get(‘/fruits’, (req, res) => { // 第一个参数是模板页面的名字, 可以省略后缀 // 第二个参数是需要携带到模板页面的数据 res.render(‘fruits’, { fruits: [‘Apple’, ‘Banana’, ‘Orange’] }) }) ```

2. 前端渲染使用 EJS

  1. 下载浏览器端使用的文件 链接
  2. TODO