这一周主要完成了vue前端和springboot后端的交互连接,下面是写代码时遇到的难点。
- axios的get方法和post方法
我们使用axios进行前后端通信,get方法用来获得数据,post方法用来提交数据。springboot的controller层的方法都有一个对应的mapping url,所以前端可以使用axios.get方法,其url参数填写相应后端方法的mapping url,前端的data中定义的tableData接受数据。注意:tableData的格式要与接受的后端数据一致,名称也要一致,否则页面上不会有数据渲染出来。前端通过表单form来向后端提交数据,axios的post方法与get方法的写法略有不同,注意它的data参数。表单项的名称也要与后端对应的实体类的属性名称一致。
//get方法如下所示
getDBList(){
axios.get(`api/findDBList`).then(res=>{
console.log(res.data)
this.tableData=res.data
})
},
//post方法如下所示
handleConfirmEdit(){
this.editForm.id=this.editID
axios({
method: 'post',
url: 'api/updateDB',
data: this.editForm,
}).then(function (res) {
console.log(res)
_this.$notify({
title: '提交成功',
message: '处理结果',
type: 'success'
})
this.getDBList();
})
this.dialogVisible = false
},
- 在axios路径中传多个参数
前端有时需要将获取的某个id值传向后端,此时可以通过路径传输。我们的项目有时需要获取上一个页面的选中id值用于本页面对数据库的操作,不同页面之间的数据使用this.$router.push({ path:’ ', query:{ dbid:id }})来传递。如果需要传递多个数据,则在query中再增加key:value。对axios路径中添加参数的操作如下所示:
//在路径中添加单个参数
handleConfirmDelete(){
// 删除或者编辑相关操作 删除get 编辑post
var dbid=this.deleteID
axios.get(`api/deleteDB/${dbid}`).then((res) => {
if (res.data.state) {
this.$notify({
title: '删除成功',
message: '这是一条删除成功的提示消息',
type: 'success'
});
this.getDBList();
// location.reload(true) //刷新当前页面
} else {
this.$message.error("删除失败!!!");
}
})
this.dialogDelete = false
},
//在路径中添加两个参数
handleConfirm1(){
var cid=this.deleteID
var bid=this.dbid
var id=[cid,bid] //使用数组添加三个参数也是同理
axios.get(`api/deleteChart/${id}`).then((res) => {
if (res.data.state) {
this.$notify({
title: '删除成功',
message: '这是一条删除成功的提示消息',
type: 'success'
});
this.findChartsByDBId(this.dbid)
// location.reload(true) //刷新当前页面
} else {
this.$message.error("删除失败!!!");
}
})
this.dialogDelete = false
},
//后端方法写法
@RequestMapping("/deleteChart/{id}")
public Map<String, Object> deleteChart(@PathVariable int id[]) {
Map<String, Object> map = new HashMap<>();
int info = chartService.deleteChart(id[0],id[1]);
if (info > 0) {
map.put("state", true);
map.put("msg", "删除成功!");
} else {
map.put("state", false);
map.put("msg", "删除失败!");
}
return map;
}
//也可以这样加两个参数
findMetasByDBId(){
var c=this.cid
var d=this.did
var i=[c,d]
axios.get(`api/findMetasByCId/${c}/${d}`).then(res=>{
console.log(res.data)
this.tableData=res.data
})
},
//后端方法写法
@GetMapping("/findMetasByCId/{cid}/{bid}")
public List<Meta> findMetasByCId(@PathVariable int cid,@PathVariable int bid){
return metaService.findMetasByCId(cid,bid);
}
- controller的注释!
springboot的注释十分关键,controller层、mapper层、domain层都有相应的注释,如果不加注释,前端和后端可能就无法交互。比如没有controller层的@RestController注释的话,前端传递的参数就无法以正常的格式到达后端,也就无法执行正确的方法。 - 实体对象的mapper
我在update数据库中的数据时写的方法有一个实体对象形参,这种参数在mapper中要加上注释@Param(“实体类”),在mapper.xml文件中的更改的参数要以实体类.属性的格式书写。否则数据不能正常更改。