前言
最近在公司任务比较少,闲来无事就研究了一下 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("网络错误,不能访问");
})
}
}
大功告成!