Springboot+React前后端接口调用规范设计

这段时间一直在研究前后端接口调用的规范设计，结合到自己研究的项目上面去总结出一套不错的、常规的、便于理解的方法，下面分享给大家。

首先来看后端，我这里使用Springboot接口文档里面规范的方法有：GetMapping、PostMapping、DeleteMapping。后端就是常规的接口定义，主要区分一下数据是前端传递还是后端从数据库里面拿的区别，下面附上代码大家看一下区别就行。

@GetMapping("/selectAllTargetShip")
    public ResultResponse<List<Targetship>> selectAllTargetShip() {
        log.info("查询所有的目标舰船数据");
        return ResultResponse.success(targetshipService.selectAllTargetship());
    }//这个接口是直接从数据库里面查询数据，以json类型的数据集传给前端，故用GetMappering,字面意思可以理解为从数据库里面拿数据。


@PostMapping("/insertTargetShip")
    public ResultResponse<Integer> insertTargetShip(@RequestBody Targetship targetship) {
        if (!targetship.equals(null)) {
            log.info("插入targetship数据");
            return ResultResponse.success(targetshipService.insertTargetship(targetship));
        } else {
            log.warn("插入的target数据为空");
            throw new RuntimeException("插入的targetship数据为空");
        }
    }//这个接口包含RequestBody也就是前端传来的数据，这里进行json数据类型转换，由于数据是从前端传过来的，故PostMapping字面意思Post可以理解为传递也就是从前端传递数据到后端。


@DeleteMapping("/deleteTargetShip/{id}")
    public ResultResponse<Integer> deleteTargetShip(@PathVariable Integer id) {
        log.info("根据id删除targetship数据");
        return ResultResponse.success(targetshipService.deleteTargetship(id));
    }//这个接口可以根据字面意思理解，根据任务ID删除某条数据，DeleteMapping就成了删除接口专用的标签。

然后看一下前端，我使用的框架是React，具体版本号我会附张图片，由于这次我使用的react框架比较新，接口调用代码简单的几行就能实现，下面我来结合具体的代码讲一讲。

//详细信息
export function infoUuvform(page?): Promise<{ data; total?: number }> {
  return request('http://localhost:8080/uuv/selectAllUuv', {
    method: 'GET',
    query: { page: page },
  });
}//主要使用的是request方法实现，url可以直接访问本地的项目，有趣的是Promise这个方法直接把数据分页的功能给做了。

//新建
export function addUuvform(data: UuvInfo) {
  return request(`http://localhost:8080/uuv/insertUuv`, {
    method: 'POST',
    content: data,
  });
}//主要是给后端传数据，没什么好讲的。

//修改
export function updateUuvform(data: UuvInfo, id?: number) {
  return request(`http://localhost:8080/uuv/updateUuv`, {
    method: 'POST',
    content: data,
  });
}//同上,唯一的区别就是修改数据需要知道修改哪一条，id这个字段的值是不要允许修改的。

//删除
export function deleteUuvtform(uuvId?: number) {
  return request(`http://localhost:8080/uuv/deleteUuvById/${uuvId}`, {
    method: 'DELETE',
  });
}//主要是删除这个接口前后端都有唯一的方法来表示，很有趣，method方法都是区别对待的，排面拉满。

最后我想说的是我这种设计的方法只是代表少数派，比较常规的还是ajax、fetch方法，我这边只是封装了一下，仅供大家参考。