59-前后端项目接口联调

前后端项目接口联调

一般在前后端分离的项目中，后端人员需要提供后台接口，而前端人员提供前端项目（如Vue项目的Vue脚手架项目）

进行联调，都按照接口文档来进行操作项目

对于Vue脚手架来说，版本有时决定地址，就如你设置自动打开浏览器时，地址是0.0.0.0:8080，可以如下操作进行修改

//卸载当前脚手架
npm uninstall -g vue-cli
//安装指定版本脚手架
npm install -g @vue/cli@4.5.15

这样可能就会自动打开了，所以说，有时没有错，但符合的结果不对，可能是版本问题

js进行文件上传：

当使用js时，前台没有表单以及表单提交，或者不想用这个表单，只要js传递数据时，可以使用FormData对象，简称表单数据

FormData的主要用途有两个

将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接

提高工作效率

异步上传文件

创建FormData对象

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//可以通过append()方法来追加数据
formdata.append("name","laotie");
//通过get方法对值进行读取
console.log(formdata.get("name"));//laotie
//通过set方法对值进行设置
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

//data中创建FormData
    //5.创建FormData对象,将图片与表单一同上传
    this.params = new FormData();
//methods添加方法
    //文件上传 
    onchange(file) {
      //判断文件不为空
      if (file != null) {
        //将文件信息 保存到params中 
        this.params.append("file", file.raw, file.name);
     }
   }

前面我说过键值对不是数据，因为键值对使用[]是根据key来的，即使用[]只能获得对应key的值

前端的断点，需要加上debugger，类似于java断点，执行到这里，那么浏览器就会到检查的源代码的地方，进行调试

具体可以自己实验，实际上是浏览器的功能，即是浏览器发现这个代码而进行调试的，所以如果浏览器不进行断点调试

那么这个代码就无作用，与java是有所不同的，前者受浏览器限制，后者只在于自己，打了就可调试

最后使用脚手架时，由于基本上是js的文件的操作，所以查看源代码，基本上没有对应dom元素，只有在检查元素里才可查看的到

对应的参数数据，如data的值可以有多种，实际上前面说过的最后变成键值对中数组不会变成键值对

注意：使用Vue脚手架，若发现没有错误，结果也不对，那么手写一下，可能就会对

前端做的回显，一般是在一个组件里操作第一次回显的数据的

一般后台进行操作equals时，最好忽略大小写，因为前端的传参，可能与你测试的某些参数不一样

如application/json;charset=utf-8，后面的utf-8前端传递的可能是大写的

组件之间是替换的

从这里开始，进行联调

下面的组件还没有在对应环境中操作，所以复制是运行不了的，最后会给出对应代码地址（需要一定的功底部署）

测试的组件：

主组件：

代码地址：

链接：https://pan.baidu.com/s/1Hku35l0bJOMDI7OwQtjCAQ

提取码：alsk