zoukankan      html  css  js  c++  java
  • dotnet core webapi +vue 搭建前后端完全分离web架构(一)

    架构

    服务端采用 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 代码,再次感谢作者。

  • 相关阅读:
    Linux内核网络协议栈优化总纲
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 链表数据求和操作
  • 原文地址:https://www.cnblogs.com/hbb0b0/p/8035241.html
Copyright © 2011-2022 走看看