Vue中get请求入参问题研究

背景后台接口@GetMapping(value = "/list")@ResponseBodyResponse<List<CrawlerManage>> list(@RequestParam(value = "sessionId") String sessionId){String redisResult = jedisPool...

shangrila_kun

5718人浏览 · 2019-04-27 19:15:19

shangrila_kun · 2019-04-27 19:15:19 发布

背景

后台接口

@GetMapping(value = "/list")
    @ResponseBody
    Response<List<CrawlerManage>> list(@RequestParam(value = "sessionId") String sessionId){
        String redisResult = jedisPool.getResource().get(sessionId);
        Response<List<CrawlerManage>> r = new Response<>();
        if(MySessionCheckUtil.checkIsAdmin(redisResult)){
            r= r.setSuccessResult(BaseConstant.SUCCESS_MSG,crawlerManageService.listAll());
            return r;
        }else {
            r = r.setNoPerssionResult(BaseConstant.NO_PERMISSION,null);
            return r;
        }
}

根据后台接口可知
前端请求方式因为GET
Content-typer:application/x-www-form-urlencoded

错误请求一

list(){
      this.$http.get(
        'http://www.xxxx.cn/api/v1.0/crawler/list',
         {
               sessionId:'xxxxxx'
         }).then(res => {
        
            if(res.data.code==1){
              alert(res);
            }
            if(res.data.code=='500'){
              alert(res.data.message);
            }
          })

    }

错误效果
问题分析

vue GET传递参数要加上params。否则接收不到参数。params中的参数是附带在url上的。
补充：上面这句话不够完成，通过查看这位朋友的博客，有兴趣的可以点进去看下：使用axios做vue中的交互（get）,这篇文章说到不加params，可以在url上附带参数进行传参。当然，还是推荐使用params，因为如果采用url形式，如果入参个数较多，则拼接的url就比较长了。

正确请求

list(){
      this.$http.get(
        'http://www.xxxxxx.cn/api/v1.0/crawler/list',
         {
            'params':{
               sessionId:'xxxxxxxxx'
             }
         },
          {
          'headers': {
            'Content-Type': 'x-www-form-urlencoded'
          }
        }).then(res => {
            if(res.data.code==1){
              alert(res);
            }
            if(res.data.code=='500'){
              alert(res.data.message);
            }
          })
    }

正确请求二

此处headers内没有定义Content-type也请求成功了

 list(){
      this.$http.get(
        'http://www.xxxxx.cn/api/v1.0/crawler/list',
         {
            'params':{
               sessionId:'xxxxxxx'
             }
         }).then(res => {
        
            if(res.data.code==1){
              alert(res);
            }
            if(res.data.code=='500'){
              alert(res.data.message);
            }
          })
    }

效果图

补充：现在VUE官方推荐使用axios vue-resource不更新了，推荐使用axios，axios的使用方法可参考https://www.kancloud.cn/yunye/axios/234845

为什么Content-typer:application/x-www-form-urlencoded加与不加都没影响了

对于get方式，参数是跟在url后边，是否接收到参数与Content-Type无关，无论是application/json还是application/x-www-form-urlencoded.

完整测试例子

这个测试例子其实没必要放的，想了想，或许可以方便大家直接复制并进行测试，就业附带如下，没有需要的话，可以不用往下看了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue get 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
  <button type="button" @click="list()">点我</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' ,index:'1' },
      { name: 'Google' ,index:'2' },
      { name: 'Taobao' ,index:'3' }
    ]
  },
  methods: {
    list(){
      this.$http.get(
        'http://www.xxxxx.cn/api/v1.0/crawler/list',
         {
            'params':{
               sessionId:'xxxxx'
             }
         }).then(res => {
        
            if(res.data.code==1){
              alert(res);
            }
            if(res.data.code=='-1'){
              alert(res.data.message);
            }
          })

    }
	}
})
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^