Axios与Asp.Net Core WebAPI参数交互

本文详细介绍了如何使用Axios与Asp.Net Core WebAPI进行参数交互,包括RestFul原则、Get和Post请求、数据查询与提交、文件上传与下载,以及相关配置和注意事项。重点讨论了各种参数类型(简单类型、列表、实体类、文件)的绑定方式,并提供了处理问题的示例和参考链接。
摘要由CSDN通过智能技术生成

以下内容针对Axios.Net Core WebAPI
如果是.Net WebAPI可参考这份文档

设定需知

  1. .Net Core WebAPI中,无论是getpost或其他类型的方法。简单类型的数据会默认从url中获取,复杂类型的数据(实体类、列表等)默认从body中获取。
  2. 可以通过[FromQuery][FromBody][FromForm]等属性,强制从某个地方获取数据。但如果一个实体类被设定了[FromBody],则实体类中属性设定的其它[FromQuery]之类的注解无效。
  3. 可以为实体类中的属性加上[BindRequired]注解,设定为必填,不能应用于方法参数。
  4. 可以为实体类中的属性加上[BindNever]注解,设定为不接受绑定,不能应用于方法参数。

RestFul

axios中针对RestFul有以下四种简化写法(方框内的表示非必填):

  • axios#get(url[, config])
  • axios#delete(url[, config])
  • axios#put(url[, data[, config]])
  • axios#post(url[, data[, config]])

get广泛用于查询,可通过url直接访问,无可替代
post和put基本一致,一般不使用put
delete在特殊场景下有使用

post中传递的数据放在data中
config的常用的配置如下:

{
  headers: {'Content-Type': 'application/json'},  // 自定义请求头,一般无需配置或在全局配置
  params: {// 放在url中的参数(post等方法也能配置)
    ID: 12345
  },
  timeout: 1000,// 指定请求超时的毫秒数(0 表示无超时时间)
  responseType: 'json', // 表示服务器响应的数据类型,默认json,可以是 'blob'(接收文件),'arraybuffer',  'document', 'json', 'text', 'stream'
}

数据查询-Get

Get查询,只需要注意使用[FromQuery]即可,以下为具体使用。

简单参数

针对简单类型的参数,只需要前后端名称一致即可。即使参数个数对不上也能访问到(需要注意int等的默认值)。

axios.get("GetMoreNormal", {
    params: {
        strVal: 'demo',
        intVal: 123
    }
});

[HttpGet, Route("GetMoreNorma
Vue 3.0 和 ASP.NET Core WebAPI 都支持动态路由,实现起来也比较简单。 首先,在 ASP.NET Core WebAPI 中,我们需要在 Startup.cs 中配置路由。可以使用以下代码: ``` app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action}/{id?}"); }); ``` 这个配置会将请求转发到对应的控制器和方法中。其中,{controller} 和 {action} 表示控制器和方法名,{id?} 表示可选参数。 接着,在 Vue 3.0 中,我们可以使用 vue-router 实现动态路由。可以使用以下代码: ``` const router = createRouter({ history: createWebHistory(), routes: [ { path: '/:controller/:action/:id?', name: 'dynamic', component: DynamicComponent } ] }) ``` 这个配置会将请求转发到 DynamicComponent 组件中。其中,:controller、:action 和 :id? 表示控制器、方法名和可选参数。 最后,我们可以在 DynamicComponent 组件中调用 ASP.NET Core WebAPI 中的动态路由。可以使用以下代码: ``` axios.get(`/api/${this.$route.params.controller}/${this.$route.params.action}/${this.$route.params.id}`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }) ``` 这个代码会发送请求到对应的控制器和方法中,其中,this.$route.params.controller、this.$route.params.action 和 this.$route.params.id 分别对应控制器、方法名和参数。 以上就是 Vue 3.0 和 ASP.NET Core WebAPI 实现动态路由的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值