.net core webapi 前后端开发分离后的配置和部署
背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离。
B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能)
前端:node.js + vue
后端:.net core webapi
前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署。
.net core webapi创建后,默认就创建了一个wwwroot的文件夹,这个文件夹是用来放置静态文件的,所以,我们可以理解成,这个文件夹将放置我们的build好的前端项目。
OK,到现在来讲,有一个很有意思的发现(也可以是一点意思都没有,因为都是同一个爸生的),这项目的部署跟mvc的部署的很像(这里不涉及底层运行,只是一个发布后简单的像而已)。
由上图就足够清晰了,这样的部署是属于开发上的前后端分离,他们同属于一个站点,绑定同一个域名,所以不涉及跨域,外部不能直接调用webapi(安全上还是有保证D)。
那么这样的部署却很简单,仅仅是在 Startup 里面的 Configure 设置 一下即可
//设置主页 app.UseDefaultFiles(); //这个是.net core webapi 访问wwwroot文件夹的配置,开启静态文件 app.UseStaticFiles(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "api/{controller=Login}/{action=Get}/{id?}"); });
1、首先是设置主页
这里直接使用的是默认的,就是 UseDefaultFiles 会重定向到 default.htm、default.html、index.htm、index.html。当然你也可以指定设置的首页(指定的页面是可以自定义的!)
//设置主页 DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions(); defaultFilesOptions.DefaultFileNames.Clear(); defaultFilesOptions.DefaultFileNames.Add("index.html"); app.UseDefaultFiles(defaultFilesOptions);
这样就设定了重定向到 index.html,那为什么前面用了 Clear,其实个人认为仅仅是为了保险,因为
2、开启静态文件,UseDefaultFiles 仅仅是一个重定向URL而不是真的提供一个文件,真正提供静态文件的还是 UseStaticFiles。这就是为什么要优先设置 UseDefaultFiles 再到 UseStaticFiles的原因。当然,提供静态文件也提供了多个重载,可以提供一个相对路径,还有静态文件目录的选择。
//这个是.net core webapi 访问wwwroot文件夹的配置,开启静态文件 StaticFileOptions staticFileOptions = new StaticFileOptions(); staticFileOptions.FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(@"D:\testsite\wwwroot\");//指定目录你站点api的要访问的wwwroot目录 app.UseStaticFiles(staticFileOptions);
上面这种写法也同样可以,当然指定的目录也同样可以放到配置文件里面去,但是这种做法一般都放在类似FTP的项目上。因为如果是指定的目录脱离了 webapi 项目 wwwroot ,甚至是 wwwroot 下的文件夹都不可以访问到静态页面的。
3、使用MVC并配置路由,开启了静态文件的访问之后,就交由mvc来处理了,这个是webapi项目,所以配置api的路由就可以了。(除了上面的1、2顺序不可以改变之外,mvc中配置的路由所放置的顺序倒没影响,因为这不是一个mvc项目)
好了,前后端都开发好之后,部署到服务器,仅是上面在Startup的配置即可。.net core 还是非常非常方便的。
正常访问!一点问题都没有,就算是有问题,也是代码的问题了,噢哈哈
这就是我的项目中的前后端在开发上分离的实践,讲得不深,随便拍!
原文地址:https://www.cnblogs.com/Vam8023/p/10670741.html
.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com
.net core webapi 前后端开发分离后的配置和部署相关推荐
- Springboot Vue 前后端先分离后结合,闻名已久,今日实战
关于SpringBoot + Vue,这里列出一个基本的项目实例. 源码:https://github.com/slhuang520/study/tree/master/spring-boot-vue ...
- 前后端不分离到分离演变,优势,前后端接口联调,排错
前后端分离,不分离简介 前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构 ...
- 前后端分离开发的理解以及和前后端不分离的区别
一.前后端分离的概念 前后端分离 前后端分离是一种架构模式,说通俗点就是后端项目里面看不到页面(JSP | HTML),后端给前端提供接口,前端调用后端提供的 REST 风格接口就行,前端专注写页面( ...
- 从一张图开始,谈一谈.NET Core和前后端技术的演进之路
从一张图开始,谈一谈.NET Core和前后端技术的演进之路 邹溪源,李文强,来自长沙.NET技术社区 一张图 2019年3月10日,在长沙.NET 技术社区组织的技术沙龙<.NET Core和 ...
- ABP开发框架前后端开发系列——框架的总体介绍
ABP开发框架前后端开发系列--框架的总体介绍 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架. ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领 ...
- 3分钟搞懂前后端开发的区别
上周末见了好多开发的年轻朋友,问了我一个问题:"前后端的区别和要求是什么?"分不清前后端开发的区别和要求,一种是因为前后端都了解,号称"全栈工程师",但又什么都 ...
- 《.NET Core 和前后端那些事儿》技术交流活动纪实
长沙.NET技术社区.NET Core和前后端那些事儿技术交流纪实 2019年3月10日,下午,在位于沁园春御院的长沙市互联网活动基地,在长沙市.NET技术社区的组织下,长沙市.NET技术圈第一次纯粹 ...
- Web开发之四:前后端开发模式探讨
在去年一年的开发过程中,基于开发中MVC的分层模式,我们在实际的项目中尝试了前后端分离的开发模式,并在几个项目中都坚持了下来,虽然坚持了,但不能说明实际的效果很好,或者解决了我们项目开发中存在的问题. ...
- 前后端开发的心得体会_前后端对接的思考及总结
说在前面的话 随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue.React.Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端 ...
最新文章
- linux服务器lvs,Linux的企业-LVS(Linux虚拟服务器)及FULLNAT设置
- C++ 设计Date类
- 1.18.2.9.查询优化、Blink planner、解释表
- C语言,C#语言求100-999内的水仙花数源程序
- 【Java】函数式编程思想-Lambda表达式
- [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
- dnf如何快速拾取物品_极简断舍离|如何快速处理闲置物品?
- Linux中如何查找占用硬盘体积最大的文件方法
- 漫游飞行_涨知识了,手机的飞行模式还能这么用?
- Elasticsearch 系列4 --- Windows10安装Kibana
- matlab数字仿真实验,matlab数值仿真
- 传智黑马java基础学习——day32
- 一年节省费用100万,AI导航误差不到1米,杭州奥体“大小莲花”智慧场馆大揭秘...
- 【树莓派初始化】教你从0开始搭建树莓派的使用环境
- Android 安全框架 -- 总概
- 数据结构和算法学习网站
- 图解windows xp Professional系统安装过程
- Access用户如何借助低代码转型为Web(B/S和移动端)开发?
- 1035 不相交的线
- Android 异步处理之IntentService源码分析