Vue+axios+SpringBoot+Spring Data JPA实现增加和修改

一 增加

我的设想是：前端将对象转化成Json字符串，传送给后端，后端接收了Json字符串后再使用Json工具类将其转化成对象。

前端代码：

let newCar = {
              gpsNumber:this.car.gpsNumber,
              carNumber:this.car.carNumber,
              carType:this.car.carType,
              carGroup:this.car.carGroup,
              carDriver:this.car.carDriver,
              carOverspeedSet:this.car.carOverspeedSet,
              carDesc:this.car.carDesc
            }
          
            let config = {
              url: 'http://localhost:8080/car/carAdd',
              method: 'post',
              data: JSON.stringify(newCar),
              timout: 10000,
              headers:{
                "Content-Type":"application/json; charset=UTF-8"
              }
            }

            axios(config)
                .then(res=>{
                 // console.log(response)
                        this.$message({
                          message: '成功添加新车辆',
                          type: 'success'
                        });
                        this.$router.push({path:'/car/car_list'})
                })
                .catch(err=>{
                          console.log(err)
                        })

后端代码：

@PostMapping("/carAdd")
    @CrossOrigin
    public void addCar(@RequestBody String carJson){
        Car car = carService.formCar(carJson);
        carService.saveCar(car);
    }

二 编辑

设想和添加差不多，参考了https://blog.csdn.net/littlexbear/article/details/90695400 这篇博客：
1）前端传递修改后的对象的Json字符串和旧对象的Id。
2）后端接收后，将Json字符串转化成实体类对象，根据旧对象的Id获取旧对象实体类。
3）后端再使用BeanUtils的copyProperties的方法，将新对象中修改后的字段赋值给旧对象。
4）后端保存旧对象。

前端：

 let editCar = {
              carType: this.car.carType,
              carNumber: this.car.carNumber,
              gpsNumber: this.car.gpsNumber,
              carDriver: this.car.carDriver,
              carGroup: this.car.carGroup,
              carDesc: this.car.carDesc,
              carOverspeedSet: this.car.carOverspeedSet,
            }
      
            let config = {
              url: 'http://localhost:8080/car/carEdit/'+this.$route.query.id,
              method: 'post',
              data: JSON.stringify(editCar),
              timout: 10000,
              headers:{
                "Content-Type":"application/json; charset=UTF-8",
                // "Access-Control-Allow-Origin": "*"
              }
            }

            axios(config)
                .then(res=>{
                  console.log("ss")
                  this.$message({
                    message: '更新车辆信息成功',
                    type: 'success'
                  });
                  this.$router.push({path:'/car/car_list'})
                })
                .catch(err=>{
                  console.log(err)
                })

后端：

@PostMapping("/carEdit/{id}")
    //@CrossOrigin(allowCredentials="true")
    @CrossOrigin
    public void editCar(@PathVariable("id") String id,@RequestBody String carJson){
        Car editCar = carService.formEditCar(carJson);
        Car oldCar = carService.findById(id);
        BeanUtils.copyProperties(editCar,oldCar, BeanUtil.getNullPropertyNames(editCar));
        carService.saveCar(oldCar);

服务层代码：

//根据JSON字符串，转化成对象，再配置ID
    @Override
    public Car formCar(String carJson) {
        Car car = JsonUtils.jsonToPojo(carJson,Car.class);
        car.setId(idGenerator.snowflakeId()+"");
        return car;
    }

    //为修改车辆使用，不需要再配置id
    @Override
    public Car formEditCar(String carJson) {
        Car car = JsonUtils.jsonToPojo(carJson,Car.class);
        return car;
    }