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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

服务端采用 dotnet core  webapi

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

                         

问题

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

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

具体实现

服务端

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

创建 wepapi项目

l  Dotnet new webapi

l  引入 cors组件

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

 

 

 

l  服务端目录结构

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
至此 服务端的所有工作都已完成，测试
客户端
目录结构
搭建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
注意：response的 original ,这可是cors的关键所在
本文vue+elementUI+router 参考了monster1935.github.io 代码，再次感谢作者。
以上是 dotnet core webapi +vue 搭建前后端完全分离web架构(一) 的全部内容，
                        来源链接：
                            utcz.com/z/378878.html
回到顶部