dotnet core webapi +vue 搭建前后端完全分离web架构(一)

 

架构

服务端采用 dotnet core  webapi

 

前端采用: Vue + router +elementUI+axios

 

dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第1张图片

 

                         

 

问题

使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问。前后端可能不在同个server上,即使前后端处在同个server上,由于前后端完全分离,

前后端使用的端口号也可能是不一样的,所以必须解决跨域访问。

 

具体实现

 

服务端

服务端使用的dotnetcore +webapi架构,支持cors非常简单,只要引入Microsoft.AspNetCore.Cors 组件,所有问题就迎刃而解了。具体实现如下:

 

创建 wepapi项目

l  Dotnet new webapi

 dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第2张图片

 

l  引入 cors组件

dotnet add package Microsoft.AspNetCore.Cors --version 2.0.1

 

 dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第3张图片

 

 

l  服务端目录结构

 dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第4张图片

 

 

 

l  添加 cors服务

 

 
    
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

             //添加cors 服务
            services.AddCors(options => 
                                     options.AddPolicy("CorsSample",p => p.WithOrigins("http://localhost:5000")
            .AllowAnyMethod().AllowAnyHeader()));

            app.UseMvc();
        }
 
    

 

 

 

l  设定header original

 
    
public void ConfigureServices(IServiceCollection services)

        {

            services.AddMvc();

            //配置Cors
            app.UseCors("CorsSample");

        }
 
    

 

 

 

l  修改controller的 get 方法

namespace webApiDemo1.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        // GET api/values
        [HttpGet]
[EnableCors("CorsSample")]
public IEnumerable<string> Get() { return new string[] { DateTime.Now.ToString() }; } } }

 

l  编译与运行 webapi

 

dotnet run

 dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第5张图片

 

 

 

至此 服务端的所有工作都已完成,测试

 

 dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第6张图片

 

 

客户端

目录结构

dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第7张图片

 

 

搭建webpack 下Vue + router +elementUI

如果不清楚如何搭建 vue+router+elementUI ,请自行度娘。

引入axios 组件

npm install axios

 

创建单页组件UserInfo.vue

 

 

 

<style scoped>

.userList

{

   padding-top: 10px;

}

style>

 

 

运行效果

npm run dev

 

dotnet core webapi +vue 搭建前后端完全分离web架构(一)_第8张图片

 

 

 

注意:response的 original ,这可是cors的关键所在

 

 

本文vue+elementUI+router 参考了monster1935.github.io 代码,再次感谢作者。

转载于:https://www.cnblogs.com/hbb0b0/p/8035241.html

你可能感兴趣的:(dotnet core webapi +vue 搭建前后端完全分离web架构(一))