Vue的Post和Get请求传参方式

Get和Post方法的区别，选用哪个

• GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以？分割URL和传输数据，参数之间以&相连。如果数据是英文字母或数字，则原样发送；如果是空格，转换为+；如果是中文或其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII码值。
  POST把提交的数据放置在HTTP包的包体中。

• POST的安全性要比GET的安全性高。比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为：(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码。

Post方法

请求带参数时直接大括号加在url后面，用键值对的形式，发送给后端的是json对象。后端拿到json对象，并进行解析。
vue前端

this.$http.post('http://localhost:8080/fragment/calculate', window.JSON.stringify({
        fragmentInfo: this.form
      }), { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })

后端

@ApiOperation(value = "")
    @PostMapping("calculate")
    @ResponseBody
    public CommonResult<Fragment> calculate(@RequestBody JSONObject jsonObject) throws IOException {
        Fragment s =  fragmentService.calculateFrag(jsonObject);
        return CommonResult.success(s);
    }

后端使用@RequestBody JSONObject jsonObject直接获取传来的json对象，注意传来的json对象只有一组键值对，其键的值为我们需要获取的json对象！

Get方法

请求带参数时在url后面写{ params:{ } }里面的参数键值对形式，请求的时候会自动加在url后面，如：http://localhost:8080/missileTarget/list?username=2&pageSize=10&pageNum=1即为传递三个参数。
vue前端

this.$http.get('http://localhost:8080/missileTarget/list', { params: {
        username: this.listQuery['keyword1'], pageSize: this.listQuery['pageSize'], pageNum: this.listQuery['pageNum']
      }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })

注意几个键值对就代表几个参数，不能直接传json对象，会报400错误。
后端

@ApiOperation("")
@GetMapping("list")
@ResponseBody
public CommonResult<CommonPage<Fragment>> list(@RequestParam(value = "username", required = false) Integer keyword1,
                                               @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                               @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
    PageHelper.startPage(pageNum, pageSize);
    FragmentExample example = new FragmentExample();
    example.createCriteria().andGroupNumEqualTo(keyword1);
    List<Fragment> fragmentList = fragmentMapper.selectByExample(example);
    return CommonResult.success(CommonPage.restPage(fragmentList));
}

使用@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize可以直接获取传来的参数pageSize并将其值赋给变量pageSize，有几个参数就写几个。

Vue请求后端的一些错误

400错误码

表示请求中的语法错误。我的错误是

• 在/missiletarget面下请求/fragment/list，无法实现，改为/missiletarget/list并修改后端相应的处理函数后解决。
• 使用get方法，传递的参数为json对象，报错。将json对象中四个键值对直接写在参数列表传参，解决。因为get方法无法直接传json对象。

500错误码

为服务端的问题，查看服务端发现报错java.lang.NullPointerException，进一步查看错误代码行，发现使用了object对象使用toString()方法，但是此次请求object对象为空。我的原因是前端有个输入框没输入，传给后端的这个参数为null导致的，输入即可。