Express框架的请求处理~非常详细
下面是对Express请求处理的整理，希望可以帮助到有需要的小伙伴~
文章目录
-
- Express请求处理
-
- 构建模块化路由
- GET参数的获取
- POST参数的获取
- app.use()方法
- Express路由参数
- 静态资源的处理
Express请求处理
构建模块化路由
一个网站会需要很多的路由，为了方便可以使用模块化路由
- 创建路由对象
- 将路由和请求路径进行匹配
- 具体处理请求
下面是基础代码：
// 引入express框架
const express = require('express');
// 创建服务器网站
const app = express();
// 创建路由对象 (在js中，方法也是对象) 【将路由和请求路径进行匹配】
const home = express.Router();
// 为路由对象匹配请求路径
app.use('/home',home);
// 创建二级路由（具体的请求处理）
home.get('/index',(req,res) => {
res.send('欢迎来到博客展示界面')
})
// 监听端口
app.listen(3000);
构建模块化路由的实例：
home模块：（新建一个home.js文件）
const express = require('express');
const home = express.Router();
home.get('/index',(req,res) => {
res.send('欢迎来到博客首页页面')
})
// 把home导入模块中
module.exports = home;
admin模块：（新建一个admin.js文件）
const express = require('express');
const admin = express.Router();
admin.get('/index',(req,res) => {
res.send('欢迎来到博客管理页面')
})
// 把home导入模块中
module.exports = admin;
模块化路由：
// 引入express框架
const express = require('express');
// 创建服务器网站
const app = express();
// home 和 admin 就是路由对象
// 导入home路由模块 （home.js中的.js可以省略）
const home = require('./route/home'); // home.js文件的路径
// 导入admin路由模块 （admin.js中的.js可以省略）
const admin = require('./route/admin'); // admin.js文件的路径
app.use('/home',home);
app.use('/admin',admin);
// 监听端口
app.listen(3000);
GET参数的获取
Express框架中使用req.query即可获取GET参数，框架内部会将GET参数转换为对象并返回。
// 引入express框架
const express = require('express');
// 创建服务器网站
const app = express();
// 创建路由 - 接收get请求参数
app.get('/index',(req,res) => {
// 获取get请求参数
res.send(req.query)
})
// 监听端口
app.listen(3000);
POST参数的获取
Express中接收post请求参数需要借助第三方包 body-parser。
下载第三方包：body-parser
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HeOS9Fg6-1609770264403)(express/下载body-parser.png)]
获取post参数的实例代码：
// 引入express框架
const express = require('express');
// 引入获取post请求的第三方包：body-parser
const bodyParser = require('body-parser');
// 创建服务器网站
const app = express();
// 拦截所有请求
// extended: false 方法内部使用querystring模块处理请求参数的格式
// extended: true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({
extended: false}))
app.post('/add',(req,res) => {
// 接受post请求参数
res.send(req.body)
})
// 监听端口
app.listen(3000);
表单请求是post方式，在启动服务器后，写了如下html表单：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post请求title>
head>
<body>
<form action="http://localhost:3000/add" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
form>
body>
html>
运行该html表单，在运行后的网页中输入用户名和密码，点击“提交”后：
app.use()方法
// 引入express框架
const express = require('express');
// 引入获取post请求的第三方包：body-parser
const bodyParser = require('body-parser');
const {
nextTick } = require('process');
// 创建服务器网站
const app = express();
app.use(fn())
function fn() {
return function(req,res,next) {
console.log(req.method);
next();
}
}
app.get('/',(req,res) => {
// 接受post请求参数
res.send('ok')
})
// 监听端口
app.listen(3000);
【命令行工具】中会返回请求方式：GET
使用app.use()方法的好处
-
在调用fn()函数的同时，向fn()函数内部传递一些额外的参数
-
在请求函数内部，可以根据传递的额外参数，该白你请求函数的行为
实例：
// 引入express框架
const express = require('express');
// 引入获取post请求的第三方包：body-parser
const bodyParser = require('body-parser');
const {
nextTick } = require('process');
// 创建服务器网站
const app = express();
app.use(fn({
a:1}))
// obj形参 对应的是 app.use(fn({a:1}))中的fn()函数实参
function fn(obj) {
return function(req,res,next) {
if (obj.a ==1) {
console.log(req.url)
}else {
console.log(req.method);
}
next();
}
}
app.get('/',(req,res) => {
// 接受post请求参数
res.send('ok')
})
// 监听端口
app.listen(3000);
// 在调用fn()函数的同时，向fn()函数内部传递一些额外的参数
// 在请求函数内部，可以根据传递的额外参数，该白你请求函数的行为
在浏览器中访问该页面的网址中刷新，因为实参fn()函数的属性a的属性值为1，所以条件为true
回到【开发者工具】中，会得到 用户访问的url网址
Express路由参数
一个参数：
// 引入express框架
const express = require('express');
// 引入获取post请求的第三方包：body-parser
const bodyParser = require('body-parser');
const {
nextTick } = require('process');
// 创建服务器网站
const app = express();
app.get('/index/:id',(req,res) => {
// :id 表示 占位符
// 接受post请求参数
res.send(req.params) // req.params 获取 请求参数
})
// 注意：在浏览器中访问的时候一定要串参数
// 监听端口
app.listen(3000);
多个参数：
// 引入express框架
const express = require('express');
// 引入获取post请求的第三方包：body-parser
const bodyParser = require('body-parser');
const {
nextTick } = require('process');
// 创建服务器网站
const app = express();
app.get('/index/:id/:name/:age',(req,res) => {
// :id 表示 占位符
// 接受post请求参数
res.send(req.params) // req.params 获取 请求参数
})
// 注意：在浏览器中访问的时候一定要串参数
// 监听端口
app.listen(3000);
静态资源的处理
通过Express内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript 文件等。
app.use(express.static('public')); // public是静态资源目录
-
使用app.use中间件拦截所有的请求
-
使用express.static方法来处理，把静态资源的目录传进去
-
在方法内部会判断客户端发来的请求是否是静态资源请求
-
如果是静态资源：方法内部会直接把静态资源响应给客户端，终止当前这次请求
-
如果不是静态资源：方法内部会调用next()方法，将资源请求交给下一个中间件
-
开启静态资源访问服务后，就可以通过下列请求路径访问静态资源文件夹下面的文件了
比如：
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
实例：
// 引入express框架
const express = require('express');
// 引入路径模块
const path = require('path');
// 创建服务器网站
const app = express();
// 实现静态资源访问功能
// 客户端访问的网址必须有/static 拼接路径public
app.use('/static',express.static(path.join(__dirname,'public')))
// 监听端口
app.listen(3000);
end~