springboot+vue的前后端联调实现

1、springboot的后端接口:

(1)post存储接口
@AutoLog(value = "个人档案信息编辑")
@ApiOperation(value = "个人档案信息编辑", notes = "个人档案信息编辑")
@PostMapping(value = "/edit")
public Result<UpdateInformation> edit(@RequestBody UpdateAll updateAll) {

Result<UpdateInformation> result = new Result<UpdateInformation>();

//before和now需要利用object的方式进行转换,因为不确定是哪个具体的类
String before = JSONArray.toJSONString(updateAll.getBefore());
String now = JSONArray.toJSONString(updateAll.getNow());
//直接利用get的方式获得其他信息类
UpdateOthers updateOthers=updateAll.getOthers();
UpdateInformation updateInformation = new UpdateInformation();
(2)get查询接口
@AutoLog(value = "个人档案信息修改通过待办id查询")
@ApiOperation(value = "个人档案信息修改通过待办id查询", notes = "个人档案信息修改通过待办id查询")
@GetMapping(value = "/queryById")
public Result<UpdateBoth> queryById(@RequestParam(name = "id", required = true) String id) {
Result<UpdateBoth> result = new Result<UpdateBoth>();
try{
Map<String, Object> map = iUpdateInformationService.queryById(id);
UpdateBoth updateBoth = JSON.parseObject(JSON.toJSONString(map), UpdateBoth.class);
if (map == null) {
result.error500("个人档案修改数据不存在,请重新确认!");
} else {
String updatetype = (String) map.get("C_UPDATE_OPERATE");

2、vue前端接口函数调用定义
1)post接口定义
// 个人档案信息修改缓存接口(一般在api/manage.js中)
export function JK1(url,parameter){
  return axios({
    url: url,
    method: "post",
    data: parameter      // 传参
  })
}
(2)get接口
export function getUpdate(url,parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}
3、vue页面中前后端联通接口的方法调用
(1)post接口
//post方法的使用方法
data:
return(){
 url1:"update/add", 
 data1:{

"before":{
"country": "中国",
"nation": "汉族",
"csplace": "北京"
},
"now":{
"country": "中国",
"nation": "汉族",
"csplace": "北京"
},"others":
{
"cUpdateOperate": "2",
"cUpdateType": "0",
"cUpdateOperateId": "yanjiangyi"
} }

}
methods:
      go200(){
        console.log(this.data1)
        // let S=JSON.stringify(this.data1)
        JK1(this.url1,this.data1).then((res) => {
          if (res.success) {
            this.compOptions = res.result
            console.log(res)
            Toast.success("加载成功")
          } else {
            Toast.fail("加载失败")
          }
        })
      }
(2)get接口的调用
//get 接口的使用方法
data:
return(){
 url2:"update/queryById",
data2:"a3a1ba3d-8aa5-4748-98a5-e823baa9d9cf"    //主键id}
methods:
      go100(){
          getUpdate(this.url2,{id:this.data2}).then((res) => {
          if (res.success) {
            this.json= res.result
            console.log(res.result)
            console.log(this.json.cupdateBefore)
            this.listbefore=res.result.cupdateBefore
            console.log(this.listbefore[0])
            for (var i=0; i<this.listbefore.length;i++){
              console.log(this.listbefore[i])
            }                                // vue组件中列表的遍历输出

            Toast.success("加载成功")
          } else {
            Toast.fail("加载失败")
          }
        })
      }
原文地址:https://www.cnblogs.com/Yanjy-OnlyOne/p/15269160.html