项目实训3——vue前端和springboot后端的连接

  这一周主要完成了vue前端和springboot后端的交互连接，下面是写代码时遇到的难点。

1. 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
      },

2. 在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);
    }

3. controller的注释！
     springboot的注释十分关键，controller层、mapper层、domain层都有相应的注释，如果不加注释，前端和后端可能就无法交互。比如没有controller层的@RestController注释的话，前端传递的参数就无法以正常的格式到达后端，也就无法执行正确的方法。
4. 实体对象的mapper
     我在update数据库中的数据时写的方法有一个实体对象形参，这种参数在mapper中要加上注释@Param(“实体类”)，在mapper.xml文件中的更改的参数要以实体类.属性的格式书写。否则数据不能正常更改。