随笔：前后端交互

在数据交互中，前端会发起ajax请求，请求方式如下示例：

$.ajax({
type:'post',  //  请求方式类型
url:'http://127.0.0.1:8080/user',// 该请求对应的api接口地址
data:{name:'zs'},  //提交的数据
success:function(res){  // 请求的回调函数
console.log(res)
}
})

后端api会对前端的请求产生如下响应：

const express = require('express')  //导入express服务器模块
const mysql = require('mysql')  //导入mysql数据库模块
const cors = require('cors')  //导入跨域模块
const app = express()  // 实例化一个服务器对象
const db = mysql.createPool({  //创建一个数据库连接实例对象
  host: '127.0.0.1',//连接数据库的地址
  user: 'root', // 连接数据库的登录账户名
  password: 'admin123',  //连接数据库的密码
  database: 'my_db_01',  //连接数据库的名称
})
app.use(express.urlencoded({extended:false})) // 挂载数据转码中间件
app.use(cors())  // 挂载跨域中间件
app.post('/user',(req,res)=>{ // 对api接口为/user的post请求进行监听(可对比js的点击事件监听)
db.query('update user set ? where id = ?',[req.body,req.body.id),(err,data)=>{  //以拼接的方式将字段填入查询语句的？占位符中，多个字段需要按顺序写在一个数组中，客户端发送的数据会挂载在req的body属性中，可以通过req.body获取到，另外req.query获取到的是get请求的请求字段
if(err){return res.send({  //如果数据库连接失败，需要提示用户
status:1, // 0和1并没有具体的要求，只是个人设定的代表成功或者失败
message:err.message
})}
if(data.affectedRows != 1){
res.send({  //如果操数据库时，数据库参数的返回受影响值不为1，表示操作失败，需要提示用户
status:1,
message:'请求失败'
})
}
res.send({ //经过排除一切可能的失败后，在此进行顺利完成的服务端响应值，发送给客户端
status:0,
message:'请求成功'
})
})
})
app.listen(8080,()=>{ //启动服务器
console.log('启动成功')
})
//至此，一个简易的服务器api接口算是编写完毕了，其中其实有很多地方可以改进和优化，还有一些比如用于格式验证的局部中间件也没有使用到，以及模块化处理等等，但是作为说明前后端交互原理的文章，也算是足够了

总结：经过学习这部分的知识，我发现原来post请求和get请求并不一定就是代表了向服务器写入数据和向服务器请求获取数据，它具体的作用是根据里面编写的操作方法决定的，而使用二者的决定方式是需要向服务器提交怎样的数据，比如说是req.body的数据还是req.query的请求字段。
客户端将数据提交给服务器，服务器经过处理后，通过res.send()将响应值返回给客户端，客户端通过success函数res参数进行接收，并返回

另附：
1.对于重复量高的res.send()部分，可以在用于最终集成运行的js模块中(暂称为app.js)挂载一个统一处理的中间件，代码如下：

app.use(function (req, res, next) {  //普通中间件特有的next回调函数，目的是为了实现数据流转到下一个中间件或者路由中
  res.cc = function (err, status = 1) {// status = 0 为成功； status = 1 为失败； 默认将 status 的值设置为 1，方便处理失败的情况
    res.send({
      // 状态
      status,
      // 状态描述，判断 err 是 错误对象 还是 字符串
      message: err instanceof Error ? err.message : err,
    })
  }
  next()
})

说明：此方式是给res挂载了一个名为cc的方法，里面的形参err代表res.send()返回的message内容，status表示状态码，，使用方法主要有如下三种：
（1）res.send(err),在if(err){}这个判断数据库是否连接成功的语句中，err传入的是一个错误对象，所以通过res.cc()输出的是status:1,message:err.message
（2）res.send(‘发送失败’),在if(data.affectedRows !=1){}语句中，输出的是status:1,message:‘发送失败’
（3）res.send(‘处理成功’,0),在最终成功处理完成的res.cc()中，输出为status:0,message:‘发送成功’
通过这种方式来使路由处理函数的代码更为简化

2.token的使用
（1）在登录模块的js文件中，写入如下代码：

const jwt = require('jsonwebtoken')// 导入jsonwebtoken包,来生成 Token 字符串
const config = require('../config') //导入专门用于向外共享加密和解析还原token密钥的配置文件
//其内代码就一行:module.exports = {jwtSecretKey:'aaa'}
const tokenStr = jwt.sign(user, config.jwtSecretKey, { //生成token字符串
  expiresIn: '10h', // token 有效期为 10 个小时
})
res.send({  // 此处的代码不可以用res.cc()替代，因为多了个token参数
  status: 0,
  message: '登录成功！',
  token: 'Bearer ' + tokenStr, // 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
})
///以上均为登录模块js文件的代码

（2）在集成模块app.js中，需要挂载相应的解析中间件，该中间件需挂载在注册路由之前
代码如下：

const config = require('./config')// 导入配置文件
const expressJWT = require('express-jwt')// 解析 token 的中间件
app.use(expressJWT({ secret: config.jwtSecretKey }).unless({ path: [/^\/api\//] }))// 使用 .unless({ path: [/^\/api\//] }) 指定哪些接口不需要进行 Token 的身份认证

（3）在app.js的错误级别中间件里面，需要捕获token认证失败的错误，避免认证失败导致崩溃

app.use(function (err, req, res, next) {// 错误中间件
  // 此处省略其它错误捕获的代码
  if (err.name === 'UnauthorizedError') return res.cc('身份认证失败！') // 捕获身份认证失败的错误
})

3.在实际开发中，还包括用于格式验证的局部中间件模块，以及用于将用户密码转换为加密状态之后的乱码存入数据库的bcryptjs模块，此处就不一一列举了