ejs说明-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51667621/article/details/126159074

一、ejs模块

1. 安装

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

npm i ejs -S

引入和使用：

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

// 引入和使用
const ejs = require("ejs");
app.set("view engine", "ejs");

2. ejs返回html页面

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

发起请求：

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

相关说明：

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

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

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>
    一骑红尘妃子笑，无人知是荔枝来。
</body>
</html>

访问结果：

3. ejs渲染后端参数

常用特征：

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

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

ejs文件：

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

使用** <%= %> 转移输出属性名为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,
    })
});

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

index.ejs文件:

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

示例结果：后缀输入13

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYY1v5cL-1659594901839)(C:\Users\罗\AppData\Roaming\Typora\typora-user-images\image-20220715233142221.png)]

注意：

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

陈年旧文，没有下文，以此纪念。。。
在这里插入图片描述