Vue 之qs 使用詳解

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)進行處理的。