欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

EJS + Express基本使用

发布时间：2024/3/13 javascript 74 豆豆
生活随笔 收集整理的这篇文章主要介绍了 EJS + Express基本使用 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

EJS + Express基本使用

序：

在使用Node.js的Web框架Express时，经常会用到ejs作为模板引擎，使用Express+ejs主要是为了实现服务端渲染，利于SEO优化。所以，本篇博客仅仅是为了学习Express而写的，在真实的项目开发中不推荐使用这种方式。

EJS 是一套模板语言，用普通的 JS 代码生成 HTML 页面，即嵌入式JS模板引擎。

一、准备工作

1、安装ejs和express

npm install ejs npm i express

或

npm install ejs express nodemon -D

2、在views文件夹中新建一个ejs后缀的文件，在该文件里写正常的HTML代码

3、在app.js中设置默认模板引擎

app.set(“view engine”,“ejs”)

二、ejs语法（基于express搭建的后端环境）

1、方法

1.1、 template

编译字符串得到模板函数。

let template = ejs.compile(str, options); template(data); // => 输出渲染后的 HTML 字符串
  • str：需要解析的字符串模板
  • data：数据
  • option：配置选项

例子：

/* 书写ejs */ let html = ejs.compile('<%=123 %>')(); /* 将写好的ejs进行渲染 */ res.send(html);

1.2、 render

直接渲染字符串并生成HTML

ejs.render(str, data, options); // => 输出渲染后的 HTML 字符串
  • str：需要解析的字符串模板
  • data：数据
  • option：配置选项

例子：

/* 书写ejs */ let people = ['geddy', 'neil', 'alex'],html = ejs.render('<%= people.join(", "); %>', {people: people}); /* 将写好的ejs进行渲染 */ res.send(html);

1.3、 renderFile

解析文件生成HTML

ejs.renderFile(filename, data, options, function(err, str){// str => 输出渲染后的 HTML 字符串 });
  • str：需要解析的字符串模板
  • data：数据
  • option：配置选项

例子：

let people = ['geddy', 'neil', 'alex'],html = ejs.renderFile('./test.ejs', (err, str) => {res.send(str);});

1.4 、参数

上面3个方法中的options可以选择的参数如下：

  • cache 缓存编译后的函数，需要指定 filename。
  • filename 被 cache 参数用做键值，同时也用于 include 语句。
  • context 函数执行时的上下文环境。
  • compileDebug 当值为 false 时不编译调试语句。
  • client 返回独立的编译后的函数。
  • delimiter 放在角括号中的字符，用于标记标签的开与闭。
  • debug 将生成的函数体输出。
  • _with 是否使用 with() {} 结构。如果值为 false，所有局部数据将存储在 locals 对象上。
  • localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals。
  • rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> 标签（在一行的中间并不会剔除标签后面的换行符)。
  • escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。
  • outputFunctionName 设置为代表函数名的字符串（例如 'echo' 或 'print'）时，将输出脚本标签之间应该输出的内容。
  • async 当值为 true 时，EJS 将使用异步函数进行渲染。（依赖于 JS 运行环境对 async/await 是否支持）

2、标签含义

  • <% ‘脚本’ 标签，用于流程控制，无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板（输出是转义 HTML 标签）
  • <%- 输出非转义的数据到模板
  • <%# 注释标签，不执行、不输出内容
  • <%% 输出字符串 ‘<%’
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • _%> 将结束标签后面的空格符删除

3、引入其它文件

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename‘ 参数。)

因为该项需要使用到fs所以只有在Node环境中才能生效，也就是说需要搭建一个Node后端服务器。

let people = ['geddy', 'neil', 'alex'],html = ejs.render(`<%- include('test.ejs') %>`, {filename: 'test.ejs'});

4、自定义分隔符

可针对单个模板或全局使用自定义分隔符：

let ejs = require('ejs'),users = ['geddy', 'neil', 'alex'];// 单个模板文件 ejs.render('<?= users.join(" | "); ?>', {users: users},{delimiter: '?'}); // => 'geddy | neil | alex'// 全局 ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'

5、 缓存

EJS 附带了一个基本的进程内缓存，用于缓在渲染模板过程中所生成的临时 JavaScript 函数。 通过 Node 的 lru-cache 库可以很容易地加入 LRU 缓存：

let ejs = require('ejs'),LRU = require('lru-cache'); ejs.cache = LRU(100); // 具有 100 条内容限制的 LRU 缓存

如果要清除 EJS 缓存，调用 ejs.clearCache 即可。如果你正在使用的是 LRU 缓存并且需要设置不同的限额，则只需要将 ejs.cache 重置为 一个新的 LRU 实例即可。

6、自定义文件加载器

默认的文件加载器是 fs.readFileSync，如果你想要的自定义它, 设置ejs.fileLoader 即可。

let ejs = require('ejs'); let myFileLoader = function (filePath) {return 'myFileLoader: ' + fs.readFileSync(filePath); };ejs.fileLoader = myFileLoad;

使用此功能，您可以在读取模板之前对其进行预处理。

7、布局（Layouts）

EJS 并未对块（blocks）提供专门的支持，但是可以通过 包含页眉和页脚来实现布局，如下所示：

<%- include('header'); -%> <h1>Title </h1> <p>My page </p> <%- include('footer'); -%>

三、简单搭建一个复用模块

建一个views文件，下面有

  • header.ejs
  • footer.ejs
  • index.ejs
  • login.ejs

header.ejs

<h1>这是头部</h1>

footer.ejs

<h1>这是尾部</h1>

index.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><%- include("header")%><p><%= name %></p><!-- 商品列表页面 --><ul><% for (let i = (page-1)*4;i < page*4;i++) {%><li><%= arr[i] %></li> <%} %></ul><p>当前页码为：<%= page %></p><% if(page == 1){ %>当前是首页<% }else if(page == 2){ %>当前是尾页<% }else{ %>当前页码有问题<% } %><%- include("footer")%> </body> </html>

login.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><%- include("header") %> 欢迎来到登录页<%- include("footer") %> </body> </html>

建一个入口函数app.js

const express = require('express') const app = express() const port = 3000//设置默认使用的模板引擎 app.set("view engine","ejs");app.get("/list",(req,res)=>{//分页效果let {page} = req.query;let arr = ["华为Mate40Pro","华为Mate40RS","华为P40","华为P40 pro","华为 nova9","华为 畅享20e","华为 nova9 pro","华为 nova7",]res.render("index",{name:"lisi",arr,page}); }) app.get("/login",(req,res)=>{res.render("login"); }) app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port ${port}!`))

运行app.js，在浏览器中输入相应的路由，即可。

四、总结：

在Nodejs搭建的后端中可能会用到EJS，但是前端项目一般不会使用EJS。

EJS最方便的地方就是在于将项目给别人使用的时候，人家不用过多的去了解你的代码，直接修改配置文件就可以达到自己想要的效果。比如说Hexo中的配置都集中在_config.yml这个文件中，你根本不需要去一行一行的浏览源代码，就可以实现修改，达到你想要的效果。

参考：EJS官网

总结

以上是生活随笔为你收集整理的EJS + Express基本使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。