前后端分离后,即使前后端相互不交流怎么方便交互呢？

前后端分离后,即使前后端相互不交流,不了解怎么方便交互呢？

这里就需要一些规范了，包括统一的接口，统一的javabean等等，这些 都需要公司的架构师设计，如下我介绍一种公司常用的方式(重要)！！

统一结果类
下面用到了vue，ElementUI，Spring，Springmvc，mybatis，Restful风格

//通用返回结果，服务端响应的数据最终都会封装成此对象
//导入统一结果的类
@Data
public class ResultInfo implements Serializable {
    private Integer code; //编码：1成功，0和其它数字为失败
    private String msg; //错误信息
    private Object data; //数据

    //成功结果
    public static ResultInfo success(Object object) {
        ResultInfo resultInfo = new ResultInfo();
        resultInfo.data = object;
        resultInfo.code = 1;
        return resultInfo;
    }

    //失败结果
    public static ResultInfo error(String msg) {
        ResultInfo resultInfo = new ResultInfo();
        resultInfo.msg = msg;
        resultInfo.code = 0;
        return resultInfo;
    }
}

使用方法如下：

例如前端给后端发来一个ajax请求

        //统一的方法接口
       //根据number查询学生信息  /student/001
            findByNumber(number) {
                axios.get('/student/' + number).then(resp => {
                   //此处先省略！看后面
                })
            },

后端只需知道发来的url，通过如下代码查询完结果后,返回一个json格式

//这里使用了restful编程风格，这是公司的主流！！
@GetMapping("/student/{number}")
    public ResultInfo findByNumber(@PathVariable("number") String number){
        Student student = studentService.findByNumber(number);
        return ResultInfo.success(student);
    }
//JSON数据格式：
//{code: 1, msg: null, data: {number: "hm003", name: "王五", birthday: "1985-06-19", address: "上海"}}

那么前端可以不用管后端发送的啥，只需要看一下data，如果失败只需要看一下msg，(code=1成功，code=0失败)

student: {};   
findByNumber(number) {
                axios.get('/student/' + number).then(resp => {
                    if (resp.data.code == "1") {
                        this.student = resp.data.data;
                    }
                })
            }

这样是前后端统一规范，即使前端看不见后端的代码，后端看不见前端的代码也可以完成交互,非常方便