(十二)axios实现前后端交互(post,get请求传参,URLSearchParams传参)

使用axios实现前后端交互：

1:安装axios模块，后面加上--save方便移动项目的时候也能使用模块

npm install axios --save

2:html代码定义按钮

<button @click="getData()">axios的post获取数据</button>

<button @click="getDataGet()">axios的get获取数据</button>

<ul>

{{item.name}}--{{item.no}}

</li>

</ul>

3js业务逻辑

// import axios from "axios";//这个可以注册到vue的全局变量里面方便在任意地方取值

//<script>定业务逻辑得

export default {

name: "App",

data() {

//把业务逻辑得数据渲染到页面上

return {

list: [],

};

components: {

methods: {

getData() {

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

var param=new URLSearchParams();//URLSearchParams方式动态拼接参数

param.append('id','111');

param.append('name','2222');

this.$Http

//.post(api,{id:'111',name:'222'})//后台只能以一个对象的方式接收,如果后台是属性一一对应接收,接收到的会是null

//.post(api,{},{params:{id:'111',name:'222'}})//后台只能是属性一一对应接收，如果接收的是一个对象，接收到的将会是null,下面是动态拼参的结果

.post(api,{},{params:param})

.then((response) => {

alert(response.data);

})

.catch((err) => {

alert(err);

});

getDataGet() {

// var api = "http://localhost:43597/api/Test/ToJson?id1=n111&name1=n222";//直接问好后面拼接

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

var param=new URLSearchParams();//通过URLSearchParams动态拼参

param.append('id1','111');

param.append('name1','666');

this.$Http

.get(api,

// {params:{id1:"n131",name1:"n333"}}//等同于上面的?id1=n111&name1=n222

{params:param}//动态拼参的结果

)

.then((response) => {

this.list = response.data;

})

.catch((err) => {

alert(err);

});

};

</script>

4：在main.js里面注册全局变量$Http ，后面在任意地方都可以通过this.$Http来取Axios对象

import Axios from "axios";

const app=createApp(App);

app.config.globalProperties.$Http=Axios ;//注册全局变量$Http

//挂载路由

app.use(router)

app.mount('#app1')

后端代码：

1：ConfigureServices里面配置跨域

string corsUrls = "http://192.168.2.117:8081,http://192.168.2.117:8080,http://192.168.2.117:8082,http://192.168.2.117:8083";
if (string.IsNullOrEmpty(corsUrls))
{
throw new Exception("请配置跨请求的前端Url");
}
services.AddCors(options =>
{
options.AddDefaultPolicy(
builder =>
{
builder.WithOrigins(corsUrls.Split(",")).AllowCredentials()
.AllowAnyHeader().AllowAnyMethod();
});
});

2：Configure里面启用跨域

app.UseCors();//启用跨域，启用跨域写在UseAuthorization上面
app.UseAuthorization();

3.后端的controller的代码放字符串或者json

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

[Route("Getvalue")]
[HttpPost]
//public string Getvalue(Querys querys
public string Getvalue(string id, string name)
{

return "1111";
}

[Route("ToJson")]
[HttpGet]
public string ToJson(string id1, string name1)
{
List<people> peoples = new List<people>() {
new people() { name="zhangsan",no="111"} ,
new people() { name="李四",no = "222" }
};
string ListJson = JsonConvert.SerializeObject(peoples);
return ListJson;
}

}
public class people
{
public string name { get; set; }
public string no { get; set; }
}
public class Querys{
public string id { get; set; }
public string name { get; set; }
}

注意点:post后台和前台属性命名一一对应获取,不用对象获取的时候,参的参数应该放在第3个,也就是api路径后面必须加{},然后在是传的参数，不然后台获取为null

.post(api,{},{params:{id:'111',name:'222'}})//传值方式

public string Getvalue(string id, string name)//获取方式