搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > DotNet > .NET Core WebAPI+ Vue 搭建前后端完全分离Web架构

.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构

DotNet 2018-03-01


来源:b0b0

cnblogs.com/hbb0b0/p/8035241.html


架构


服务端采用: .NET Core  WebAPI


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



问题


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


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


具体实现


服务端


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


具体实现如下:


创建 WebAPI 项目


Dotnet new webapi


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


引入 cors组件


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


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


服务端目录结构


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


添加 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();

}


设定header original


public void ConfigureServices(IServiceCollection services)

 {

            services.AddMvc();

            //配置Cors

            app.UseCors("CorsSample");

}


修改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() };

        }

    }

}


编译与运行 webapi


dotnet run


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


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


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


客户端


目录结构


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


搭建webpack 下Vue + router +elementUI


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


引入axios 组件


npm install axios


创建单页组件UserInfo.vue


<template>

  <div class="userList">

       <el-button type="primary"  @click="handleClick">获取服务端时间</el-button>

       <p>call from server:{{msg}}</p>

  </div>

</template>


<script>

  import axios from 'axios';

  export default{

    data(){

      return {

          msg:""

      }

    },


    methods: {

       handleClick(evt) {

        let _self=this;

        axios.get('http://localhost:5000/api/Values')

             .then(function (response) {

                 //debugger;

                 console.log(response);

                 _self.msg=response.data;

             })

            .catch(function (error) {

              console.log(error);

            });

       }

    }

  }

</script>


<style scoped>

.userList

{

   padding-top: 10px;

}

</style>


运行效果


npm run dev


.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构


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


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


看完本文有收获?请转发分享给更多人

关注「DotNet」,提升.Net技能 

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《.NET Core WebAPI+ Vue 搭建前后端完全分离Web架构》的版权归原作者「DotNet」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注DotNet微信公众号

DotNet微信公众号:iDotNet

DotNet

手机扫描上方二维码即可关注DotNet微信公众号

DotNet最新文章

精品公众号随机推荐