06_包管理工具

1.概念介绍

1.1 包是什么

『包』英文单词是 package ，代表了一组特定功能的源码集合。

1.2 包管理工具

管理『包』的应用软件，可以对「包」进行 下载安装 ， 更新 ，删除 ， 上传 等操作。

借助包管理工具，可以快速开发项目，提升开发效率。

包管理工具是一个通用的概念，很多编程语言都有包管理工具，所以 掌握好包管理工具非常重要。

1.3 常用的包管理工具

下面列举了前端常用的包管理工具

• npm
• yarn
• cnpm

2.npm

npm 全称 Node Package Manager ，翻译为中文意思是『Node 的包管理工具』

npm 是 node.js 官方内置的包管理工具，是 必须要掌握住的工具

2.1 npm 的安装

node.js 在安装时会 自动安装 npm ，所以如果你已经安装了 node.js，可以直接使用 npm

可以通过 npm -v 查看版本号测试，如果显示版本号说明安装成功，反之安装失败

2.2 npm 基本使用

2.2.1 初始化

创建一个空目录，然后以此目录作为工作目录 启动命令行工具 ，执行 npm init

npm init 命令的作用是将文件夹初始化为一个『包』，交互式创建 package.json 文件

package.json 是包的配置文件，每个包都必须要有 package.json

package.json 内容示例：

xxxxxxxxxx
11
1
{
2
    "name": "01_npm",
3
    "version": "1.0.0",
4
    "description": "",
5
    "main": "index.js",
6
    "scripts": {
7
        "test": "echo \"Error: no test specified\" && exit 1"
8
    },
9
    "author": "",
10
    "license": "ISC"
11
}

属性翻译：

xxxxxxxxxx
11
1
{
2
    "name": "1-npm",            #包的名字
3
    "version": "1.0.0",         #包的版本
4
    "description": "",          #包的描述
5
    "main": "index.js",         #包的入口文件
6
    "scripts": {                #脚本配置
7
        "test": "echo \"Error: no test specified\" && exit 1"
8
    },
9
    "author": "",               #作者
10
    "license": "ISC"            #开源证书
11
}

初始化的过程中还有一些注意事项：

1. package name ( 包名 ) 不能使用中文、大写，默认值是 文件夹的名称 ，所以文件夹名称也不能使用中文和大写
2. version ( 版本号 )要求 x.x.x 的形式定义， x 必须是数字，默认值是 1.0.0
3. ISC 证书与 MIT 证书功能上是相同的，关于开源证书扩展阅读http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html
4. package.json 可以手动创建与修改
5. 使用 npm init -y 或者 npm init --yes 极速创建 package.json

2.2.2 搜索包

搜索包的方式有两种

1. 命令行 『npm s/search 关键字』。一般不使用这种方式，因为搜索结果只有文字，不形象。
2. 网站搜索 网址是 https://www.npmjs.com/。推荐使用这种方式。

经常有同学问，『我怎样才能精准找到我需要的包？最精准、最高效的解决问题。』

这个事儿需要大家在实践中不断的积累，通过看文章，看项目去学习、去积累。

2.2.3 下载安装包

我们可以通过 npm install 或简写方式 npm i 命令安装包

xxxxxxxxxx
7
1
# 格式
2
npm install <包名>
3
npm i <包名>
4
    
5
# 示例
6
npm install uniq
7
npm i uniq

运行之后文件夹下会增加两个资源

• node_modules 文件夹，用于存放下载的包。
• package-lock.json 包的锁文件，用来锁定包的版本。

比如说，安装 uniq 之后， uniq 就是当前这个包的一个 依赖包（什么叫“当前这个包”？指的就是我使用npm init初始化的这个文件夹，就称为“当前这个包”。也可以理解为我的当前的这个项目） ，有时会简称为 依赖。

举个例子，我们创建一个包名字为 A，A 中安装了包名字是 B，我们就说 B 是 A 的一个依赖包 ，也会说A 依赖 B

2.2.4 require 导入 npm 包基本流程

在nodejs中使用require导入npm包，直接写包名即可（不用写完整路径）：

xxxxxxxxxx
1
1
const uniq = require("uniq")

虽然Nodejs和第三方库的导入都直接写包名，但vscode的one dark主题对于导入的模块有不同的配色，这一点很好，方便我看一个模块到底是不是Nodejs的官方模块。当然，这个功能可有可无。

require导入npm包的基本流程如下：

1. 在当前文件夹下 node_modules 中寻找同名的文件夹
2. 在上级目录下的 node_modules 中寻找同名的文件夹，直至找到磁盘根目录

2.3 生产环境与开发环境

开发环境是程序员 专门用来写代码 的环境，一般是指程序员的电脑，开发环境的项目一般 只能程序员自己访问

生产环境是项目 代码正式运行 的环境，一般是指正式的服务器电脑，生产环境的项目一般 每个客户都可以访问

2.4 生产依赖与开发依赖

我们可以在安装时设置选项来区分 依赖的类型 ，目前分为两类：

举个例子方便大家理解，比如说做蛋炒饭需要 大米 ， 油 ， 葱 ， 鸡蛋 ， 锅 ， 煤气 ， 铲子 等

其中 锅 ， 煤气 ， 铲子 属于开发依赖，只在制作阶段使用

而 大米 ， 油 ， 葱 ， 鸡蛋 属于生产依赖，在制作与最终食用都会用到

所以 开发依赖 是只在开发阶段使用的依赖包，而 生产依赖 是开发阶段和最终上线运行阶段都用到的依赖包。

怎么区分要安装的包是开发依赖还是生产依赖呢？其实我还是觉得有点难，上面的像less在打包后会转换为css，所以只需要在开发阶段使用，但别的包，特别是没有使用过的包，我就不知道了。可以在安装之前看一下别人的文档，推荐使用的安装命令是什么，照着文档做就行了，如果文档没有，就大胆使用-S，不要在这一点上纠结。

2.5 全局安装

我们可以执行安装选项 -g 进行全局安装

xxxxxxxxxx
1
1
npm i -g nodemon

全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。nodemon可以代替node在命令行中执行命令，可以帮助解决之前的http服务器调试的一个问题：代码更改了之后，需要关闭服务器，重新启动服务器，才能显示最新的效果。而nodemon会自动重启，比如说在命令行运行：nodemon server.js，更改server.js里面的代码并保存，可以看到自动重启了，可以获取最新的代码。

该命令的作用是 自动重启 node 应用程序。

说明：

• 全局安装的命令不受工作目录位置影响。意味着可以在任何工作目录下使用全局命令。
• 全局安装和局部安装的包，存放的位置不一样：局部安装的包，一般存放在所属文件夹下的node_modules中；全局安装的包，可以通过 npm root -g 可以查看安装位置。

• 不是所有的包都适合全局安装 ，只有全局类的工具才适合，可以通过 查看包的官方文档来确定安装方式 ，这里先不必太纠结。
• 全局安装和局部安装的使用方式不一样：全局安装的包，是在命令行中使用，一般都是用它的包名当作全局命令名，比如说：nodemon、webpack、gulp、yarn等；而局部安装的包，是使用require导入，然后使用。

2.5.1 修改 windows 执行策略

windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略，这样像nodemon这样的全局命令就可以在任意工作目录的命令行里面执行了。

方法一：

1、以 管理员身份 打开 powershell 命令行

2、键入命令 set-ExecutionPolicy remoteSigned

3、键入 A 然后敲回车 👌

4、如果不生效，可以尝试重启 vscode

方法二：

在cmd中或者在vscode中选择command prompt命令行打开，就可以执行nodemon命令。

2.5.2 环境变量 Path

Path 是操作系统的一个环境变量，可以设置一些文件夹的路径，在当前工作目录下找不到可执行文件时，就会在环境变量 Path 的目录中挨个的查找，如果找到则执行，如果没有找到就会报错。

补充说明：

• 如果希望某个程序在任何工作目录下都能正常运行，就应该将该程序的所在目录配置到环境变量 Path 中。

• 如果希望一些应用程序可以使用cmd输入命令打开，可以找到此程序的安装位置，将安装位置（一般是安装位置的bin文件夹所在地址，bin文件夹里面存放着 .exe 或者 .cmd 后缀的文件，操作系统搜索的就是这些可执行文件。如果没有bin文件夹，一般就在程序的安装包的最外层有这些文件，多试一下就行了）配置到环境变量Path中。

  如何才能找到程序的安装位置呢？如果有图标，可以右键→属性→快捷方式→打开文件所在的位置，一般都是将程序的bin文件夹所在位置给复制一份，比如说我安装的vscode位置：D:\Software\developEnvironment\vscode\Microsoft VS Code\bin，我把它粘贴到环境变量Path中。

  如果没有图标，就找一下软件的安装位置，一般在C:/Program Files文件夹中可以找到。

  

在cmd中输入code，正常启动：

命令不是只有单独唤起cmd才能使用（此时的cmd所在目录是C:\Users\Administrator），而是在任何目录的cmd或powershell下都可以使用，这就非常方便了，因为我可以将gifcam等常用的程序，都设置Path，在做笔记时我就可以在命令行中直接唤起了，省得我每次都要到处找gifcam。

• windows 下查找命令的所在位置

  • cmd 命令行 中执行 where nodemon
  • powershell命令行 执行 get-command nodemon

2.6 安装包的所有依赖

在项目协作中有一个常用的命令就是 npm i ，通过该命令可以依据 package.json 和 package-lock.json 的依赖声明安装项目依赖。

xxxxxxxxxx
3
1
npm i
2
# 或者
3
npm install

node_modules 文件夹大多数情况都不会存入项目的git版本库，因为node_modules文件夹太大了，所以一般都会在.gitignore文件里面忽略掉，不让它上传到git仓库中，所以在协作开发的时候，使用了package.json和package-lock.json来记录使用的第三方库的情况，npm i可以很方便的安装这些记录好的依赖。

2.7 安装指定版本的包

项目中可能会遇到版本不匹配的情况，有时就需要安装指定版本的包，可以使用下面的命令。

xxxxxxxxxx
5
1
## 格式，这里的 <> 只是表示这个命令是一个整体，在实际使用的时候，不要带上 <> 
2
npm i <包名@版本号>
3
​
4
## 示例
5
npm i jquery@1.11.2

2.8 删除依赖

项目中可能需要删除某些不需要的包，可以使用下面的命令

xxxxxxxxxx
6
1
## 局部删除
2
npm remove uniq
3
npm r uniq
4
​
5
## 全局删除
6
npm remove -g nodemon

2.9 配置命令别名

通过配置命令别名可以更简单的执行命令。比如说在一个项目文件夹里面，我们之前学习的时候，是这样启动服务器的：node server.js，其中server.js是项目的主文件，那么通过配置命令别名，当命令非常长的时候，可以简化一些操作，在学习express时，你将会有所体会，因为启动express的命令，可以配置很多参数。

配置 package.json 中的 scripts 属性

xxxxxxxxxx
11
1
{
2
    .
3
    .
4
    .
5
    "scripts": {
6
        "server": "node server.js",
7
        "start": "node index.js",
8
    },
9
    .
10
    .
11
}

配置完成之后，可以使用别名执行命令

xxxxxxxxxx
2
1
npm run server
2
npm run start

不过 start 别名比较特别，使用时可以省略 run

xxxxxxxxxx
1
1
npm start

补充说明：

• npm start 是项目中一个常用的命令，一般用来启动项目
• npm run 有自动向上级目录查找的特性，跟 require 函数一样
• 对于陌生的项目，我们可以通过查看package.json文件里面的 scripts 属性来参考项目的一些操作

3.cnpm

3.1 介绍

cnpm 是一个淘宝构建的 npmjs.com 的完整镜像，也称为『淘宝镜像』，网址https://npmmirror.com/

cnpm 服务部署在国内 阿里云服务器上 ， 可以提高包的下载速度

官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同

3.2 安装

我们可以通过 npm 来安装 cnpm 工具

xxxxxxxxxx
1
1
npm install -g cnpm --registry=https://registry.npmmirror.com

3.3 操作命令

3.4 npm 配置淘宝镜像

用 npm 也可以使用淘宝镜像，配置的方式有两种

• 直接配置
• 工具配置

3.4.1 直接配置

执行如下命令即可完成配置

xxxxxxxxxx
1
1
npm config set registry https://registry.npmmirror.com/

3.4.2 工具配置

使用 nrm 配置 npm 的镜像地址 npm registry manager

1. 安装 nrm

xxxxxxxxxx
1
1
npm i -g nrm

2. 修改镜像

xxxxxxxxxx
1
1
nrm use taobao

3. 检查是否配置成功（选做）

xxxxxxxxxx
1
1
npm config list

检查 registry 地址是否为 https://registry.npmmirror.com/ , 如果 是 则表明设置成淘宝镜像成功。

4. 查看有哪些镜像地址

xxxxxxxxxx
1
1
nrm ls

可以使用nrm use npm将镜像转为npm官方地址。

补充说明：

1. 建议使用第二种方式进行镜像配置，因为后续修改起来会比较方便
2. 虽然 cnpm 可以提高速度，但是 npm 也可以通过淘宝镜像进行加速，所以 npm 的使用率还是高于 cnpm。建议使用npm配置淘宝镜像，一直使用npm命令。

4.yarn

4.1 yarn 介绍

yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具，官方网址：https://yarnpkg.com/

4.2 yarn 特点

yarn 官方宣称的一些特点

• 速度超快：yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快
• 超级安全：在执行代码之前，yarn 会通过算法校验每个安装包的完整性
• 超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，yarn 能够保证在不同系统上无差异的工作

4.3 yarn 安装

我们可以使用 npm 安装 yarn

xxxxxxxxxx
1
1
npm i -g yarn

4.4 yarn 常用命令

思考题：

这里有个小问题就是 使用yarn全局安装的包不可用 ，yarn 全局安装包的位置可以通过 yarn global bin 来查看，那你有没有办法使 yarn 全局安装的包能够正常运行？

4.5 yarn 配置淘宝镜像

可以通过如下命令配置淘宝镜像

xxxxxxxxxx
1
1
yarn config set registry https://registry.npmmirror.com/

可以通过 yarn config list 查看 yarn 的配置项：

我在安装从codeSandbox下载的项目依赖时，使用yarn，都会报错：

info There appears to be trouble with your network connection. Retrying...。

项目使用的就是yarn，所以没有办法换到npm，怎么解决呢？其实我的yarn配置的就是淘宝源，下载应该很快才对啊？

查了一下：https://blog.csdn.net/weixin_43558117/article/details/130343910，由于yarn.lock文件是通过远程抓取的，而不是本地yarn生成的，所以即使设置了淘宝源，在执行yarn install的时候，走的是别的仓库。

可以通过yarn install --verbose来验证，看是从哪里安装依赖的：

可以看到，安装依赖的时候，走的仍然是官方网址，没有走淘宝源。

怎么解决呢？可以通过忽略lock文件，同时install的时候加registry参数解决：yarn install --no-lockfile --registry https://registry.npmmirror.com/。

4.6 npm 和 yarn 选择

大家可以根据不同的场景进行选择

1. 个人项目

如果是个人项目， 哪个工具都可以 ，可以根据自己的喜好来选择

2. 公司项目

如果是公司要根据项目代码来选择，可以 通过锁文件判断 项目的包管理工具

• npm 的锁文件为 package-lock.json
• yarn 的锁文件为 yarn.lock

包管理工具npm和yarn 千万不要混着用，切记，切记，切记

5.管理发布包

5.1 创建与发布

我们可以将自己开发的工具包发布到 npm 服务上，方便自己和其他开发者使用，操作步骤如下：

1. 创建文件夹，并创建文件 index.js， 在文件中声明函数，使用 module.exports 暴露
2. npm 初始化工具包，package.json 填写包的信息 (包的名字是唯一的)
3. 注册账号 https://www.npmjs.com/signup
4. 激活账号 （一定要激活账号）
5. npm的镜像修改为npm的官方镜像 (命令行中运行 nrm use npm，这就是为什么老师推荐使用nrm来配置镜像 )
6. 命令行下 npm login 填写相关用户信息
7. 命令行下 npm publish 提交包 👌

5.2 更新包

后续可以对自己发布的包进行更新，操作步骤如下

1. 更新包中的代码
2. 测试代码是否可用
3. 修改 package.json 中的版本号
4. 发布更新

xxxxxxxxxx
1
1
npm publish

5.3 删除包

执行如下命令删除包。不需要输入包的名称，也不需要登录操作，因为之前在发布的时候已经登录过了，反正先执行这个命令即可，后续操作按照提示来做就行。

xxxxxxxxxx
1
1
npm unpublish --force

删除包需要满足一定的条件，https://docs.npmjs.com/policies/unpublish

• 你是包的作者
• 发布小于 24 小时
• 大于 24 小时后，没有其他包依赖，并且每周小于 300 下载量，并且只有一个维护者

6.扩展内容

在很多语言中都有包管理工具，比如：

除了编程语言领域有包管理工具之外，操作系统层面也存在包管理工具，不过这个包指的是『 软件包 』

07_nvm

1.介绍

nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具，方便切换不同版本的Node.js

2.使用

nvm 的使用非常的简单，跟 npm 的使用方法类似

2.1 下载安装

首先下载 nvm，下载地址 https://github.com/coreybutler/nvm-windows/releases

选择 nvm-setup.exe 下载，无脑安装即可。

nvm配置镜像：

在nvm所在的文件夹中，找到settings.txt，粘贴这两行代码。

xxxxxxxxxx
2
1
node_mirror: https://npmmirror.com/mirrors/node/
2
npm_mirror: https://npmmirror.com/mirrors/npm/

这样，nvm安装nodejs就会非常快了。

2.2 常用命令命令

08_Express 框架

1.express 介绍

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址：https://www.expressjs.com.cn/

简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）

2.express 使用

2.1 express 下载

express 本身是一个 npm 包，所以可以通过 npm 安装

xxxxxxxxxx
3
1
# 在项目文件夹中执行
2
npm init
3
npm i express

2.2 express 初体验

大家可以按照这个步骤进行操作：

1. 创建 JS 文件（app.js），键入如下代码

xxxxxxxxxx
15
1
//1. 导入 express
2
const express = require('express');
3
​
4
//2. 创建应用对象
5
const app = express();
6
​
7
//3. 创建路由规则
8
app.get('/home', (req, res) => { // req是请求报文的封装对象，res是响应报文的封装对象。这一点和http模块是类似的。
9
    res.end('hello express server');
10
});
11
​
12
//4. 监听端口 启动服务
13
app.listen(3000, () => {
14
    console.log('服务已经启动, 端口监听为 3000...');
15
});

结合之前学习的http模块来看express库，创建服务器的基本过程有什么区别？

区别在于express将路由规则单独提取出来了，而http服务器是所有路由都会走创建server的那段代码，先记住基本创建过程，不断复习，才能增强信心。

2. 命令行下执行该脚本，node app.js

xxxxxxxxxx
4
1
node <文件名>
2
# 或者
3
nodemon <文件名>
4
# 或者如果你在package.json里面指定了命令别名，同时将main属性指向正确的文件，那么可以使用 npm run 命令别名  来执行。

3. 然后在浏览器就可以访问 http://127.0.0.1:3000/home 👌

小节：

这么简单的几行代码，就可以创建一个服务器，我是真的没有想到会这么简单。在我的印象中，服务端项目最起码要和前端项目一样复杂才对啊，这个想法没有错，但那应该是完整的项目，有很多复杂的功能。

应该说创建服务器本身是很简单的（就像我写一个html网页一样简单，里面可以加上一些基本的css和js），是我把它想的复杂了，面对我一直没有解决的问题，我总是习惯性地夸大难度、找不准方向。难就难在其功能的复杂性，要操作数据库、要保证安全、要验证用户信息、要写各种路由api、要错误兼容等等，把完整功能加上去之后就非常复杂了。不过再复杂，也只是一个服务器而已，记住这句话，抓住这个主线，才能不迷路。

3.express 路由

3.1 什么是路由

官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求

3.2 路由的使用

一个路由的组成由请求方法 ， 路径 和 回调函数 组成。

express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

xxxxxxxxxx
1
1
app.<method>(path,callback)

代码示例：

注意：

下面写响应报文的时候，用到了res.send()方法，这是express的响应方法，express对http模块的一些操作做了兼容，可以使用res.end()方法，下面第四小节讲到了。

xxxxxxxxxx
35
1
//导入 express
2
const express = require('express');
3
​
4
//创建应用对象
5
const app = express();
6
​
7
//创建 get 路由
8
app.get('/home', (req, res) => {
9
    res.send('网站首页');
10
});
11
​
12
//首页路由
13
app.get('/', (req,res) => {
14
    res.send('我才是真正的首页');
15
});
16
​
17
//创建 post 路由
18
app.post('/login', (req, res) => {
19
    res.send('登录成功');
20
});
21
​
22
// all 表示匹配所有的请求方法，不管请求方法是get还是post还是put还是delete还是options，只要path为 /search ，都匹配到。
23
app.all('/search', (req, res) => {
24
    res.send('1 秒钟为您找到相关结果约 100,000,000 个');
25
});
26
​
27
//自定义 404 路由，* 表示通配符，如果上面的path都没有匹配到，那么就显示404。因此这段代码一定要放到最后来执行，否则就把正常的路由给匹配到了。
28
app.all("*", (req, res) => {
29
    res.send('<h1>404 Not Found</h1>')
30
});
31
​
32
//监听端口 启动服务
33
app.listen(3000, () =>{
34
    console.log('服务已经启动, 端口监听为 3000');
35
});

3.3 获取请求参数

express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式。

下面的示例中，直接在url上写一些query参数来测试即可，比如：http://127.0.0.1:9000/request?a=1&b=2

xxxxxxxxxx
31
1
//导入 express
2
const express = require('express');
3
​
4
//创建应用对象
5
const app = express();
6
​
7
//获取请求的路由规则
8
app.get('/request', (req, res) => {
9
    //1. 获取报文的方式与原生 HTTP 获取方式是兼容的
10
    console.log(req.method);
11
    console.log(req.url);
12
    console.log(req.httpVersion);
13
    console.log(req.headers);
14
    
15
    //2. express 独有的获取报文的方式
16
    // 获取路径
17
    console.log(req.path);
18
    // 获取ip
19
    console.log(req.ip);
20
    //获取查询字符串
21
    console.log(req.query); // 『相对重要』
22
    // 获取指定的请求头。这里举了一个获取host请求头参数的例子，不要以为只能获取host请求头参数，可以获取非常多的请求头参数，比如说：accept、accept-encoding、cache-control、user-agent、referer等等都可以获取。
23
    console.log(req.get('host'));
24
    
25
    res.send('请求报文的获取');
26
});
27
​
28
//启动服务
29
app.listen(3000, () => {
30
    console.log('启动成功....')
31
})

HTTP原生获取参数输出：

express独有获取参数方式输出：

3.4 获取路由参数

路由参数指的是 URL 路径中的参数（数据）。

xxxxxxxxxx
4
1
// :id 表示占位符，可以先获取id，然后判断进行处理，符合要求的就返回数据。
2
app.get('/:id.html', (req, res) => {
3
    res.send('商品详情, 商品 id 为' + req.params.id);// 使用req.params获取路由参数时，里面的属性名和占位符是一致的。
4
});

3.4.1 路由参数练习

需求：根据路由参数响应歌手的信息，路径结构：/singer/1.html，显示歌手的姓名和图片（数据在老师的代码中有）。

分析：这个练习还是蛮简单的，只需要在url栏里面更改url就当作发送请求了，使用req.params.id来获取歌手的id。不过导入json文件在这里不使用fs模块（fs读取文件返回的是buffer类型，处理起来很麻烦），而是使用require来导入，因为require导入json文件后，是一个js的对象，可以直接使用这个对象。响应报文的响应体是一个html，并且要对没有找到数据的情况做兼容。

xxxxxxxxxx
11
1
{
2
    "singers":[
3
        {
4
            "singer_name":"周杰伦",
5
            "singer_pic":"http://y.gtimg....",
6
            "other_name":"Jay Chou",
7
            "singer_id":4558,
8
            "id":1
9
        },
10
    ]
11
}

代码：

xxxxxxxxxx
44
1
// 导入express
2
const express = require("express");
3
// 导入json文件
4
const { singers } = require("./singers.json");
5
​
6
// 创建应用对象
7
const app = express();
8
​
9
// 创建路由规则
10
app.get("/singer/:id.html", (req, res) => {
11
  // 获取路由参数
12
  let { id } = req.params;
13
  // 查找歌手
14
  let result = singers.find((item) => Number(id) === item.id);
15
  if (!result) {
16
    res.statusCode(404).send("<h2>未找到此歌手</h2>");
17
    return;
18
  }
19
  res.send(`
20
    <!DOCTYPE html>
21
    <html lang="en">
22
        <head>
23
        <meta charset="UTF-8" />
24
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
25
        <title>我是歌手</title>
26
        </head>
27
        <body>
28
        <h2>歌手名称：${result.singer_name}</h2>
29
        <hr />
30
        <img src="${result.singer_pic}" />
31
        </body>
32
    </html>        
33
    `);
34
});
35
​
36
// 设置404界面
37
app.all("*", (req, res) => {
38
  res.send("<h1>404 Not Found</h1>");
39
});
40
​
41
// 启动服务，监听端口
42
app.listen(3000, () => {
43
  console.log("服务已启动，端口号3000监听中...");
44
});

显示效果：

4.express 响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式。

xxxxxxxxxx
23
1
//获取请求的路由规则
2
app.get("/response", (req, res) => {
3
    //1. express 中设置响应的方式兼容 HTTP 模块的方式
4
    res.statusCode = 404;
5
    res.statusMessage = 'xxx';
6
    res.setHeader('abc','xyz');
7
    res.setHeader("content-type","text/html;charset=utf8")
8
    res.write('响应体');// 能用write方法，但是必须在最后使用 end 方法做结束。这一点比http模块中要严格。
9
    res.end('xxx');
10
    
11
    //2. express 的响应方法
12
    res.status(500); //设置响应状态码
13
    res.set('xxx','yyy');//设置响应头
14
    res.send('中文响应不乱码');//设置响应体
15
    //连贯操作
16
    res.status(404).set('xxx','yyy').send('你好朋友')
17
    
18
    //3. 其他响应
19
    res.redirect('http://atguigu.com')//重定向
20
    res.download('./package.json');//下载响应
21
    res.json({"msg":"ok"});//响应 JSON
22
    res.sendFile(__dirname + '/home.html') //响应文件内容
23
});

兼容HTTP响应方式：

express响应方法的输出：

express的其他响应很牛逼啊，把项目中主要用到的响应都涉及到了，特别是res.json()，我以后应该是用的最多的，而且会对json的内容做一个封装，设置成这种形式：

xxxxxxxxxx
5
1
{
2
 "code":200,
3
 "msg":"ok",
4
 "data":""
5
}

其中data部分是变化最多的，可以返回多种数据类型，其余部分会随着响应报文是否正常，来显示不同内容。

5.express 中间件

5.1 什么是中间件

中间件（Middleware）本质是一个回调函数。

中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）。

上面这句话是什么意思？

这句话的意思是在使用中间件的地方，中间件可以使用该地方的请求对象和响应对象，而且是在该地方使用请求对象和响应对象之前使用。如果是全局中间件，那么全局中间件可以使用每一个路由规则中的请求对象和响应对象。如果是路由中间件，那么在使用路由中间件的路由规则中，中间件就可以使用此路由中的请求对象和响应对象。把这一点认识清楚非常重要，否则永远搞不懂中间件是怎么运行的。

一般情况下（特殊情况我还不知道，按照普通使用方式都应该是这样），如果使用了中间件函数（不管是全局中间件还是路由中间件），那么中间件函数会在具体路由函数之前执行，比如说：

xxxxxxxxxx
14
1
// 声明路由中间件
2
let checkCodeMiddleware = (req,res,next)=>{
3
 if(req.query.code === '521'){
4
     next();// 注意这里的用法，我原本想在这个函数里面添加一个参数的，然后返回这个参数。但是很明显，我没有理解next()函数的作用，next()函数就是执行之后的代码的。
5
 } else {
6
     // 如果不符合条件，那么就直接返回响应结果。调用中间件的路由规则里面的函数就不会执行了。
7
     res.send("暗号错误")
8
 }
9
}
10
​
11
// 调用中间件
12
app.get("/admin",checkCodeMiddleware,(req,res)=>{
13
 res.send("后台admin界面")
14
})

那么这里的checkCodeMiddleware会在路由本身的(req,res)=>{}之前执行，而且是同步的执行，checkCodeMiddleware执行完成之后，(req,res)=>{}才会执行。

什么地方可以看到是同步的执行？中间件函数都有一个next参数，这个参数是一个函数，只有显式地执行了next()之后，才会执行路由本身的(req,res)=>{}。

5.2 中间件的作用

中间件的作用 就是 使用函数封装公共操作，简化代码。

5.3 中间件的类型

• 全局中间件
• 路由中间件

5.3.1 定义全局中间件

每一个请求到达服务端之后 都会执行全局中间件函数。

使用方式一：

1、声明中间件函数，函数名可以随便起，但一般都带上Middleware，用于提示这是个中间件。可以写成普通函数，也可以写成箭头函数。

xxxxxxxxxx
6
1
let recordMiddleware = function(request,response,next){
2
    //实现功能代码
3
    //.....
4
    //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
5
    next();
6
}

2、应用中间件

xxxxxxxxxx
1
1
app.use(recordMiddleware)

使用方式二：

声明时可以直接将匿名函数传递给 app.use()

xxxxxxxxxx
4
1
app.use(function (request, response, next) {
2
    console.log('定义第一个中间件');
3
    next();
4
})

案例：

需求：记录每个请求的url和IP地址，存放到一个文件当中。

分析：因为要记录每个请求的URL和IP地址，所以就要使用全局中间件，解析里面的request参数，使用fs模块写入一个文件当中。

xxxxxxxxxx
32
1
const express = require("express")
2
const fs = require("fs")
3
const path = require("path")
4
​
5
const app = express();
6
​
7
// 定义全局中间件
8
const recordMiddleware = function(request,response,next){
9
    let {url,ip} = request;
10
    fs.appendFileSync(path.resolve(__dirname, "access.log"),`${url} ${ip}`);
11
    // 必须要写next()
12
    next();
13
}
14
​
15
// 应用中间件
16
app.use(recordMiddleware);
17
​
18
app.get("/home",(req,res) => {
19
    res.send("首页界面")
20
})
21
​
22
app.get("/admin",(req,res)=>{
23
    res.send("后台admin界面")
24
})
25
​
26
app.all("*",(req,res)=>{
27
    res.send("<h1>404 Not Found</h1>")
28
})
29
​
30
app.listen(9000,()=>{
31
    console.log("服务已启动，端口号9000监听中...")
32
})

效果：

查看access.log文件：

5.3.2 多个全局中间件

express 允许使用 app.use() 定义多个全局中间件。

方式一：

xxxxxxxxxx
9
1
app.use(function (request, response, next) {
2
    console.log('定义第一个中间件');
3
    next();
4
})
5
​
6
app.use(function (request, response, next) {
7
    console.log('定义第二个中间件');
8
    next();
9
})

方式二：

xxxxxxxxxx
11
1
const checkMiddleware = function(req,res,next){
2
    console.log('定义第一个中间件');
3
    next();
4
}
5
​
6
const recordMiddleware = function(req,res,next){
7
    console.log('定义第二个中间件');
8
    next();
9
}
10
​
11
app.use(checkMiddleware,recordMiddleware);

如果使用多个全局中间件，执行顺序是什么样的？

是按照注册的顺序来执行的。如果是app.use(middleware1,middleware2)这种方式，是按照参数的顺序来执行的。

5.3.3 定义路由中间件

如果 只需要对某一些路由进行功能封装 ，则就需要路由中间件。

还是先定义中间件，然后在路由中调用中间件函数。（就不是使用app.use()来调用了）

调用格式如下：

xxxxxxxxxx
8
1
// 注意：下面的中间件函数看似用模版字符串包裹起来了，其实不是的，这只是老师为了写中文加上去的。如果定义了中间件函数，直接写中间件函数的函数名即可。
2
app.get('/路径',`中间件函数`,(request,response)=>{
3
    
4
});
5
​
6
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
7
    
8
});

案例：

需求：针对 /admin 和 /setting 的请求，要求URL携带 code=521 的参数，如未携带提示“暗号错误”

分析：因为是多个路由中（不是全部路由）要处理一些类似的事情，所以用路由中间件。

xxxxxxxxxx
29
1
const express = require("express")
2
​
3
const app = express()
4
​
5
// 声明路由中间件
6
let checkCodeMiddleware = (req,res,next)=>{
7
    if(req.query.code === '521'){
8
        next();// 注意这里的用法，我原本想在这个函数里面添加一个参数的，然后返回这个参数。但是很明显，我没有理解next()函数的作用，next()函数就是执行之后的代码的。
9
    } else {
10
        res.send("暗号错误")
11
    }
12
}
13
​
14
app.get("/home",(req,res)=>{
15
    res.send("首页界面")
16
})
17
​
18
// 调用中间件
19
app.get("/admin",checkCodeMiddleware,(req,res)=>{
20
    res.send("后台admin界面")
21
})
22
​
23
app.get("/setting",checkCodeMiddleware,(req,res)=>{
24
    res.send("设置界面")
25
})
26
​
27
app.listen(9000,()=>{
28
    console.log("服务器已启动，端口号9000监听中...")
29
})

显示效果：

5.4 静态资源中间件

express 内置处理静态资源的中间件，使用express.static()。

xxxxxxxxxx
19
1
//引入express框架
2
const express = require('express');
3
​
4
//创建服务对象
5
const app = express();
6
​
7
//静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
8
app.use(express.static('./public')); //当然这个目录中都是一些静态资源
9
//如果访问的内容经常变化，还是需要设置路由
10
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
11
//则谁书写在前，优先执行谁
12
app.get('/index.html',(request,response)=>{
13
    respsonse.send('首页');
14
});
15
​
16
//监听端口
17
app.listen(3000,()=>{
18
    console.log('3000 端口启动....');
19
});

注意事项:

1. index.html 文件为默认打开的资源

即使服务端代码里面没有配置/index.html的路由，那么访问http://127.0.0.1:3000默认打开的就是index.html资源，而如果配置了静态资源中间件，那么系统就会自动到静态资源文件夹中去查找文件。

2. 如果静态资源与路由规则同时匹配，谁先匹配就响应谁
3. 路由响应动态资源，静态资源中间件响应静态资源

这个功能相当于我们之前在http模块里面做的，响应不同的静态资源的案例。只不过express用一行代码就全部搞定了，而且会自动设置MIME类型，可以说是非常方便了。但我还是有一个疑问：纯后端express项目，需要静态资源吗？这个问题等我做项目的时候，可以带着问题想一想。

这个还是很有作用的，当我没有tomcat时，可以使用express来做一个简易的服务器，让别人都能够访问我的网站。

有了express的这个功能，创建项目服务器更简单了。

xxxxxxxxxx
9
1
const express = require("express");
2
​
3
const app = express();
4
​
5
app.use(express.static("./info-collector"));
6
​
7
app.listen(9000, () => {
8
 console.log("服务已启动，端口9000监听中...");
9
});

项目可以直接使用http://localhost:9000/来访问，更简单了。

5.4.1 练习

需求：局域网内可以访问尚品汇的网页。尚品汇就是一个编写好的、打包好的前端项目。

分析：其实就是使用express的静态资源中间件，来展示index.html。

xxxxxxxxxx
9
1
const express = require("express")
2
​
3
const app = express()
4
​
5
app.use(express.static("./尚品汇"))
6
​
7
app.listen(3000,()=>{
8
    console.log("服务器已启动，端口号3000监听中...")
9
})

5.5 获取请求体数据 body-parser

express 可以使用 body-parser 包处理请求体。

使用案例来学习：

需求：按照要求搭建http服务，GET /login 显示表单网页，POST /login 获取表单中的用户名和密码。

分析：GET路由返回一个HTML页面，使用fs来读取。这个HTML页面里面，使用form表单来提交post请求。在POST路由里面，使用body-parser来获取请求体。

第一步：安装

xxxxxxxxxx
1
1
npm i body-parser

第二步：导入 body-parser 包

xxxxxxxxxx
1
1
const bodyParser = require('body-parser')

第三步：获取中间件函数

xxxxxxxxxx
4
1
//处理 querystring 格式的请求体的中间件
2
let urlParser = bodyParser.urlencoded({extended:false}));
3
//处理 JSON 格式的请求体的中间件
4
let jsonParser = bodyParser.json();

第四步：设置路由中间件，然后使用 request.body 来获取请求体数据。

body-parser可以作为全局中间件使用，也可以作为路由中间件使用。但推荐作为路由中间件使用，因为不是所有路由都需要body-parser来解析请求体的，而且处理请求体的方式有两种，全局设置也不好判断怎么处理。

怎么看使用urlParser还是jsonParser呢？在前后端分离项目中，这其实是后端来定义前端的请求方式的。那么如果遇到实在不知道的情况，可以看前端提交参数的方式，在一个请求里面Payload，view parsed可以看到。

xxxxxxxxxx
9
1
app.post('/login', urlParser, (request,response)=>{
2
    //获取请求体数据
3
    //console.log(request.body);
4
    //用户名
5
    console.log(request.body.username);
6
    //密码
7
    console.log(request.body.password);
8
    response.send('获取请求体数据');
9
});

获取到的请求体数据：

不用管前面的[Object: null prototype]，这只是一种提示，值是后面的对象。

xxxxxxxxxx
1
1
[Object: null prototype] { username: 'admin', userpass: '123456' }

完整代码：

xxxxxxxxxx
21
1
// index.html
2
​
3
<!DOCTYPE html>
4
<html lang="en">
5
  <head>
6
    <meta charset="UTF-8" />
7
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
    <title>登录</title>
10
  </head>
11
  <body>
12
    <h2>登录界面</h2>
13
    <hr />
14
    <!-- action里面可以简写为 /login ，为什么？复习一下前面讲绝对路径的知识就知道了。 -->
15
    <form action="http://127.0.0.1:3000/login" method="post">
16
      用户名：<input type="text" name="username" placeholder="请输入用户名" /> 
17
      密码：<input type="password" name="password" placeholder="请输入密码" />
18
      <button>登录</button>
19
    </form>
20
  </body>
21
</html>

xxxxxxxxxx
32
1
// app.js
2
​
3
// 引入express框架
4
const express = require("express");
5
const path = require("path");
6
const bodyParser = require("body-parser");
7
​
8
// 创建服务对象
9
const app = express();
10
​
11
// 定义body-parser解析中间件
12
let urlencodedParser = bodyParser.urlencoded({ extended: false });
13
​
14
app.get("/login", (req, res) => {
15
    // 这里如果使用fs模块来读取html文件，并使用res.send()返回读取的数据，访问 /login 会自动下载这个文件。估计express的处理规则是这样的，所以这里要使用sendFile()方法，里面的参数是文件的绝对路径。
16
    res.sendFile(path.resolve(__dirname,"index.html"));
17
});
18
​
19
app.post("/login", urlencodedParser, (req, res) => {
20
  console.log(req.body);
21
  // 请求体的参数保存在req.body中。这里的请求参数为什么是username和password？其实这是前端提交的，我不了解form的请求机制，所以这里有点疑问。请求体的参数一般都是后端规定好，前端再来使用的。
22
  res.send(`用户名是：${req.body.username}，密码是：${req.body.password}`);
23
});
24
​
25
app.all("*", (req, res) => {
26
  res.status(404).send("<h1>404 Not Found</h1>");
27
});
28
​
29
// 监听端口
30
app.listen(3000, () => {
31
  console.log("服务已启动，端口号3000监听中...");
32
});

效果：

5.6 防盗链

定义：防止外部网站盗用本地的资源。原理：禁止其它域名的网站来访问本网站的资源。

比如说：我在百度搜图里面，找几张图，复制它们的链接，粘贴到我的html文件中的img上，打开html文件，可以看到有的图片可以显示，有的图片不能显示，这就说明了有的图片设置了防盗链。

实现防盗链：

通过判断referer请求头是否为网站域名来返回不同结果。referer是访问图片时自动带上的头信息，不需要额外设置。

（在此案例中，使用 127.0.0.1:3000 和 localhost:3000来访问，在index.html里面使用img来测试防盗链。如果是直接在url里面访问public里的文件，还是可以正常访问的：http://localhost:3000/images/logo.png。这种情况的访问在请求头里面没有referer参数，估计还要另外想办法才行，先不用管）

xxxxxxxxxx
14
1
<!-- index.html -->
2
​
3
<!DOCTYPE html>
4
<html lang="en">
5
  <head>
6
    <meta charset="UTF-8" />
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
    <title>Document</title>
9
  </head>
10
  <body>
11
    <h2>测试防盗链</h2>
12
    <img src="http://127.0.0.1:3000/images/logo.jpg" alt="" />
13
  </body>
14
</html>

xxxxxxxxxx
27
1
const express = require("express");
2
​
3
const app = express();
4
​
5
app.use(function (req, res, next) {
6
  const referer = req.get("referer");
7
  // console.log(referer);
8
  if (referer) {
9
    // referer此时是一个字符串，不好获取ip地址，所以将其构造成为url对象，这样获取hostname就很简单了
10
    let url = new URL(referer);
11
    // 获取hostname
12
    let hostname = url.hostname;
13
    // 根据hostname来判断，如果不是特定的域名，就返回404
14
    if (hostname !== "127.0.0.1") {
15
      res.send("<h2>404 Not Found</h2>");
16
      return;
17
    }
18
  }
19
  next();
20
});
21
​
22
app.use(express.static("./public"));
23
​
24
app.listen(3000, () => {
25
  console.log("服务已启动，端口号3000监听中...");
26
});
27
​

先输出req.get("referer")看一下是什么样子的：

测试，直接在url中访问，看不同的网站域名是什么效果。

下面显示使用localhost来访问，是访问不了的。

6.Router

6.1 什么是 Router

express 中的 Router 是一个完整的中间件和路由系统， Router可以看做是一个小型的 app 对象，你看独立router文件里面router的用法，和app.<method>(path,callback)的用法一样，也可以使用router.use()来使用中间件。

6.2 Router 作用

对路由进行模块化，更好的管理路由。

6.3 Router 使用

在public文件夹同层级创建routes文件夹，里面创建独立的 JS 文件（homeRouter.js），使用express.Router()来创建Router。

xxxxxxxxxx
17
1
//1. 导入 express
2
const express = require('express');
3
​
4
//2. 创建路由器对象
5
const router = express.Router();
6
​
7
//3. 在 router 对象身上添加路由
8
router.get('/', (req, res) => {
9
    res.send('首页');
10
})
11
​
12
router.get('/cart', (req, res) => {
13
    res.send('购物车');
14
});
15
​
16
//4. 暴露
17
module.exports = router;

可以看到，创建router的过程和创建app基本流程是一致的，先记住基本流程的创建。

主文件

xxxxxxxxxx
13
1
const express = require('express');
2
​
3
const app = express();
4
​
5
//5.引入子路由文件
6
const homeRouter = require('./routes/homeRouter');
7
​
8
//6.设置和使用中间件
9
app.use(homeRouter);
10
​
11
app.listen(3000,()=>{
12
    console.log('3000 端口启动....');
13
})

注意：

虽然说router就是小型的app，但是如果一个router里面想要使用一个通用的中间件，可不可以这样呢：

xxxxxxxxxx
1
1
router.use(checkTokenMiddleware);

这样就可以避免在每一个路由规则里面写同样的中间件了，省事了不少。但实际效果是什么样的呢？

实际效果是不同的routes文件中，所有使用router创建的路由规则，都挂载上了这个中间件，有一些路由规则是不能使用这个中间件的，比如说登录、注册的路由规则。

说明不同的routes文件中的router，是同一个router，只不过挂载上了不同的路由规则而已，暴露出去的也是挂载了不同路由规则的router。

7.EJS 模板引擎

7.1 什么是模板引擎

模板引擎是分离 用户界面和业务数据 的一种技术。可以简单的认为是将html和js文件分离开来，分别进行处理（这里的将HTML和JS分离开来，指的是服务端的项目，在服务端写前端代码，像JSP，Django这种类型的）。

是的，我目前的感觉是，ejs不太重要，因为目前做的项目都是前后端分离，我在vue中写不是简单多了吗？这种模板语法在Django中看过，可以看一下这个文档：https://zhuanlan.zhihu.com/p/448064809。但是以后如果我找remote-developer的工作，不一定就是前后端分离的CRM这类全栈项目，也很有可能是工具类的全栈项目，这些全栈项目需要有一些页面在服务端进行处理，现在我就看到codeSandbox、prisma、vercel等等工具都是这样的，而这些工具类项目也很赚钱啊（提供基本功能的免费版，更多功能则收费，国外的很多公司都是愿意付费的），我如果能够参与进去，那肯定钱都不是问题了。那么这里的ejs还是要重视起来，最起码老师讲的内容要弄清楚，做好笔记。

搜索到的一段话：

EJS最方便的地方就是在于将项目给别人使用的时候，人家不用过多的去了解你的代码，直接修改配置文件就可以达到自己想要的效果。比如说工具类的软件Hexo，普通人想要自己创建博客网站，非常难，即使是程序员，也是很难的，但是使用Hexo只需要进行配置接口。Hexo中的配置都集中在_config.yml这个文件中，你根本不需要去一行一行的浏览源代码，就可以实现修改，达到你想要的效果。

那么我如果做了hexo这个项目，让用户在_config.yml文件里面配置好了之后，执行build命令时我就可以从这个文件里面获取具体的值，填入到ejs文件中，速度会非常快。

7.2 什么是 EJS

EJS 是一个高效的 Javascript 的模板引擎。

官网: https://ejs.co/

中文站：https://ejs.bootcss.com/

7.3 EJS 初体验

下载安装EJS

xxxxxxxxxx
1
1
npm i ejs --save

代码示例

xxxxxxxxxx
9
1
//1.引入ejs
2
const ejs = require('ejs');
3
//2.定义数据
4
let person = ['张三','李四','王二麻子'];
5
//3.ejs解析模板返回结构
6
//<%= %> 是ejs解析内容的标记，作用是输出当前表达式的执行结构
7
let html = ejs.render('<%= person.join(",") %>', {person:person});
8
//4.输出结果
9
console.log(html);

示例：

老师用一步一步的示例来展示出ejs到底可以怎么写：

xxxxxxxxxx
33
1
// index.js
2
​
3
const ejs = require("ejs")
4
const fs = require("fs")
5
​
6
let china = "中国";
7
​
8
// 首先使用ejs的方法直接渲染
9
// let result = ejs.render(`我爱你 <%= china %>`,{china:china})
10
// console.log(result) // 输出：我爱你 中国
11
​
12
// 优化：可以将ejs模板提取出来
13
// let str = `我爱你 <%= china %>`
14
// let result = ejs.render(str,{china:china})
15
// console.log(result) // 输出：我爱你 中国
16
​
17
// 优化：将ejs模板放到html文件中，然后用fs模块读取出来。这里要使用toString()方法，因为ejs只能渲染字符串。
18
let str = fs.readFileSync('./1.html').toString();
19
let result = ejs.render(str,{china:china});
20
console.log(result)
21
/**输出结果：
22
 * <!DOCTYPE html>
23
<html lang="en">
24
<head>
25
    <meta charset="UTF-8">
26
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
27
    <title>Document</title>
28
</head>
29
<body>
30
    <h2>我爱你 中国</h2>
31
</body>
32
</html>
33
 */

xxxxxxxxxx
12
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Document</title>
7
</head>
8
<body>
9
    <!-- 只需要在html中使用ejs语法，就可以将值传进来。 -->
10
    <h2>我爱你 <%= china %></h2>
11
</body>
12
</html>

7.4 EJS 常用语法

执行JS代码

xxxxxxxxxx
1
1
<% code %>

输出转义的数据到模板上

xxxxxxxxxx
1
1
<%= code %>

输出非转义的数据到模板上

xxxxxxxxxx
1
1
<%- code %>

7.5 ejs的一些语法

7.5.1 ejs列表渲染

需求：有一个数组，将里面的每一个元素渲染为一个li标签。

xxxxxxxxxx
14
1
// 先用原生JS来实现
2
​
3
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
4
​
5
let str = '<ul>'
6
​
7
xiyou.forEach(item => {
8
    str += `<li>${item}</li>`
9
})
10
​
11
// 闭合ul
12
str += '</ul>'
13
​
14
console.log(str)

输出结果：

用ejs实现：

xxxxxxxxxx
7
1
const ejs = require("ejs");
2
const fs = require("fs");
3
​
4
const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
5
let html = fs.readFileSync("./2.html").toString();
6
let result = ejs.render(html, { xiyou: xiyou });
7
console.log(result);

xxxxxxxxxx
18
1
<!-- 2.html -->
2
​
3
<!DOCTYPE html>
4
<html lang="en">
5
  <head>
6
    <meta charset="UTF-8" />
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
    <title>西游四人组</title>
9
  </head>
10
  <body>
11
    <h2>西游四人组</h2>
12
    <ul>
13
      <% xiyou.forEach(item => { %>
14
        <li><%= item %></li>
15
      <% }) %>
16
    </ul>
17
  </body>
18
</html>

输出结果：

7.5.2 ejs条件渲染

需求：

xxxxxxxxxx
5
1
/**
2
 * 需求：通过isLogin决定最终的输出内容
3
 * true   输出  <span>欢迎回来</span>
4
 * false  输出  <button>登录</button>  <button>注册</button>
5
 */

原生js实现：

xxxxxxxxxx
7
1
let isLogin = true;
2
​
3
if (isLogin) {
4
  console.log("<span>欢迎回来</span>");
5
} else {
6
  console.log("<button>登录</button>  <button>注册</button>");
7
}

ejs实现：

xxxxxxxxxx
7
1
const ejs = require("ejs");
2
const fs = require("fs");
3
let isLogin = true;
4
​
5
let html = fs.readFileSync("./3.html").toString();
6
let result = ejs.render(html, { isLogin: isLogin });
7
console.log(result)