class09：ejs模块

一、ejs模块

1. 安装

ejs官网：ejs - npm (npmjs.com)

ejs模块可以让后端直接写html页面，可以直接传入数据。

npm i ejs -S
1

引入和使用：

const express = require("express");
const app = express();

// 引入和使用
const ejs = require("ejs");
app.set("view engine", "ejs");
1
2
3
4
5
6

2. ejs返回html页面

规定：同目录下新建一个views文件夹， 文件夹内新建.esj文件（相当于html文件）。

发起请求：

app.get("/vee", (req, res) => {
    // res.render渲染函数---设置查找文件名 res.render(文件名,传入文件的参数)
    // 查找的时候 会自动往views文件内部去查找
    res.render("index", {
        //属性名 : 属性值
        laker: "LeBronJames" // 传入文件的参数
    })
});
1
2
3
4
5
6
7
8

相关说明：

res.render(文件名,传入文件的参数)渲染函数，设置查找文件名。查找的时候会自动往views文件内部去查找。如上例查找index.ejs的文件。

在render函数中可设置属性名及其属性值，成为传入文件的参数。

ejs文件：

    
    
    
    


    一骑红尘妃子笑，无人知是荔枝来。


1
2
3
4
5
6
7
8
9
10
11
12

访问结果：

3. ejs渲染后端参数

常用特征：

• 控制流<% %>
• 带转义输出（转义功能可配置）<%= %>
• 未转义的原始输出<%- %>
• 带结束标记的换行线修剪模式（“换行符诽谤”）-%>
• 空格修剪模式（删除所有空格）用于控制流<%_ _%>
• 自定义分隔符（例如 而不是[? ?]``<% %>)

例：将属性名为laker的属性值LeBronJames写入index前端页面

ejs文件：

    一骑红尘妃子笑，无人知是荔枝来。
    <%= laker %>

1
2
3
4

使用 <%= %> 转移输出属性名为 laker 的属性值，渲染到前端页面。

二、ejs实现动态路由的实例

我们知道，动态路由的后缀是可以随便定义的，那我们就可以根据用户的输入进行选择对应的数据去渲染页面，我们可以获取动态路由传入的参数，即用户的输入来渲染页面，而且只用一个页面就可以满足许多类似的数据内容。

实例：前端路由后缀输入一个数字n，后端计算0-n之间的偶数，并渲染到前端页面。

后端代码：首先通过req.params的方法获取用户传入的数字，然后计算区间的偶数，再通过res.render方法传递计算结果到前端页面。

app.js文件：

const express = require("express");
const app = express();
app.listen("3000", () => { console.log("3000端口启动"); });
app.use(require("cors")());

const ejs = require("ejs");
app.set("view engine", "ejs");

app.get("/:freeSet", (req, res) => {
    let result = req.params.freeSet;    // 拿到全部能被2整除的数据 
    let arr = [];
    for (let i = 0; i <= result; i++) {
        if(i % 2 == 0){
            arr.push(i);
        };
    };
    res.render("index", {
        // 将结果传入对应文件
        c_num: arr,
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

前端代码： 可以在控制流 <% %> 里面写js代码，通过属性名循环遍历得到后端传过来的数据；然后通过 转义输出 <%= %> 将外部传入的参数渲染到页面中。

index.ejs文件:

	

		<% for(let i = 0; i < c_num.length; i++){ %>
		
 <%= c_num[i] %> 
		<% } %>
	
 

1
2
3
4
5
6
7

示例结果：后缀输入13

注意：

node_modules文件夹删除后代码不能运行， 可在终端输入npm i，系统会根据你的package.json文件自动下载依赖，package-lock.json 用于锁定依赖版本。