后端返回的数据（规范写法）

then的标准写法

 //获取分机监控列表
    getExtensionMonitorList() {
      apiExtensionMonitor().then((res) => {
        if (res && res?.data?.code == 200) {
          this.tatal = res.data.data.length;
          this.option.graphic[0].style.text = this.tatal;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

然后api接口（如果有返回的对象就写返回的对象）.then（）=>{

if（res.code // res.data= 200 ）{

//以下就是对其进行的是赋值操作

this.（上面对应的是data数据中的变量）= res.data.data.length

}else{

// 错误提示的一个消息

this.$message.errror(res.msg)

}

}

2.通过network观看接口是否调通了没有

getNoticeList() {

api

.APIannouncementManageQuery({

})

.then(({ data: res }) => {

if (res.code == 0) {

this.noticeList = res.data.records.splice(0, 10);

} else {

this.$message.error(res.message);

}

});

},

封装的api名字是APIannouncementManageQuery，然后就去工作台找query

3.第三种办法就是进行打印，一般更改的都是data里面的数据，找到对应的字段再对其进行渲染

后端向前端发送请求的时候有两个请求

Bs架构和Cs架构

一个是数据的请求，

另一个是响应数据的请求，

前端最需要关注的就是获取请求参数，以及获取响应的数据

• 请求
• 响应
• 分层解耦

请求（前后端的联动以及怎样去创建和保存数据文件）

1. postman
2. 简单参数
3. 实体参数
4. 数组集合参数
5. 日期参数
6. josn参数
7. 路径参数

postman

测试APi 请求的软件postman,然后根据api延伸出来了apipost,和apifox

这个主要是为了让后端的人员进行测试的时候使用，一般前端接口都是get类型的，但是遇到了post的类型的话没办法进行测试直能借助软件进行测试，

简单参数

这个是后端向前端发过来的一个路径，

然后前端的地址会接收到两个参数，

然后当前端有name和age这两个参数，点击发送也就是send，然后控制台就会打印出ok

后端定义了一个变量为username，但是前端传过来的是name这个时候就会出传出一个

null也就是前后端的命名要一致

小节

实体参数

前端传了几个请求参数，我们就需要声名多少个形参来接受，如果这个前端传输的字段过多没然后这个就需要封装一个方法来封装这些参数了，这个里面传的第二个user传输过来的参数，第一个只是定义的名称，

这个就是user下多了一个address，然后address下面又有两个参数，这个就是需要一步一步的封装了，

这个是前端传递的参数

小结

数组集合参数

数组集合的使用场景就是form表单，在html当中，有一个表单是可以支持多选的那么这个就是checkbox复选框，这个就是一个key，多个value

当提交的时候也是逐个进行传递，如果还有值就是以此类推

后端的接收方式，要么采用的数组的方式，要么就是采用的是集合的方式，这个的数组名就是hobb这个是三个

使用数组的方式来进行封装这个hobby，这个hobby是跟这个对应着的

这个是采用的是集合方式，这个集合的变量名是hobby就是第一个

小节

日期参数

例如，入职的日期，用户的生日，操作的日期，

这个方法的形参也要与请求的参数保持一致

json参数

前后端异步交互的时候使用的是非常多的，

1. 在posman在发送请求的时候是如何传递josn的参数
2. 在服务端controller当中怎样接收josn格式的

前端的这个要与后端的请求体保持一致

路径参数

这个path的路径后面的1就是我们的请求参数，同时也是请求路径的一部分，所以就称之为这种是路径的请求参数，

以前的这种就是写死的方法就是，但是现在这个不能写死了因为就是如果你这个path的路径有可能是1有肯能是100，

所以这个路劲是需要是动态的参数，后面是一个大括号，大括号后面是一个变量，这个代表的不是固定值，而是一个路径参数，路径的参数名就叫id，下面对应的生成一个一个形参也需要有这个id，就是需要吧ptth路径里面的id绑定给pathVariable里面的id

路径参数是否能传递多个呢，答案是能，就是在路径的后面写/然后传输第二个参数就可以了，上面于下面的参数名记得保持一致，否则不会成功的

小结

响应数据

这个是展示的客户端

为了方便管理于优化，后端返回给前端的内容都是实体对象result

主要是在右边，返回给前端三个的三个属性，一个是code，一个是错误的提示消息，然后还有就是返回的数据

，code就是响应码，如果code等于1代表成功，0就是代表失败，string就是一个字符串的提示信息，

第三个就是返回数据，他的类型是object

然后前端根据这一种格式进行解析，

小节

返回前端的都是一个josn的格式

案例的实战

前端页面内的储存的位置

一般都是存储在static这个目录下的是

首先就是get后面这个就是获取的路径，然后后面走的是一个承诺，后面的res是函数里面的形参，然后res.data.code====1的话就是进行数据的赋值，这个tableData就是数组里面的内容，然后这个res.data.data就是以下部分的值

然后进行数据的绑定，使用的是：data=tableData（绑定给el-table）

然后el-tabel-column使用pro绑定的数据