时间戳

首页 > 技术文章 > (十二)axios实现前后端交互(post,get请求传参,URLSearchParams传参)

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

yingxianqi 2022-03-16 16:42 原文

使用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)//获取方式

推荐阅读