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;
    }