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 에서 컨트롤 러 방법 을 어떻게 사용 하 는 지 쓰 겠 습 니 다.

첫 번 째 단계: 우선 컨트롤 러 방법 이 필요 해

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

두 번 째 단계: vue - cli 를 통 해 구축 한 vue 환경 (물론 vue - cli 를 사용 하지 않 아 도 됩 니 다) 을 설치 하고 axios 를 설치 합 니 다. 여기 서도 상세 한 설명 을 하지 않 겠 습 니 다.아니에요. 알 아서 구 글 할 수 있어 요.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.’
이것 은 도 메 인 방문 에 오류 가 발생 한 것 입 니 다. 다음은 해결 방법 입 니 다.

뮤 직 비디오 프로젝트 의 사이트 웹. 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 실현
마찬가지 로 여기 서도 웹 API 의 상세 한 사용 을 자세히 쓰 지 않 겠 습 니 다.주로 어떻게 실현 합 니까?

첫 번 째 단계: 똑 같이 WebAPI 가 필요 한 프로젝트 입 니 다. 여 기 는 관심 을 팔 지 않 고 직접 만 나 는 구 덩이 를 씁 니 다. 마찬가지 로 axios 에 get 주 소 를 직접 입력 하면 그 도 위 와 같은 오 류 를 보고 할 것 입 니 다. 크로스 도 메 인 요청 의 문제 입 니 다. No 'Access-Control-Allow-Origin' header is present on the requested resource.'

해결 방법: 웹 API 에 클래스 를 추가 합 니 다. AllowCrossSiteJSonAttribute 는 Action FilterAttribute 류 를 계승 한 다음 에 OnAction Executed 방법 을 다시 추가 합 니 다.

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 프로젝트 의 Appstart 에 있 는 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 }
            );
        }
    }

다섯 번 째 단계: 다음은 axios 를 통 해 저희 서 비 스 를 호출 하여 데 이 터 를 읽 는 것 입 니 다.

 created:function(){
    axios.get('http://localhost:34003/api/api')
    //     
    .then(response=>{
      console.log(response);
    })
    //     
    .catch(error=>{
      alert("    ，    ");
    })
  }
 }

큰 성 과 를 거두다.