大家好，欢迎来到IT知识分享网。
一、ejs模块
1. 安装
ejs官网：ejs – npm (npmjs.com)
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-39)(C:\Users\罗\AppData\Roaming\Typora\typora-user-images\image-.png)]
注意：
node_modules文件夹删除后代码不能运行， 可在终端输入npm i，系统会根据你的package.json文件自动下载依赖，package-lock.json 用于锁定依赖版本。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/128183.html
