背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离。

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 还是非常非常方便的。

正常访问!一点问题都没有,就算是有问题,也是代码的问题了,噢哈哈

这就是我的项目中的前后端在开发上分离的实践,讲得不深,随便拍!

.net core webapi 前后端开发分离后的配置和部署的更多相关文章

  1. .net core实现前后端彻底分离

    问题的关键在跨域 1.我们在services里面 添加跨域内容如下: public void ConfigureServices(IServiceCollection services) { //这个 ...

  2. Vue 应用 nginx 配置 前后端不分离模式

    一.先在官网下载nginx 软件,解压后放在软件盘中如D盘 将nginx 文件夹拖到编译器中,打开conf 文件夹中的 nginx.conf 文件,找到其中的server {} 配置项,默认35 行. ...

  3. ASP.NET Core模块化前后端分离快速开发框架介绍之2、快速创建一个业务模块

    源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin ...

  4. ASP.NET Core模块化前后端分离快速开发框架介绍之4、模块化实现思路

    源码 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin 前 ...

  5. 从一张图开始,谈一谈.NET Core和前后端技术的演进之路

    从一张图开始,谈一谈.NET Core和前后端技术的演进之路 邹溪源,李文强,来自长沙.NET技术社区 一张图 2019年3月10日,在长沙.NET 技术社区组织的技术沙龙<.NET Core和 ...

  6. 零基础ASP.NET Core WebAPI团队协作开发

    零基础ASP.NET Core WebAPI团队协作开发 相信大家对“前后端分离”和“微服务”这两个词应该是耳熟能详了.网上也有很多介绍这方面的文章,写的都很好.我这里提这个是因为接下来我要分享的内容 ...

  7. ABP开发框架前后端开发系列---(3)框架的分层和文件组织

    在前面随笔<ABP开发框架前后端开发系列---(2)框架的初步介绍>中,我介绍了ABP应用框架的项目组织情况,以及项目中领域层各个类代码组织,以便基于数据库应用的简化处理.本篇随笔进一步对 ...

  8. ABP开发框架前后端开发系列---(2)框架的初步介绍

    在前面随笔<ABP开发框架前后端开发系列---(1)框架的总体介绍>大概介绍了这个ABP框架的主要特点,以及介绍了我对这框架的Web API应用优先的一些看法,本篇继续探讨ABP框架的初步 ...

  9. ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用

    在前面几篇随笔介绍了我对ABP框架的改造,包括对ABP总体的介绍,以及对各个业务分层的简化,Web API 客户端封装层的设计,使得我们基于ABP框架的整体方案越来越清晰化, 也越来越接近实际的项目开 ...

随机推荐

  1. Django模型层之字段查询参数及聚合函数

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 字段查询是指如何指定SQL WHERE子句的 ...

  2. 简明4步,让Python的好朋友Pycharm变得更加雅观!

    跟着人工智能/机械学习的兴起,Python再次取得广泛程序员的关注.而JetBrains出品的PyCharm无疑是最好用的Python IDE之一. 把本身的IDE装备安排得既有逼格又雅观,这是每个P ...

  3. 架构之CDN缓存

    CDN缓存 CDN主要解决将数据缓存到离用户最近的位置,一般缓存静态资源文件(页面,脚本,图片,视频,文件等).国内网络异常复杂,跨运营商的网络访问会很慢.为了解决跨运营商或各地用户访问问题,可以在重 ...

  4. linux 关于Apache默认编码错误 导致网站乱码的解决方案

    Apache默认编码UTF-8在解析A网站的时候没有任何问题,当运行B网站时出现的"蝌蚪文"乱码问题   最近经常有同学在使用LAMP/WAMP时,遇到这样的编码错误问题: A网站 ...

  5. 如何书写一篇能看懂的html和CSS代码

    在书写html和CSS过程中,如果只是想要实现网页的外观和基本功能,那么简单的书写代码就可以满足需求,甚至不需要使用类名或者注释等.但实际上,这么写肯定是不行的,首先对于类同结构的重复书写就是一件很浪 ...

  6. Python_ jiba、snownlp中文分词、pypinyin中文转拼音

    import jieba #导入jieba模块 x = '分词的准确度直接影响了后续文本处理和挖掘算法的最终效果.' jieba.cut(x) #使用默认词库进行分词 print(list(jieba ...

  7. Python_字符串简单加密解密

    def crypt(source,key): from itertools import cycle result='' temp=cycle(key) for ch in source: resul ...

  8. javascript中!=、!==、==、===操作符总结

    JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符. 在相等运算符中对应 === .!==和 ==.!=. 先举个栗子 var str = '1' var num0 = 0 va ...

  9. Linux时间子系统之二:表示时间的单位和结构

    人们习惯用于表示时间的方法是:年.月.日.时.分.秒.毫秒.星期等等,但是在内核中,为了软件逻辑和代码的方便性,它使用了一些不同的时间表示方法,并为这些表示方法定义了相应的变量和数据结构,本节的内容就 ...

  10. 一种转换Ipv6地址的方法

    原CSDN博客不再更新维护. 本文介绍了一种将char* 类型的Ipv6地址转换成BYTE(unsigned char)或者in6_addr类型的方法. 说明:使用时需要下载Ipv6++.lib和Ip ...