IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 随笔:前后端交互 -> 正文阅读

[JavaScript知识库]随笔:前后端交互

在数据交互中,前端会发起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模块,此处就不一一列举了

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-24 07:51:19  更:2021-11-24 07:53:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 5:27:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码