初识 Express(基于 NodeJS http 模块封装的 Web 框架)
- 参考
- 描述
- Express
- 获取
- nodemon
- 获取
- 使用
- 使用
- 创建一个基本的服务器
- 基本路由
- 对客户端的 GET 请求进行响应
- 获取通过 GET 方式提交的 URL 参数
- 静态 URL 参数
- 动态 URL 参数
- 静态资源托管服务器
- public
- 前缀
参考
项目 | 描述 |
---|---|
Express | 中文官网 |
哔哩哔哩 | 黑马程序员 |
搜索引擎 | Bing |
描述
项目 | 描述 |
---|---|
NodeJS | v18.13.0 |
nodemon | 2.0.20 |
npm | 8.19.3 |
Edge | 109.0.1518.61 (正式版本) (64 位) |
Express | 4.18.2 |
Express
Express 是基于 NodeJS 的内置模块 http 模块封装而成的,相比 http 模块,Express 使用起来更为便捷,功能也更加强大。
获取
首先,请打开终端并使用 cd 命令切换工作目录至项目文件的根目录下。完成上述操作后,在终端中输入如下命令已安装 Exprees:
npm install Express
注:
使用上述命令前请确保你已经安装 npm (NodeJS 包管理工具,该工具默认同 NodeJS 一同安装)。如果你不确认是否已经安装,可以使用如下命令进行检测:
npm -v
如果正确打印了 npm 的版本信息,则表明你已经成功安装 npm。如果你没有安装 npm 或对 npm 不是很了解,欢迎移步至我的另一篇博客 NodeJS 之 npm(NodeJS Package Manager)包管理工具 。
nodemon
获取
在使用 NodeJS 进行 Web 开发时,你可能需要经常性的重启项目来查看效果,这对程序员来说是个大问题。如果你安装了 nodemon ,那么在你保存 JavaScript 文件时(即使你没有修改该文件),nodemon 将自动重启项目。
你可以使用 npm 来对 nodemon 进行全局安装(使用这种安装方式进行安装,你可以在其他项目中使用被安装的模块),使用如下命令通过 npm 对 nodemon 进行安装:
npm install -g nodemon
使用
如果你希望使用 nodemon 来自动重启你的项目,你需要使用如下命令来对该项目中的某一文件(通常是 index.js)进行打开:
nodemon index.js
在你使用该命令后对文件进行打开后,如果你保存了文件,终端中将打印如下(类似)信息,表示程序正在进行重启项目的操作。
[nodemon] restarting due to changes…
[nodemon] starting `node index.js`
[nodemon] clean exit - waiting for changes before restart
使用
创建一个基本的服务器
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
基本路由
对客户端的 GET 请求进行响应
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
// 处理客户端的 GET 请求
app.get('/', (req, res) => {
res.send('Hello 中国');
})
效果:
注:
- 你需要向 app.get() 提供两个参数,其中第一个为 GET 请求访问的网页路径( / 表示根路径,即 http://127.0.0.1:8080/);
第二个参数为服务器端接收到客户端发送的 GET 请求后需要执行的回调函数。你可以向该函数提供两个参数以接收两个实参,其中第一个实参为 代表客户端的请求对象,第二个实参为 代表服务器端的响应对象。 - 当监听端口为 80 时,你可以直接访问 http://127.0.0.1 而不需要指定端口号,因为 80 端口为 http 服务使用的默认端口。
- 可以看到该程序成功的输出了中文(没有发生乱码),我们并没有设置响应头以告知客户端浏览器响应内容使用的编码方式。在使用 http 模块时,需要认为设置响应头以指明使用的编码方式,否则中文将乱码显示。
获取通过 GET 方式提交的 URL 参数
通过 GET 方式对数据进行提交,需要在 URL 中添加相应的参数。常见的参数形式有两种,即静态 URL 参数及动态 URL 参数。
静态 URL 参数
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
// 处理客户端的 GET 请求
app.get('/:name', (req, res) => {
res.send(req.params);
})
效果:
在运行该服务器后,访问链接 http://127.0.0.1:8080/RedHeart,你将得到如下显示结果。
注:
- 当我们设置 app.get() 的第一个参数为 ‘/:name’ 时,在 :name 所处的位置传递参数,参数名都将为 name。当然你也可以使用其他参数名。
- Express 会自动对 URL 进行分析,并提取其中的静态 URL 参数,你可以通过 Express 提供的接口 req.params 来获取 URL 参数的分析结果。
- 你可以设置不止一个的静态参数,比如为上述服务器再添加一个 age 静态参数。你可以将 app.get() 的第一个参数改为 ‘/:name/:age’ 。
动态 URL 参数
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
// 处理客户端的 GET 请求
app.get('/', (req, res) => {
res.send(req.query);
})
效果:
在运行该服务器后,访问链接 http://127.0.0.1:8080/?name=RedHeart,你将得到如下显示结果。
注:
- 当我们设置 app.get() 的第一个参数为 ‘/’ 时,你可以在网页根路径传递参数,传递参数使用的具体格式为:
?参数1=参数值1&参数2=参数值2
当然你还可以添加其他参数,只不过需要通过 & 来进行连接。
- Express 会自动对 URL 进行分析,并提取其中的动态 URL 参数,你可以通过 Express 提供的接口 req.query 来获取 URL 参数的分析结果。
静态资源托管服务器
在 Web 中,静态资源指的是固定的内容,客户端访问该资源时,服务器将直接将该资源返回给客户端。
与此相对的动态资源则是动态的内容,客户端访问该类资源时,服务器将对其进行改动,再将改动后的资源返回给客户端。
public
我们可以在项目根路径中创建 public 文件夹,该文件夹中的资源将被服务器托管,客户端可以对资源进行访问。
为了进行演示,我将在该文件夹中存放 content.txt 文件,该文件中的内容为:
世界上有两种罪,你笑是一种,你不笑是另一种。
使用如下代码实现对 public 文件夹中的内容进行托管。
// 导入 NodeJS 中的内置模块 path 对路径进行拼接
const path = require('path');
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
// 使用 Express 提供的中间件函数 static() 实现
// 静态资源的托管。
app.use(express.static(path.join(__dirname, '../public')))
效果:
在运行该服务器后,访问链接 http://127.0.0.1:8080/content.txt,你将得到如下显示结果。
注:
- express.static() 接收一个实参,用于指定需要被托管的文件夹。
- __dirname 指的是当前文件所在的文件夹。
- 使用 path.join() 函数对路径进行拼接是为了防止发生动态路径拼接问题,如果希望对该问题进行了解,欢迎移步至我的另一篇博客 NodeJS 之 fs 模块(路径动态拼接问题) 。
前缀
如果你希望访问静态资源文件中的资源时,需要添加指定的路径前缀,可以为 app.use() 函数添加指定的路径前缀作为该函数的第一个参数。如下示例我将添加前缀 RedHeart/TwoMoons 。
// 导入 NodeJS 中的内置模块 path 对路径进行拼接
const path = require('path');
// 导入 Express 第三方模块
const express = require('express');
// 创建服务器对象
const app = express();
// 监听本机端口 8080
app.listen(8080, () => {
console.log('【 http://127.0.0.1:8080 】')
})
// 使用 Express 提供的中间件函数 static() 实现
// 静态资源的托管。
app.use('RedHeart/TwoMoons', express.static(path.join(__dirname, '../public')))
效果:
此时如果你访问链接 http://127.0.0.1:8080/RedHeart/TwoMoons/content.txt,将获得 content.txt 文件中的内容。