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对象
vuejson转对象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) => {
// al = al;
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)进⾏处理的。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论