前言
最近在公司任务比较少，闲来无事就研究了一下 ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios实现网站开发，因为公司一直在使用ASP.NET MVC做电子政务开发，很是麻烦；自己想着有机会重构电子政务系统（想想就行~~~）使得前后端分离。（其实也没写上什么内容主要写了怎么实现通过axios调用两种框架的方法）
ASP.NET MVC+vue+axios 实现
至于ASP.NET MVC以及vue与axios技术的使用，我在这里就不再描述了，我主要写一下怎么通过axios调用ASP.NET MVC中控制器方法。
- 第一步：首先你得需要有自己的控制器的方法
[HttpPost]
public ActionResult GetYDBPModel(string a)
{
return Json('result'+a);
}
- 第二步：通过vue-cli搭建的vue环境（当然也可以不使用vue-cli），安装axios，这里我也不做详细描述了；不会的可以自行google。通过axios来调用我们的mvc中的方法：
created:function(){
axios.post('http://localhost:32845/NBGG/GetYDBPModel',{
a:'cons'
})
.then(response=>{
console.log(response);
})
.catch(error=>{
alert("网络错误，不能访问");
})
}
}
-
第三步：就是运行我们的项目vue项目：npm run dev ，会发现报错了（当然不是这么简单！）：
错误如下：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’
这个是跨域访问出现错误，下面就是解决方法：
- 在你的mvc项目的站点的Web.config中添加如下配置(这里是配置在 <system.webServer>的节点下面)：
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
这里主要是加了 Access-Control-Allow-Origin 这个 Header, 他是W3C标准里用来检查该跨域请求是否可以被通过。 (Access Control Check)
主要就可以实现了。
ASP.NET WebAPI+vue+axios实现
同样这里我也不再详细写WebAPI的详细使用。主要还是怎么实现：
- 第一步：同样是需要有WebAPI的项目，这里就不卖关子了直接写遇到的坑：
同样你直接在axios中输入get地址，他也会报与上面同样的错误，是跨域请求的问题：
No 'Access-Control-Allow-Origin' header is present on the requested resource.'
- 解决方法：在你的WebAPI里面新加一个类，AllowCrossSiteJsonAttribute 继承 ActionFilterAttribute类，然后重新OnActionExecuted方法：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http.Filters;
namespace webAPI.Models
{
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
if (actionExecutedContext.Response != null)
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
base.OnActionExecuted(actionExecutedContext);
}
}
}
- 第三步，在WebAPI的控制器中加权限，这里有两种方法，一种是给一个请求方法加权限，另一个是给所有的也就是该控制器中所有的请求都加权限：
[AllowCrossSiteJson]
public class apiController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> Get()
{
return products;
}
public IHttpActionResult Get(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
public class apiController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> Get()
{
return products;
}
[AllowCrossSiteJson]
public IHttpActionResult Get(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
- 第四步：将WebAPI返回的结果转换为JSON格式（这里不进行转换也可以请求到数据），在WebAPI项目中的App_start中的WebAPIConfig.cs文件中添加下面代码（我把所有的代码贴在这里）：
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
- 第五步：接下来就是通过axios调用我们的服务，读取数据：
created:function(){
axios.get('http://localhost:34003/api/api')
.then(response=>{
console.log(response);
})
.catch(error=>{
alert("网络错误，不能访问");
})
}
}
大功告成！
