ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios技术栈实现网站开发

前言

最近在公司任务比较少，闲来无事就研究了一下 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中控制器方法。

1. 第一步：首先你得需要有自己的控制器的方法

        [HttpPost]
        public ActionResult GetYDBPModel(string a)
        {
            return Json('result'+a);
        }

2. 第二步：通过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("网络错误，不能访问");
    })
  }
 }

3. 第三步：就是运行我们的项目vue项目：npm run dev ，会发现报错了（当然不是这么简单！）：
   错误如下：

   No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’

   这个是跨域访问出现错误，下面就是解决方法：

• 在你的mvc项目的站点的Web.config中添加如下配置(这里是配置在 的节点下面)：

    <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的详细使用。主要还是怎么实现：

1. 第一步：同样是需要有WebAPI的项目，这里就不卖关子了直接写遇到的坑：
   同样你直接在axios中输入get地址，他也会报与上面同样的错误，是跨域请求的问题：
   No 'Access-Control-Allow-Origin' header is present on the requested resource.'
2. 解决方法：在你的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);
        }
    }
}

3. 第三步，在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);
        }
    }

4. 第四步：将WebAPI返回的结果转换为JSON格式（这里不进行转换也可以请求到数据），在WebAPI项目中的App_start中的WebAPIConfig.cs文件中添加下面代码（我把所有的代码贴在这里）：

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务
            //将请求的结果设置为json格式
            //config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

5. 第五步：接下来就是通过axios调用我们的服务，读取数据：

 created:function(){
    axios.get('http://localhost:34003/api/api')
    // 请求成功
    .then(response=>{
      console.log(response);
    })
    // 请求失败
    .catch(error=>{
      alert("网络错误，不能访问");
    })
  }
 }

大功告成！