springboot 前后端分离入参规范

springboot 前后端分离正确入参规范

一、前言

本编将重点讲解，在实战项目开发过程中，我们的参数作为前端接口将如何入参，后端在使用springboot框架的过程中，如何编写接口才能让联调比较顺畅
前端源码地址：https://gitee.com/wanyushu/chat-ai.git
后端源码地址：https://gitee.com/wanyushu/springboot-demo.git

二、案例讲解

这里重点讲解一下几个案例的问题：

案例一

post请求后端

    @PostMapping("save")
    public RestResult save(@RequestBody QuestionGroup questionGroup){
        return RestResult.ok();
    }

前端请求头

{'Content-Type': 'application/x-www-form-urlencoded'}

postman请求

控制台打印截图

此处前端不可取，往往在请后端分离的开发过程中，在请求保存数据信息的时候，为了保证一般的安全性，我们需要对数据进行body传参，那么前端应该采用一下：

 {'Content-Type': 'application/json'}

修改后截图

案例二

post请求后端

    @PostMapping("save")
    public RestResult save(QuestionGroup questionGroup){
        return RestResult.ok();
    }

前端请求头

 {'Content-Type': 'application/json'}

控制台debbug截图

此处前端采用的是body传参没问题，问题在后端进行保存数据的时候采用post请求没问题，关键是忘记加 注解@RequestBody，如案例一

案例三

get请求后端

    @ApiOperation(value = "用户提问接口")
    @GetMapping("ask")
    public RestResult ask(@RequestBody UserInfo userInfo){

        return RestResult.ok();
    }

前端请求头

 {'Content-Type': 'application/json'}

此处前端进行保存数据操作用body传参没问题，问题在后端在保存入参的过程中，采用了get请求，这个不符合restful规范，后端应该用Post请求

    @ApiOperation(value = "用户提问接口")
    @PostMapping("ask")
    public RestResult ask(@RequestBody UserInfo userInfo){

        return RestResult.ok();
    }

案例四

后端：

@RequestMapping("demo")
@Controller
public class DemoController {

    @GetMapping("info")
    public RestResult info(@RequestParam("userId")Integer userId){
        
        return RestResult.ok();
    }
}

前端：

export function getInfo (data) {
    return request({
        url: `/demo/info/${data}`,
        method: Method.POST,
        needToken: true,
        headers: {'Content-Type':  'application/x-www-form-urlencoded'},
        data
    });
}

postman截图，返回路径404

此处理前端用get请求并且将数据data作为请求的子路径，后端用@Controller注解应再添加 @ResponseBody或直接@RestController,前后端正确写法

@RequestMapping("demo")
@ResponseBody
@Controller
public class DemoController {

    @GetMapping("info")
    public RestResult info(@RequestParam("userId")Integer userId){

        return RestResult.ok();
    }
}

改后请求

三、总结

1、保存数据，后端应该用@RequestBody接收，前端应该用 请求头 application/json

2、请求获取数据，参数不多的情况下，后端应该设置为Get请求，前端可以基于 application/x-www-form-urlencoded 入参

本编就为大家介绍到这里，如果大佬们有更好的建议，请不要忘记帮忙留言，另外记得帮忙点赞收藏，关注哦

前端源码地址：https://gitee.com/wanyushu/chat-ai.git
后端源码地址：https://gitee.com/wanyushu/springboot-demo.git
另外推荐一个打造个人ip神器网站：http://www.softworld.vip