一、初识 Express
1. 什么是Express
官方给出的概念: Express是 基于 Node.js 平台,快速、开发、极简的 Web 开发框架。
通俗的理解: Express 的作用 和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器。
Express 的本质: 就是一个 npm 上的第三方,提供了快速创建 Web 服务器的便捷方法。
Express的中文官网:www.expressjs.com.cn/starter/ins…
2. 进一步理解 Express
思考: 不使用 Express 能否创建 Web 服务器 ?
答案: 能,使用 Node.js 提供的 原生 http 模块即可
思考: 有了 http 模块,为啥还要用 Express ?
答案: http 内置模块用起来复杂,开发效率低。 Express 是基于 内置的 http 模块进一步封装出来的,能提高开发效率。
思考: http 内置模块 与 Express 是什么关系?
答案: 类似于浏览器中的 Web API 和 jQuery 的关系,后者是基于前者进一步封装出来的。
3. Express 能做什么
对于前端人来说,最常见的 2 种服务器,分别是:
Web 网站服务器:专门对外提供 Web 网页资源的服务器API 接口服务器: 专门对外提供 API 接口的服务器
使用 Express, 可以方便、快捷的创建 Web 网站的服务器 或 API 接口服务器。
二、Express 的基本使用
1. 安装 Express
在项目所处的目录中,运行如下的终端命令,即可将 Express 安装到项目中使用:
npm i express@4.17.1
2. 使用 Express 创建服务器
// 导入 express
const express = require('express');
// 创建服务器
const app = express()
// 启动服务器
app.listen(80, ()=> {
console.log('runing in http://127.0.0.1')
})
3. Express 监听 GET 、POST 请求
通过
app.get()方法,可以监听客户端的 GET 请求
通过app.post()方法,可以监听客户端的 POST 请求参数1:客户端请求的 URL 地址
** 参数2**:请求对应的处理函数,req 请求对象; res: 响应对象。通过
res.send() 方法,可以把处理好的内容,发送给客户端
// 导入 express
const express = require('express');
// 创建服务器
const app = express()
// 调用 get 请求
app.get('/user', (req, res)=> {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
res.send({'name':'xxl', age: 18})
})
// 调用 post 请求
app.post('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
res.send('请求成功')
})
// 启动服务器
app.listen(80, ()=> {
console.log('runing in http://127.0.0.1')
})
4. 获取 uRL 中携带的查询参数
通过 req.query 对象,可以访问到客户端通过 查询字符串 的形式,发送到服务器的参数:
注意:req.query 默认是一个 空对象
// 导入 express
const express = require('express');
// 创建服务器
const app = express()
// 获取 url 中携带的查询参数
app.get('/', (req, res) => {
let query = req.query;
console.log(query)
res.send(query)
})
// 启动服务器
app.listen(80, ()=> {
console.log('runing in http://127.0.0.1')
})
5. 获取 URL 中的 动态参数
通过 req.params 对象,可以访问到 URL 中, 通过 【冒号】 :匹配到 的 动态参数
注意:req.parmas 默认是一个空对象
// 导入 express
const express = require('express');
// 创建服务器
const app = express()
// url 地址中,可以通过 :参数名 的形式,匹配动态参数值
app.get('/user/:id/:name', (req, res) => {
let paramsObj = req.params;
console.log(paramsObj, 'paramsObj')
res.send(paramsObj)
})
// 启动服务器
app.listen(80, ()=> {
console.log('runing in http://127.0.0.1')
})
6. Express.static() 托管静态资源
express 提供了一个非常好用的函数,叫做 express.static(),通过它, 可以非常方便的创建一个 静态资源服务器.
例如,通过如下代码就可以把 static 目录下的图片,CSS 文件、JS 文件 对外开放访问了:
const express = require('express');
const app = express();
// 调用 express.static() 方法,快速对外提供静态资源
app.use(express.static('./static'))
app.listen(80, () => {
console.log(`runing in http://127.0.0.1`)
})
现在,就可以访问 static 目录下中的所有文件了
注意: Express 在 指定的 静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在 URL 中。
7. Express 托管多个静态资源目录
如果要托管多个静态资源目录,请多次调用 express.static()函数:
访问静态资源文件时,express.static() 函数会根据目录的顺序查找所需的文件\
例如:要访问 http://127.0.0.1/index.html, 按照下面的写法,先从 file 目录中查找 index.html, 如果没找到去 static 目录中查看。
// 调用 express.static() 方法,快速对外提供静态资源
app.use(express.static('./file'))
app.use(express.static('./static'))
8. 托管静态资源-挂载路径前缀
如果希望在托管的 静态资源访问路径 之前,挂载路径前缀,可以使用如下的方法:
app.use('/file',express.static('./file'))
这样,就可以通过带有 /file 前缘地址来访问 file 目录中的文件了:
四、nodemon
1. 为什么要使用 nodemon
在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要手动频繁的重启服务才会生效。这时我们可以下载 nodemon , 它 能够监听项目文件的变动,当代码被修改后,会 自动在我们重启项目。
2. 安装 和使用 nodemon
安装 :
npm i nodemon -g
在终端使用:用 nodemon 替换 node
nodemon .\index.js
五、express 中的路由
1. 路由的概念
什么是路由,广义上来讲,路由就是映射关系。
2. 现实生活中的路由
3. express 中路由的概念
在 Express 中,路由指的是 客户端的请求 与 服务器处理函数 之间的映射关系
Express 中的路由分 3 部分组成, 分别是 请求的类型、请求的 URL地址、处理函数,格式如下
app.METHOD(PAH, HANDLER)
## 例如如:
app.get('/user', (req, res)=> {
})
app.post('/user', (req, res)=> {
})
4. Express 路由的匹配过程
每当一个请求到达服务器之后 ,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。
在匹配时,会按钮路由的顺序进行匹配,如果** 请求类型** 和 请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理。
5. Express 路由的使用
在 Express 中使用路由最简单的方式,就是把路由挂载到 app 上,示例代码如下:
// 导入 express
const express = require('express');
// 创建服务器
const app = express()
// 挂载路由
app.get('/user', (req, res)=> {res.send('get 请求')})
app.post('/user', (req, res)=> {res.send('post 请求')})
// 启动服务器
app.listen(80, ()=> {
console.log('runing in http://127.0.0.1')
})
6. Express 模块化路由
为了 方便对路由进行模块化的管理, Express 不建议将路由直接挂载到 app 上,而是 推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下:
- 创建路由模块对应的 .js 文件
- 调用
express.Router()函数创建路由对象 - 向路由对象上挂载具体的路由
- 使用
module.exports向外共享路由对象 - 使用
app.use()函数注册路由模块
示例目录如下:router.js 为 路由模块的文件, index.js 是引入路由模块的文件
a. 创建路由模块, 在 router.js 里
# router.js
const express = require('express')
// 调用 express.Router() 方法创建路由对象
const router = express.Router()
router.get('/user/list', (req, res) => {
res.send('get request')
})
router.post('/user/add', (req, res) => {
res.send('post request')
})
module.exports = router;
b. 导入路由模块并注册
const express = require('express');
const app = express()
// 导入路由模块
const userRouter = require('./router')
// 注册路由
app.use(userRouter)
// 给路由注册,并添加前缀
app.use('/api', userRouter)
app.listen(80, () => {
console.log('running in http://127.0.0.1')
})
注意: app.use() 函数的作用,就是来注册全局中间介
7. 为路由模块添加前缀
类似于托管静态资源时,为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式也同样:
// 1. 导入路由模块
const userRouter = require('./router')
// 2. 使用 app.use() 注册路由模块,并添加统一的访问前缀 /api
app.use('/api', userRouter)