Express框架---中间件
使用中间件
Express是一个自身功能极简，完全是路由和中间件构成一个web开发框架：从本质上来说，一个Express应用就是在调用各种中间件。
中间件是可以访问请求对象 （req），响应对象（res）以及next应用程序请求-响应周期中的函数。
中间件就是在请求后，响应前要执行的函数，中间件就是函数使用app.use() 方法，可以给express应用，添加任意中间件功能函数。
中间件分类
-
内置中间件
-
自定义中间件
-
错误处理中间件
-
第三方中间件
1.内置中间件
从版本4.x开始，Express不再依赖于Connect。之前包含在Express中的中间件功能现在位于单独的模块中; 查看 中间件功能列表。
Express具有以下内置中间件功能：
express.static提供静态资源，如HTML文件，图像等。express.json使用JSON有效负载解析传入的请求。注意：适用于Express 4.16.0+express.urlencoded用URL编码的有效负载解析传入的请求。 注意：适用于Express 4.16.0+
1. express.static()
指定一个目录为静态资源目录
客户端可以直接访问静态资源目录中的文件(目录暴露出来)
代码示例：
app.use(express.static(path.join(__dirname,"public")))2. express.json()
解析post方式提交的application/json格式的数据
代码示例：
app.use(express.json())3. express.urlencoded()
解析post方式提交的application/x-www-form-urlencoded 格式的数据
代码示例：
app.use(express.urlencoded({extended:false}))2.自定义中间件
根据需求自己定义中间件
代码示例：
//自定义中间件
app.use(function (req, res, next) {
console.log(Date.now() + ':我是中间环节....');
next();
})
//跨域
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");//解决跨域
next() //转发请求
})
//调用postData函数，会得到一个函数
let postData = function () {
return function (req, res, next) {
let arr = []
req.on('data', chunk => {
arr.push(chunk)
})
req.on("end", () => {
// console.log(Buffer.concat(arr).toString());
req.body = Buffer.concat(arr).toString();
next();
})
}
}
//自定义中间件 ---->取出post参数
app.use(postData())3.错误处理中间件
错误处理中间件总是需要
四个参数。您必须提供四个参数以将其标识为错误处理中间件函数。即使您不需要使用该next对象，也必须指定它以保持签名。否则，该next对象将被解释为常规中间件，并且将无法处理错误。
以与其他中间件函数相同的方式定义错误处理中间件函数，除了四个参数而不是三个，特别是签名(err, req, res, next)）：
注意：错误处理中间件，一般出现在代码的下面
//错误处理中间件
app.use(function(req,res){
res.send({
code:500,
msg:"地址错误，请检查后重新访问"
})
})4.第三方中间件
使用第三方中间件为
Express应用程序添加功能。
安装Node.js模块以获得所需的功能，然后在应用程序级别或路由器级别将其加载到您的应用程序中。
示例：
1. serve-favicon
可以设置前端页面访问时的图标
安装：
npm install server-favicon
引入：
const favicon=require("serve-favicon")代码示例：
app.use(favicon(path.join(__dirname,"favicon.ico")))2. svg-captcha
是一个可以生成验证码的第三方中间件
安装：
npm install svg-captcha引入：
//导入验证码生成中间件
const svgCaptcha= require("svg-captcha")代码示例：
//生成验证码
router.get('/code',(req,res)=>{
//创建验证码对象
// const captcha= svgCaptcha.create();
const captcha= svgCaptcha.create({
size:5, //验证码字符个数
ignoreChars:"0oi1l",//忽略字符
noise:5,//干扰线
background:"#eeeeee",
color:true,//字符是否有颜色
});
console.log(captcha.text);
res.type("svg");//设置媒体类型(MIME)
res.send(captcha.data);//将svg格式的图片响应给前端
})3. formidable
文件上传
安装：
npm install formidable引入：
const formidable=require(“formidable”)代码示例：
服务器端代码：
//文件上传
app.post("/upload", (req, res) => {
const fd = formidable({//配置项
// encoding:""// 编码
// uploadDir:"",//上传文件保存目录
//filename:""
uploadDir: path.join(__dirname, "temp")
});
//解析文件----接收文件
fd.parse(req, function (err, fields, files) {
if (err) {
res.send("上传失败：" + err)
return;
}
//上传成功
// console.log("fields:", fields);//字段 { usernmae: '李四' }
// console.log("files:", files);//文件信息
//将缓存文件，处理为正常文件
//1.取后缀名
let extName = path.extname(files.myfile.originalFilename) //从文件的默认名称中，取出后缀名 xx.jpg---> .jpg
//2,生成新文件
let oldPath = files.myfile.filepath;//旧路径
let newPath = oldPath + extName//新路径
fs.renameSync(oldPath, newPath)
res.send("上传成功")
})
});前端代码：
表单格式提交
补充
前后端数据交互总结
| 请求方法 | 编码格式 | 前端要传输的数据格式 | 后端如何获取 | 应用场景 |
|---|---|---|---|---|
| GET | url地址后面（querystring） | url?key1=value1&key2=value2 | 不需要中间件:req.query | 获取数据 |
| POST | applicaion/x-www-form-urlencoded | form-data: key1=value1&key2=value2 | express.urlencoded( { extend:true } ) | 提交数据 |
| POST | applicaion/json（只能通过ajax） | request-payload: '{ "key1":"value1","key2":"value2" }' | express.json() | |
| POST | mutilpart/form-data（可以使用表单） | 文件流 | 文件上传 | |
| DELETE | 同post | 删除数据 | ||
| PUT | 同post | 更新数据 |