qs插件使用

请求数据使用axios发送请求发现后端接收不到参数,需要把参数序列化。
Vue中提供了qs这个插件。

qs 安装

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

qs 全局引入

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

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

 Vue.prototype.$qs = qs

qs.parse()是将URL解析成对象的形式进行数据序列化

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();
       });
   },

【注】：有效参数：{"name":"1"}

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));
//结果
//methods= "query_sql_dataset_data"&projectId="85"&appToken="7d22e38e-5717-11e7-907b-a6006ad3dba0"&datasetId:=" 12564701"

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