VUE QS序列化插件

最近接触了一个Vue + elementui 的项目,请求数据使用axios发送请求发现后端接收不到参数,后来知道了要把参数序列化
Vue中提供了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(); }); },

</pre>

**前端参数格式：

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; }

</pre>

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

---

1|*3*****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));

json stringify 和 p stringify 的区别
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als