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、 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'); -%>
  Title
  My page
<%- 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">
    <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>
   <%- include("header")%>
    <p><%= name %></p>
    <!-- 商品列表页面 -->
        <% for (let i = (page-1)*4;i < page*4;i++) {%>
            <li><%= arr[i] %></li>  
    <p>当前页码为：<%= page %></p>
    <% if(page == 1){ %>
    当前是首页
    <% }else if(page == 2){ %>
    当前是尾页
    <% }else{ %>
      当前页码有问题
    <% } %>
    <%- include("footer")%>
</body>
</html>
login.ejs 
<!DOCTYPE html>
<html lang="en">
    <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>
    <%- 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官网
				Express 在初始化一个项目的时候需要指定模板引擎，默认支持Jade和ejs。
这里我们使用ejs模板引擎：（关于ejs的介绍可以先从百科里面了解一个大概）
EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。
在使用express创建一个网站的时候，使用ejs模板引擎，建立基本的网站结构，当前目录下使用：express -t ejs sophiehui命令就在当前目录下创建了一个sophiehui的子目录，创建信息如图片所示：
倒数第四行提示我们安装依赖，所以接下来进入sophiehui这个目录安装依赖：npm install（无参数的npm install
挑战赛设置
- Download Starting File and Move to Root Directory
- Open App.js in VScode and expand folders
- Styles are already configured
- Ignore the .DS_Store Files 
- Header/Footer already have code and will be added via EJS partials
- App.js has the require consts already added
- Content is already specified
- Const app has been declated
- View Engine for EJS has been configured
- BodyPa
express的介绍
express官方网址：www.expressjs.com.cn
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架。使用 Express 可以快速地搭建一个完整功能的网站。
通俗理解：Express的作用和node.js内置的http模块类似，都是专门用来创建web服务的。
安装express
npm install express
创建服务器
//和原生的http请求不同，这里首先引入 express模块
const expres
				之前写了一个关于基于nodejs+express4.X实现文件下载实例，最近需要回顾，就顺便发到随笔上了
在nodejs的express框架中,下载变得非常简单,就一个方法,res.download()
首先express命令行生成项目基本框架: 不会的看这里://www.jb51.net/article/118537.htm
看看api
其实底层还是res.sendFile(),头部也已经设定好了.
1.在public文件夹下放入1.jpg图片和1.txt文件
2.在index.js里添加路由方法
router.get('/download', function
## / books-GET，书籍清单
## / books / create-POST，创建新书
## / books / details /：id-获取，通过ID获取图书详细信息
## / books / update /：id-PUT，按ID更新图书
## / books / delete /：id-删除，按ID删除图书
				Express简介
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
express框架核心：
可以设置中间件来响应http请求
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。
express的安装
npm install express --save
express运行其他几个重要模块安装
body-parser - node.js 中间件，用于处
1，混合开发：
由 服务器端 拿到数据 和 html代码进行混编，在输出。
web前段的我们依旧根据后端的需求去改写代码，从而合作。但是存在的问题也比较多，因此，现在也比较新兴前后端分离的这种模式来进行开发。
2 采用分离：
前段的我们把数据丢给模板引擎，模板自己完成渲染。在输出到...
引用js 、css
1    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
2     <script src="http://cdn.staticfile.org...
EJS + Express基本使用

一、准备工作

1、安装 `ejs` 和 `express`

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

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

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

1.1、 template

1.2、 render

1.3、 renderFile

1.4 、参数

2、标签含义

3、引入其它文件

4、自定义分隔符

5、缓存

6、自定义文件加载器

7、布局（Layouts）

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

四、总结：
