(十四)QS(QueryString的简写)解析参数的使用

1:安装qs模块

npm install qs --save

2:卸载qs模块

npm uninstall qs --save

如果卸载不掉也可以在node_modules模块里面找到qs文件夹直接删除,效果是一样的,因为安装的模块都被安装到node_modules里面去了

然后在yarn install一下

3：在main.js引用qs模块,然后注册到全局变量里面

import Qs from 'qs'

app.config.globalProperties.Qs = Qs

 

4:然后就可以在其他地方引用了

(1)stringify可以将对象转换成&拼接的字符串

var obj= {

     id:'111',

     name:'222'

   };

var s=this.Qs.stringify(obj)

alert(s)

(2)parse将&拼接的字符串解析成对象

var url = 'id=111&name=222';

var s1=this.Qs.parse(url);

alert(s1.id)

5：具体用法

(1)get的时候

前端代码：

比如在data()方法里面定义了一个

 return {

      adduser:{

        username:"111",

        password:"222",

        phonenumber:"333"

      }

    };

get提交的时候直接路径后面以&的方式拼接(var api = "http://localhost:43597/api/Test/GetQsGet?username=111&password=222&phonenumber=333";)

 var sobj=this.Qs.stringify(this.adduser)

 var api = "http://localhost:43597/api/Test/GetQsGet?"+sobj;

如果不是&拼接就不需要

var api = "http://localhost:43597/api/Test/GetQsGet";

this.$Http.get(api,{params:this.adduser} )

 

后端代码：

[Route("/api/Test")]
[ApiController]
public class TestController : ControllerBase
{

[Route("GetQsGet")]
[HttpGet]
public string GetQsGet(string username, string password, string phonenumber)
{

return "1111";
}

}

(2)post的时候

 前端代码：

var api = "http://localhost:43597/api/Test/GetQsPost1";

      let ss={

        username:"111",

        password:"222",

        phonenumber:"333"

      };

// .post(api,{},{params:this.adduser})//后台只能属性接收，后台如果是对象接收，接收到的是null,例如GetQsPost(string username, string password,string phonenumber)

// .post(api,ss)//只能对象接收，后台如果是属性接收，接收到的是null,例如GetQsPost(Getss getss)，getss是一个类

this.$Http.post(api,this.Qs.stringify({getss:ss,sort:"1",name:"2"}))//可以同时接收多种类型的对象,比如接收一个对象的同时还可以接收两个属性,如下

后端代码：

[Route("GetQsPost1")]
[HttpPost]
public string GetQsPost1([FromForm]Getss getss, [FromForm] string sort, [FromForm] string name)
{
Getss getss1 = getss;

return "1111";
}

public class Getss
{
public string username { get; set; }
public string password { get; set; }
public string phonenumber { get; set; }
}