架构

服务端采用 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架构的更多相关文章

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

    架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...

  2. 谈谈《Dotnet core结合jquery的前后端加密解密密码密文传输的实现》一文中后端解密失败的原因

    详情请看<Dotnet core结合jquery的前后端加密解密密码密文传输的实现>,正常来讲,这个博客里面的代码是没有问题的,但是我有时候却会直接报错,原因是后台解密失败:Interna ...

  3. ionic + asp.net core webapi + keycloak实现前后端用户认证和自动生成客户端代码

    概述 本文使用ionic/angular开发网页前台,asp.net core webapi开发restful service,使用keycloak保护前台页面和后台服务,并且利用open api自动 ...

  4. Dotnet core结合jquery的前后端加密解密密码密文传输的实现

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  5. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  6. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  7. 基于Spring Boot架构的前后端完全分离项目API路径问题

    最近的一个项目采用前后端完全分离的架构,前端组件:vue + vue-router + vuex + element-ui + axios,后端组件:Spring Boot + MyBatis.之所以 ...

  8. springboot+vue的前后端分离与合并方案

    pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...

  9. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

随机推荐

  1. JS获取字符对应的ASCII码

    有时候会需要用到字符的ASCII码,一时之间调试时可能会忘记字符与ASCII码对应的数字. 最近喜欢用浏览器控制台直接跑JS代码,将这个代码直接贴到浏览器控制台,即可调试(谷歌浏览器快捷键 ctrl+ ...

  2. JAVA Socket编程(二)之TCP通信

    基于TCP(面向连接)的socket编程,分为客户端和服务器端. 客户端的流程如下: (1)创建套接字(socket) (2)向服务器发出连接请求(connect) (3)和服务器端进行通信(send ...

  3. MySQL 如何执行关联查询

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/51 当前mysql执行的策略很简单:mysql对任何关联都执行嵌 ...

  4. Wamp环境搭建常见错误问题解决

    第一点.对于apache + php + mysql 的版本的正确选择 问题:网上有些教学视频已经很早了,然后很多人照着来,完全和视频里讲的一样,但是结果就是搭建不成功. 出现问题原因:三件套的版本选 ...

  5. Docker(十一):Docker实战部署HTTPS的Tomcat站点

    1.选择基础镜像  docker pull tomcat:7.0-jre8 2.生成HTTPS证书 keytool -genkey -alias tomcat -keyalg RSA -keystor ...

  6. OpenStack运维(四):OpenStack备份恢复

    1.备份注意事项 要保留多少备份? 是否需要异地备份? 备份间隔多久? 恢复策略? 2.备份什么 2.1 数据库备份 2.1.1  制定crond 每天备份一次 2.1.2 备份命令根据系统而定,可用 ...

  7. lesson - 1 笔记 网络连接 /putty 密钥登陆

    ---笔记 一.网络连接配置 1. 查看电脑ip 地址: ifconfig -a  2. 自动获取ip 地址: dhclient   默认BOOTPROTO=dhcp  和真机同一网段 3. 手动配置 ...

  8. ogg12-ERROR OGG-01031 file D:\OGG\dirdat\ed000000 is not in any allowed output directories

    配置ogg时出现这个错误: 2018-01-04 14:22:58 ERROR OGG-01031 Oracle GoldenGate Capture for Oracle, P147148.prm: ...

  9. Python爬虫通过替换http request header来欺骗浏览器实现登录

    以豆瓣为例,访问https://www.douban.com/contacts/list 来查看自己关注的人,要登录才能查看. 如果用requests.get()方法获取这个http,没登录只能抓取回 ...

  10. 再谈javascript面向对象编程

    前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...