目录
- 1 Node.js是什么
- 2 Express初体验
- 3 Express 路由
- 3.1 什么是路由
- 3.2 路由的使用
- 3.3 获取路由参数
- 4 常见响应设置
- 4.1 express 响应方法
- 4.2 原生响应方法
- 5 express 中间件
- 5.1 中间件作用
- 5.2 中间件类型
- 5.3 全局中间件
- 5.4 路由中间件
- 6 获取请求体数据
- 7 路由模块化
1 Node.js是什么
官方解释为:Node.js是一个开源的,跨平台的 javascript 运行环境
通俗来讲:Node.js就是一款应用程序,是一款软件,它可以运行 javascript
2 Express初体验
Express 是最流行的 Node 框架,是许多其他流行 Node 框架 的底层库
接下来,要使用 express 实现一个效果:当浏览器使用get方法,访问/home时,服务端会返回响应:{data: {name: dddd, age: 18}}
进入编辑器,初始化一个项目
npm init
会生成 package.json 、node_module 等文件
安装 express
npm i express
新建文件: 01_初体验.js
// 1 导入 express
const express = require('express')
// 2 创建一个对象
const app = express()
// 3 创建路由
app.get('/home', (req, res) => {
// 当使用get方法,访问/home时,会触发下面
// req请求报文封装对象 res响应报文封装对象
res.setHeader('content-type', 'text/html;charset=utf-8')
res.end('{data: {name: dddd, age: 18}}') // 做一个响应
})
// 监听端口
app.listen(3000, () => {
console.log('服务已启动,端口3000正在监听....')
})
接下来在命令行中,使用 node 去启动
node .\01_初体验.js
或者可以安装 nodemon 来监控 node.js 源代码的任何变化和自动重启你的服务器(推荐)
npm install -g nodemon
运行:
nodemon .\01_初体验.js
在浏览器中访问:
http://localhost:3000/home
效果:
3 Express 路由
3.1 什么是路由
路由确定了应用程序如何相应客户端对特定端点的请求
3.2 路由的使用
一个路由的组成包含:请求方法、路径、回调函数
express 中使用路由格式如下:
app.<method>(path, callback)
举例:
// get
app.get('/home', (req, res) => {
res.end('hello hello')
})
// post
app.post('/login', (req, res) => {
res.end('login')
})
// 所有请求
app.all('/test', (req, res) => {
res.end('test')
})
3.3 获取路由参数
如何获取如下 URL 的参数:123
http://localhost:3000/123.html
代码如下:
app.get('/:id.html', (req, res) => {
res.setHeader('content-type', 'text/html;charset=utf-8')
console.log('id值', req.params.id)
res.end('HTML') // 做一个响应
})
4 常见响应设置
4.1 express 响应方法
app.get('/test', (req, res) => {
res.status(200) // 设置状态码
res.set('testHeader', '111') // 设置响应头
res.send('响应体') // 设置响应体
})
当使用 express 的 send()
方法返回响应体时,响应头会自动添加:
Content-Type:text/html; charset=utf-8
4.2 原生响应方法
app.get('/test', (req, res) => {
res.statusCode = 200
res.statusMessage = 'test'
res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
res.write('设置响应体')
res.end('设置响应')
})
5 express 中间件
5.1 中间件作用
使用函数封装公共操作,简化代码
5.2 中间件类型
- 全局中间件
- 路由中间件
5.3 全局中间件
每一个请求到达服务端后,都会执行
// 1 声明中间件函数
let recordMiddleware = function(req,res, next) {
// 实现业务代码
console.log('全局中间件')
// .....
// 执行完中间件函数后,若继续执行后续路由中的回调,则调用next
next()
}
// 2 使用中间件函数
app.use(recordMiddleware)
// 路由代码
app.get('/test', (req, res) => {
//.....
})
5.4 路由中间件
在固定路由才会执行的中间件
// 1 声明路由中间件函数
let checkCodeMiddleware = function(req,res, next) {
// 实现业务代码
console.log('test路由中间件')
// .....
// 执行完中间件函数后,若继续执行后续路由中的回调,则调用next
next()
}
// 2 在test路由中使用中间件
app.get('/test', checkCodeMiddleware, (req, res) => {
// ....
})
6 获取请求体数据
express 可以使用 body-parser 包 处理请求体
安装包:
npm i body-parser
以供处理的数据类型分为:
application/x-www-form-urlencoded
格式,使用:bodyParser.urlencoded({extended: false})
application/json
格式,使用:let jsonParser = bodyParser.json()
完整代码:
// 处理 application/x-www-form-urlencoded 格式
let urlParser = bodyParser.urlencoded({extended: false})
// 处理 application/json 格式
let jsonParser = bodyParser.json()
// 在路由中,使用urlParser
// 使用 req.body 打印请求体数据
app.post('/test', urlParser, (req, res) => {
console.log(req.body) // ----打印请求体数据-----
res.statusCode = 200
res.statusMessage = 'test'
res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
res.write('设置响应体')
res.end('设置响应')
})
前端创建表单,提交username数据
<div>
<form action="http://localhost:3000/test" method="post">
用户名: <input type="text" name="username">
<button>登录</button>
</form>
</div>
username输入:ddd,点击登录,控制台会打印出:
[Object: null prototype] { username: 'ddd' }
7 路由模块化
如果将所有的路由都罗列在同一个文件中,代码会变得臃肿
Express中为了解决这个问题,提供了模块化路由。 我们可以根据某种条件将路由进行分类。 将不同的路由放置在不同的模块中。
首先新建 routes/homeRouter.js 文件,声明路由:
// 导入 express
const express = require('express')
// 导入json数据
const dataList = require('../data/data.json')
// 创建路由对象
const router = express.Router()
router.get('/home', (req, res) => {
// 当使用get方法,访问/home时,会触发下面
// req请求报文封装对象 res响应报文封装对象
res.setHeader('content-type', 'text/html;charset=utf-8')
res.end(JSON.stringify(dataList)) // 做一个响应
})
// 暴漏 router
module.exports = router
其中,响应的 json 数据,需要创建 data.json 文件
{
"docker": [
{
"name": "ancker",
"age": "18"
}
],
"snwver": [
{
"name": "laoce",
"age": "28"
}
]
}
将路由 homeRouter.js 导入:
// 导入路由
const homeRouter = require('./routes/homeRouter')
// 使用路由
app.use(homeRouter)
运行node
访问 http://localhost:3000/home
得到返回: