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) 进行处理的。