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("加载失败")
}
})
}
