使用axios实现前后端交互：
1:安装axios模块，后面加上--save方便移动项目的时候也能使用模块
npm install axios --save
2:html代码定义按钮
<button @click="getData()">axios的post获取数据</button>
<button @click="getDataGet()">axios的get获取数据</button>
<br/><br/><br/>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.name}}--{{item.no}}
</li>
</ul>
3js业务逻辑
<script>
// 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)//获取方式
