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

痛定思痛。 2022-04-16 01:57 199阅读 0赞

**分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow]**

**也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！**

# 架构 #

服务端采用 dotnet core webapi

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

![640?wx\_fmt=png&wxfrom=5&wx\_lazy=1][640_wx_fmt_png_wxfrom_5_wx_lazy_1]

# 问题 #

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

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

# 具体实现 #

## 服务端 ##

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

创建 wepapi项目

l Dotnet new webapi

![640?wx\_fmt=png][640_wx_fmt_png]

l 引入 cors组件

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

l 服务端目录结构

![640?wx\_fmt=png][640_wx_fmt_png 2]

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

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

![640?wx\_fmt=png][640_wx_fmt_png 4]

# 客户端 #

## 目录结构 ##

![640?wx\_fmt=png][640_wx_fmt_png 5]

## 搭建webpack 下Vue + router +elementUI ##

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

## 引入axios 组件 ##

npm install axios

## 创建单页组件UserInfo.vue ##

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

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

</div>

</template>

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>

.userList

padding-top: 10px;

</style>

## 运行效果 ##

npm run dev

![640?wx\_fmt=png][640_wx_fmt_png 6]

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

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

原文地址:http://www.cnblogs.com/hbb0b0/p/8035241.html

--------------------

**.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

#### 给我老师的人工智能教程打call！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow] ####

![这里写图片描述][SouthEast]

[http_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[640_wx_fmt_png_wxfrom_5_wx_lazy_1]: https://img-blog.csdnimg.cn/img_convert/e5f566e142f9a587f6ee7694b7f5e946.png;wxfrom=5&wx_lazy=1
[640_wx_fmt_png]: /images/20220416/8ffa0a9d4fbe427ab8f59ba3492d3bd8.png
[640_wx_fmt_png 1]: /images/20220416/6fd265b2b3fe4d78b7812ffc4d535220.png
[640_wx_fmt_png 2]: /images/20220416/bd767c5be10e4e8dbc4930f151eed13e.png
[640_wx_fmt_png 3]: /images/20220416/22d15e02b4b04f6eb430856930b32bca.png
[640_wx_fmt_png 4]: /images/20220416/22f2a51f13f947e79589f4e7b83458f4.png
[640_wx_fmt_png 5]: /images/20220416/3d1d82d59bf0471480bdac004cc67b2b.png
[640_wx_fmt_png 6]: /images/20220416/8f4956b493c8430e9ca7938b43cc32b6.png
[640_wx_fmt_jpeg]: /images/20220416/74fc17d981df48f2bfdad6cf78ca89df.png
[SouthEast]: /images/20220416/857e86418d274212979153709e0c2bb6.png