Vue 之qs 使用详解

Posted 2020-11-24 qdmpky

Vue 之 qs 使用

1. qs插件简介

• 最近接触了一个Vue + elementui 的项目,请求数据使用axios发送请求发现后端接收不到参数,后来知道了要把参数序列化
  Vue中提供了qs这个插件。进行数据序列化。

2. qs 的基本使用

2.1 qs 安装

npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)

2.2 qs 全局引入

//在main.js引入qs
import  qs from 'qs'

//配全局属性配置，在任意组件内可以使用this.$qs获取qs对象

 Vue.prototype.$qs = qs

2.3 使用qs

methods: {
            //获取部门列表
            getDepartments() {
                this.listLoading = true;
                let para = this.$refs.queryName.value;
                let obj={name:para};
             //qs.parse()是将URL解析成对象的形式
              let query = this.$qs.parse(obj);
                this.$http.patch("/department/queryByName",query).then((res) => {
                    // this.total = res.data.total;
                    this.departments = res.data;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },

**前端参数格式：

2.4 后端接受参数使用springmvc的@RequestBody接收

  @RequestMapping(value = "/queryByName",method = RequestMethod.PATCH)
    @ResponseBody
    public  List<Department> queryByName(@RequestBody DepartmentQuery  dep){
       System.out.println("接受参数为:"+dep);
        List<Department> departmentList = departmentService.queryByName(dep);
        return  departmentList;
    }

后端接收参数格式（注意使用@RequestBody 接收对象属性要与前端传第json对象的key相同命名哦）

---

3. qs的qs.parse()和qs.stringify()

3.1 qs.parse()

qs.parse()是将URL解析成对象的形式
我遇到的问题就是使用此方法解决的。因为后端@RequestBody注解对应的类在将HTTP的输入流(含请求体)装配到目标类(即：@RequestBody后面的类)时，会根据json字符串中的key来匹配对应实体类的属性，如果匹配一致且json中的该key对应的值符合(或可转换为)

---

3.2 qs.stringify()

qs.stringify()将对象 序列化成URL的形式以&进行拼接
代码示例：

const Qs = require('qs');
let obj= {
 method: "query_sql_dataset_data",
 projectId: "85",
 appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
 datasetId: " 12564701"
  };
Qs.stringify(obj);
console.log(Qs.stringify(obj));

如上面代码所示,输出结果如下

---

4.JSON中stringify方法和qs中stringify的区别

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

如上所示，前者是采用JSON.stringify(param)进行处理，后者是采用Qs.stringify(param)进行处理的。