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();
}
设定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的关键所在
原文发布时间:2018-6-19
原文作者:dotNET跨平台
本文来源掘金如需转载请紧急联系作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Apache Pulsar简介
Apache Pulsar What is Pulsar "Pulsar is a distributed pub-sub messaging platform with a very flexible messaging model and an intuitive client API." Pulsar是pub-sub模式的分布式消息平台,拥有灵活的消息模型和直观的客户端API。 Pulsar由雅虎开发并开源的下一代消息系统,目前是Apache软件基金会的孵化器项目。 概念 Topic Topic是Pulsar的核心概念,表示一个“channel”,Producer可以写入数据,Consumer从中消费数据(Kafka、RocketMQ都是这样)。 Topic名称的URL类似如下的结构: {persistent|non-persistent}://tenant/namespace/topic persistent|non-persistent表示数据是否持久化(Pulsar支持消息持久化和非持久化两种模式) Tenant为租户 Namespace一般聚合一系列相关的Topic,一个...
- 下一篇
开源 | 蚂蚁金服分布式中间件开源第三弹: 下一代微服务SOFAMesh
小蚂蚁说: 4月,蚂蚁金服自主研发的分布式中间件(Scalable Open Financial Architecture,以下简称 SOFA )启动开源计划,并开放多个组件,(相关背景请点击链接阅读《开源 |蚂蚁金服启动分布式中间件开源计划,用于快速构建金融级云原生架构》、《开源 | 蚂蚁金服分布式中间件开源第二弹:丰富微服务架构体系》),这一系列的动作受到大家的关注和支持,SOFA社区也日益壮大。 在两轮开源之后,蚂蚁金服自主研发的分布式中间件(Scalable Open Financial Architecture,以下简称 SOFA )在今天推出了第三轮的开源产品:SOFAMesh。和前两轮开源的历经多年沉淀和打磨的成熟产品不同,本轮的开源主角SOFAMesh,将探索一条和以往产品有所不同的开源道路。下面我们就来看看到底有哪些
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Red5直播服务器,属于Java语言的直播服务器