-
前后端分离架构概述
2018-08-12 14:16:51前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...展开全文1、背景
前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。
核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。
Web服务器：一般指像Nginx，Apache这类的服务器，他们一般只能解析静态资源；
应用服务器：一般指像Tomcat，Jetty，Resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好；
一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。
以前的Java Web项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，前后端需要分离。
2、未分离时代（各种耦合）
早期主要使用MVC框架，Jsp+Servlet的结构图如下：
大致就是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JavaBeans中的数据。需要说明的是，这个View还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎，可以使得开发过程中的人员分工更加明确，还能提高开发效率。
那么，在这个时期，开发方式有如下两种：
方式一方式二
方式二已经逐渐淘汰。主要原因有两点：
1）前端在开发过程中严重依赖后端，在后端没有完成的情况下，前端根本无法干活；
2）由于趋势问题，会JSP，懂velocity，freemarker等模板引擎的前端越来越少；
因此，方式二逐渐不被采用。然而，不得不说一点，方式一，其实很多小型传统软件公司至今还在使用。那么，方式一和方式二具有哪些共同的缺点呢?
1、前端无法单独调试，开发效率低；
2、 前端不可避免会遇到后台代码，例如：<body> <% request.setCharacterEncoding("utf-8") String name=request.getParameter("username"); out.print(name); %> </body>这种方式耦合性太强。那么，就算你用了freemarker等模板引擎，不能写Java代码。那前端也不可避免的要去重新学习该模板引擎的模板语法，无谓增加了前端的学习成本。正如我们后端开发不想写前端一样，你想想如果你的后台代码里嵌入前端代码，你是什么感受？因此，这种方式十分不妥。
3、JSP本身所导致的一些其他问题 比如，JSP第一次运行的时候比较缓慢，因为里头包含一个将JSP翻译为Servlet的步骤。再比如因为同步加载的原因，在JSP中有很多内容的情况下，页面响应会很慢。
3、半分离时代
前后端半分离，前端负责开发页面，通过接口（Ajax）获取数据，采用Dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。这也就是Ajax与SPA应用（单页应用）结合的方式，其结构图如下：
步骤如下：
（1）浏览器请求，CDN返回HTML页面；
（2）HTML中的JS代码以Ajax方式请求后台的Restful接口；
（3）接口返回Json数据，页面解析Json数据，通过Dom操作渲染页面；
后端提供的都是以JSON为数据格式的API接口供Native端使用，同样提供给WEB的也是JSON格式的API接口。
那么意味着WEB工作流程是：
1、打开web，加载基本资源，如CSS，JS等；
2、发起一个Ajax请求再到服务端请求数据，同时展示loading；
3、得到json格式的数据后再根据逻辑选择模板渲染出DOM字符串；
4、将DOM字符串插入页面中web view渲染出DOM结构；
这些步骤都由用户所使用的设备中逐步执行，也就是说用户的设备性能与APP的运行速度联系的更紧换句话说就是如果用户的设备很低端，那么APP打开页面的速度会越慢。
为什么说是半分离的？因为不是所有页面都是单页面应用，在多页面应用的情况下，前端因为没有掌握controller层，前端需要跟后端讨论，我们这个页面是要同步输出呢，还是异步Json渲染呢？而且，即使在这一时期，通常也是一个工程师搞定前后端所有工作。因此，在这一阶段，只能算半分离。
首先，这种方式的优点是很明显的。前端不会嵌入任何后台代码，前端专注于HTML、CSS、JS的开发，不依赖于后端。自己还能够模拟Json数据来渲染页面。发现Bug，也能迅速定位出是谁的问题。
然而，在这种架构下，还是存在明显的弊端的。最明显的有如下几点：
1）JS存在大量冗余，在业务复杂的情况下，页面的渲染部分的代码，非常复杂；
2）在Json返回的数据量比较大的情况下，渲染的十分缓慢，会出现页面卡顿的情况；
3）SEO（ Search Engine Optimization，即搜索引擎优化）非常不方便，由于搜索引擎的爬虫无法爬下JS异步渲染的数据，导致这样的页面，SEO会存在一定的问题；
4）资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次HTTP请求才能将页面渲染完毕。可能有人不服，觉得PC端建立多次HTTP请求也没啥。那你考虑过移动端么，知道移动端建立一次HTTP请求需要消耗多少资源么？正是因为如上缺点，我们才亟需真正的前后端分离架构。
4、分离时代
大家一致认同的前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。从某种意义上来说，SPA确实做到了前后端分离，但这种方式存在两个问题：
- WEB服务中，SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA不能作为一种通用的解决方案；
- 现阶段的SPA开发模式，接口通常是按照展现逻辑来提供的，而且为了提高效率我们也需要后端帮我们处理一些展现逻辑，这就意味着后端还是涉足了view层的工作，不是真正的前后端分离。
SPA式的前后端分离，从物理层做区分（认为只要是客户端的就是前端，服务器端就是后端）这种分法已经无法满足前后端分离的需求，我们认为从职责上划分才能满足目前的使用场景：
- 前端负责view和controller层
- 后端只负责model层，业务处理与数据持久化等
controller层与view层对于目前的后端开发来说，只是很边缘的一层，目前的java更适合做持久层、model层的业务。
在前后端彻底分离这一时期，前端的范围被扩展，controller层也被认为属于前端的一部分。在这一时期：
前端：负责View和Controller层。
后端：只负责Model层，业务/数据处理等。可是服务端人员对前端HTML结构不熟悉，前端也不懂后台代码呀，controller层如何实现呢？这就是node.js的妙用了，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。最重要的一点是，前端不用再学一门其他的语言了，对前端来说，上手度大大提高。
可以就把Nodejs当成跟前端交互的api。总得来说，NodeJs的作用在MVC中相当于C（控制器）。Nodejs路由的实现逻辑是把前端静态页面代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的一组api接口，只不过返回的数据是页面代码的字符串而已。
用NodeJs来作为桥梁架接服务器端API输出的JSON。后端出于性能和别的原因，提供的接口所返回的数据格式也许不太适合前端直接使用，前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理。这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而现今，增加Node中间层便是一种良好的解决方案。
浏览器(webview)不再直接请求JSP的API，而是：
1）浏览器请求服务器端的NodeJS；
2）NodeJS再发起HTTP去请求JSP；
3）JSP依然原样API输出JSON给NodeJS；
4）NodeJS收到JSON后再渲染出HTML页面；
5）NodeJS直接将HTML页面flush到浏览器；
这样，浏览器得到的就是普通的HTML页面，而不用再发Ajax去请求服务器了。
淘宝的前端团队提出的中途岛(Midway Framework)的架构如下图所示：
增加node.js作为中间层，具体有哪些好处呢？
(1)适配性提升；我们其实在开发过程中，经常会给PC端、mobile、app端各自研发一套前端。其实对于这三端来说，大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里，后端为了这些不同端页面展示逻辑，自己维护这些controller，模版无法重用，徒增和前端沟通端成本。 如果增加了node.js层，此时架构图如下：
在该结构下，每种前端的界面展示逻辑由node层自己维护。如果产品经理中途想要改动界面什么的，可以由前端自己专职维护，后端无需操心。前后端各司其职，后端专注自己的业务逻辑开发，前端专注产品效果开发。
(2)响应速度提升；我们有时候，会遇到后端返回给前端的数据太简单了，前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候，对其做运算分组等操作，并无影响。但是当数据量大的时候，会有明显的卡顿效果。这时候，node中间层其实可以将很多这样的代码放入node层处理、也可以替后端分担一些简单的逻辑、又可以用模板引擎自己掌握前台的输出。这样做灵活度、响应度都大大提升。
举个例子，即使做了页面静态化之后，前端依然还是有不少需要实时从后端获取的信息，这些信息都在不同的业务系统中，所以需要前端发送5、6个异步请求来。有了NodeJs之后，前端可以在NodeJs中去代理这5个异步请求。还能很容易的做bigpipe，这块的优化能让整个渲染效率提升很多。在PC上你觉得发5、6个异步请求也没什么，但是在无线端，在客户手机上建立一个http请求开销很大。有了这个优化，性能一下提升好几倍。
(3)性能得到提升；大家应该都知道单一职责原则。从该角度来看，我们，请求一个页面，可能要响应很多个后端接口，请求变多了，自然速度就变慢了，这种现象在mobile端更加严重。采用node作为中间层，将页面所需要的多个后端数据，直接在内网阶段就拼装好，再统一返回给前端，会得到更好的性能。
(4)异步与模板统一；淘宝首页就是被几十个HTML片段（每个片段一个文件）拼装成，之前PHP同步include这几十个片段，一定是串行的，Node可以异步，读文件可以并行，一旦这些片段中也包含业务逻辑，异步的优势就很明显了，真正做到哪个文件先渲染完就先输出显示。前端机的文件系统越复杂，页面的组成片段越多，这种异步的提速效果就越明显。前后端模板统一在无线领域很有用，PC页面和WIFI场景下的页面适合前端渲染（后端数据Ajax到前端），2G、3G弱网络环境适合后端渲染（数据随页面吐给前端），所以同样的模板，在不同的条件下走不同的渲染渠道，模板只需一次开发。
增加NodeJS中间层后的前后端职责划分：
5、总结
从经典的JSP+Servlet+JavaBean的MVC时代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java 框架时代，再到前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）为主的MV*时代，然后是Nodejs引领的全栈时代，技术和架构一直都在进步。虽然“基于NodeJS的全栈式开发”模式很让人兴奋，但是把基于Node的全栈开发变成一个稳定，让大家都能接受的东西还有很多路要走。创新之路不会止步，无论是前后端分离模式还是其他模式，都是为了更方便得解决需求，但它们都只是一个“中转站”。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前端只需要关注页面的样式与动态数据的解析及渲染，而后端专注于具体业务逻辑。
参考：淘宝前后端分离解决方案
参考：浅谈前后端分离技术
-
七个开源的 Spring Boot 前后端分离项目，一定要收藏！
2019-09-18 10:05:53前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年...展开全文前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年，SSH 框架用的滚瓜烂熟，出来却发现自己依然没有任何优势！
其实前后端分离本身并不难，后段提供接口，前端做数据展示，关键是这种思想。很多人做惯了前后端不分的开发，在做前后端分离的时候，很容易带进来一些前后端不分时候的开发思路，结果做出来的产品不伦不类，因此松哥这里给大家整理了几个开源的前后端分离项目，帮助大家快速掌握前后端分离开发技术栈。
美人鱼
- star 数 3499
- 项目地址： https://gitee.com/mumu-osc/NiceFish
听名字就知道这是个不错的项目，事实上确实不赖。NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。
项目效果图：
微人事
- star 数 9313
- 项目地址：https://github.com/lenve/vhr
微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Boot 接口设计到前端 Vue 的开发思路，作者全部都记录在项目的 wiki 中，是不可多得的 Java 全栈学习资料。
项目效果图:
项目部分文档截图：
bootshiro
- star 数 1370
- 项目地址： https://gitee.com/tomsun28/bootshiro
bootshiro 是基于 Spring Boot + Shiro + JWT 的真正 RESTful URL 资源无状态认证权限管理系统的后端,前端 usthe 。区别于一般项目，该项目提供页面可配置式的、动态的 RESTful api 安全管理支持，并且实现数据传输动态秘钥加密，jwt 过期刷新，用户操作监控等，加固应用安全。
项目效果图：
open-capacity-platform
- star 数 2643
- 项目地址：https://gitee.com/owenwangwen/open-capacity-platform
open-capacity-platform 微服务能力开放平台，简称 ocp ，是基于 layui + springcloud 的企业级微服务框架(用户权限管理，配置中心管理，应用管理，…)，其核心的设计目标是分离前后端，快速开发部署，学习简单，功能强大，提供快速接入核心接口能力，其目标是帮助企业搭建一套类似百度能力开放平台的框架。
项目效果图：
V 部落
- star 数 2902
- 项目地址：https://github.com/lenve/VBlog
V部落是一个多用户博客管理平台，采用 Vue + SpringBoot + ElementUI 开发。这个项目最大的优势是简单，属于功能完整但是又非常简单的那种，非常非常适合初学者。
项目效果图：
悟空 CRM
- star 数 650
- 项目地址：https://gitee.com/wukongcrm/72crm-java
悟空 CRM 是基于 jfinal + vue + ElementUI 的前后端分离 CRM 系统。
老实说，jfinal 了解下就行了，没必要认真研究，Vue + ElementUI 的组合可以认真学习下、前后端交互的方式可以认真学习下。
paascloud-master
- star 数 5168
- 项目地址：https://github.com/paascloud/paascloud-master
paascloud-master 核心技术为 SpringCloud + Vue 两个全家桶实现，采取了取自开源用于开源的目标，所以能用开源绝不用收费框架，整体技术栈只有阿里云短信服务是收费的，都是目前 java 前瞻性的框架，可以为中小企业解决微服务架构难题，可以帮助企业快速建站。由于服务器成本较高，尽量降低开发成本的原则，本项目由 10 个后端项目和 3 个前端项目共同组成。真正实现了基于 RBAC、jwt 和 oauth2 的无状态统一权限认证的解决方案，实现了异常和日志的统一管理，实现了 MQ 落地保证 100% 到达的解决方案。
项目效果图：
总结
他山之石，可以攻玉。当我们学会了很多知识点之后，需要一个项目来将这些知识点融会贯通，这些开源项目就是很好的资料。现在前后端分离开发方式日渐火热，松哥也强烈建议大家有空学习下这种开发方式。虽然我们身为 Java 工程师，可是也不能固步自封，看看前端单页面应用怎么构建，看看前端工程化是怎么回事，这些都有助于我们开发出更加合理好用的后端接口。好了，七个开源项目，助力大家在全栈的路上更进一步！
关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！
-
前后端分离
2019-01-14 19:15:34前后端分离。都说前后端分离，前后端分离有什么好处？为什么要前后端分离？ BibPipe，将按步就班改成了流水线。展开全文前后端分离。现在都在说前后端分离。前后端分离的好处毋庸置疑，大咖们已经说的很清楚了，解耦啦，职责分离啦，并行开发啦，后端可以重用啦，安全啦，提高性能啦，好多。
我想说的是，什么是前端？
过去，你要问我的话，我会回答说，运行在浏览器端的东东就叫前端。前几天刚接触前后端分离这个概念，不禁心痒难搔，赶了一把时髦，将新项目搞成前后端分离，并着手开发前端。没办法，谁叫咱们是搞asp网站出身，对前端东西比较熟悉呢！结果那个痛苦！
痛苦的地方，主要在于模板重用和配置文件读取。
原本这些东西，用以前的前后不分模式，是非常容易解决的。因为页面输出到浏览器之间，是经过服务器处理的。服务器可以纵横捭阖，各种资源信手拈来，任意组合，再输出。但前后端分离后，这一切都要靠浏览器来完成！
浏览器，辣么弱智，辣么脑残的一个东东。切。一生只负责显示，让你组合资源，还不如吃屎靠谱。
所以，前端不应该仅仅是运行在浏览器端的页面（V，视图），还应该包括输出页面的这部分内容（C，控制器）。按照目前的流行前后端架构，这部分内容可以是node.js。node.js是运行在服务器端的JS，有服务器资源和功能加持，同时又有着前端的语法，我靠，舍我其谁！
浏览器很弱，它的职责就是展示和交互。前端<>浏览器，后端<>服务器。应该按职责划分：
前端 = V + C 后端 = M
-
JavaWeb项目为什么我们要放弃jsp？为什么要前后端解耦？为什么要前后端分离？2.0版，为分布式架构打基础。
2017-03-23 18:09:44前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦， 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...展开全文前言
前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。（名词解释：在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。）术业有专攻（开发人员分离）
以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。对于后端java工程师：把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（dubbo，dubbox，spring cloud），弹性计算架构，微服务架构（springboot+zookeeper+docker+jenkins），java性能优化，以及相关的项目管理等等。后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。对于前端工程师：把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。杨明翰原创文章，禁止转载，版权必究。术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。并且两端的发展都越来越高深，你想什么都会，那你毕竟什么都不精。通过将team分成前后端team，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的team。原始人时代（各种耦合）
几曾何时，我们的JavaWeb项目都是使用了若干后台框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。大多数项目在java后端都是分了三层，控制层（controller/action），业务层（service/manage），持久层（dao）。控制层负责接收参数，调用相关业务层，封装数据，以及路由&渲染到jsp页面。然后jsp页面上使用各种标签（jstl/el/struts标签等）或者手写java表达式（<%=%>）将后台的数据展现出来，玩的是MVC那套思路。我们先看这种情况：需求定完了，代码写完了，测试测完了，然后呢？要发布了吧？你需要用maven或者eclipse等工具把你的代码打成一个war包，然后把这个war包发布到你的生产环境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，对吧？发布完了之后，你要启动你的web容器，开始提供服务，这时候你通过配置域名，dns等等相关，你的网站就可以访问了（假设你是个网站）。那我们来看，你的前后端代码是不是全都在那个war包里？包括你的js，css，图片，各种第三方的库，对吧？好，下面在浏览器中输入你的网站域名（www.xxx.com），之后发生了什么？（这个问题也是很多公司的面试题）我捡干的说了啊，基础不好的童鞋请自己去搜。浏览器在通过域名通过dns服务器找到你的服务器外网ip,将http请求发送到你的服务器，在tcp3次握手之后（http下面是tcp/ip），通过tcp协议开始传输数据，你的服务器得到请求后，开始提供服务，接收参数，之后返回你的应答给浏览器，浏览器再通过content-type来解析你返回的内容，呈现给用户。那么我们来看，我们先假设你的首页中有100张图片，此时，用户的看似一次http请求，其实并不是一次，用户在第一次访问的时候，浏览器中不会有缓存，你的100张图片，浏览器要连着请求100次http请求（有人会跟我说http长连短连的问题，不在这里讨论），你的服务器接收这些请求，都需要耗费内存去创建socket来玩tcp传输（消耗你服务器上的计算资源）。杨明翰原创文章，禁止转载，版权必究。重点来了，这样的话，你的服务器的压力会非常大，因为页面中的所有请求都是只请求到你这台服务器上，如果1个人还好，如果10000个人并发访问呢（先不聊服务器集群，这里就说是单实例服务器），那你的服务器能扛住多少个tcp连接？你的带宽有多大？你的服务器的内存有多大？你的硬盘是高性能的吗？你能抗住多少IO？你给web服务器分的内存有多大？会不会宕机？这就是为什么，越是大中型的web应用，他们越是要解耦。理论上你可以把你的数据库+应用服务+消息队列+缓存+用户上传的文件+日志+等等都扔在一台服务器上，你也不用玩什么服务治理，也不用做什么性能监控，什么报警机制等等，就乱成一锅粥好了。但是这样就好像是你把鸡蛋都放在一个篮子里，隐患非常大。如果因为一个子应用的内存不稳定导致整个服务器内存溢出而hung住，那你的整个网站就挂掉了。如果出意外挂掉，而恰好这时你们的业务又处于井喷式发展高峰期，那么恭喜你，业务成功被技术卡住，很可能会流失大量用户，后果不堪设想。注意：技术一定是要走在业务前面的，否则你将错过最佳的发展期哟，亲~此外，你的应用全部都耦合在一起，相当于一个巨石，当服务端负载能力不足时，一般会使用负载均衡的方式，将服务器做成集群，这样其实你是在水平扩展一块块巨石，性能加速度会越来越低，要知道，本身负载就低的功能or模块是没有必要水平扩展的，在本文中的例子就是你的性能瓶颈不在前端，那干嘛要水平扩展前端呢？？？还有发版部署上线的时候，我明明只改了后端的代码，为什么要前端也跟着发布呢？？？（引用：《架构探险-轻量级微服务架构》，黄勇）正常的互联网架构，是都要拆开的，你的web服务器集群，你的应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群等等。JSP的痛点
以前的javaWeb项目大多数使用jsp作为页面层展示数据给用户，因为流量不高，因此也没有那么苛刻的性能要求，但现在是大数据时代，对于互联网项目的性能要求是越来越高，因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们，因此我们需要需找一种解耦的方式，来大幅度提升我们的负载能力。1.动态资源和静态资源全部耦合在一起，服务器压力大，因为服务器会收到各种http请求，例如css的http请求，js的，图片的等等。一旦服务器出现状况，前后台一起玩完，用户体验极差。2.UI出好设计图后，前端工程师只负责将设计图切成html，需要由java工程师来将html套成jsp页面，出错率较高（因为页面中经常会出现大量的js代码），修改问题时需要双方协同开发，效率低下。3.jsp必须要在支持java的web服务器里运行（例如tomcat，jetty，resin等），无法使用nginx等（nginx据说单实例http并发高达5w，这个优势要用上），性能提不上来。4.第一次请求jsp，必须要在web服务器中编译成servlet，第一次运行会较慢。5.每次请求jsp都是访问servlet再用输出流输出的html页面，效率没有直接使用html高（是每次哟，亲~）。6.jsp内有较多标签和表达式，前端工程师在修改页面时会捉襟见肘，遇到很多痛点。7.如果jsp中的内容很多，页面响应会很慢，因为是同步加载。8.需要前端工程师使用java的ide（例如eclipse），以及需要配置各种后端的开发环境，你们有考虑过前端工程师的感受吗。基于上述的一些痛点，我们应该把整个项目的开发权重往前移，实现前后端真正的解耦！杨明翰原创文章，禁止转载，版权必究。开发模式
以前老的方式是：1.产品经历/领导/客户提出需求2.UI做出设计图3.前端工程师做html页面4.后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低）5.集成出现问题6.前端返工7.后端返工8.二次集成9.集成成功10.交付新的方式是：1.产品经历/领导/客户提出需求2.UI做出设计图3.前后端约定接口&数据&参数4.前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）5.前后端集成6.前端页面调整7.集成成功8.交付请求方式
以前老的方式是：1.客户端请求2.服务端的servlet或controller接收请求（后端控制路由与渲染页面，整个项目开发的权重大部分在后端）3.调用service,dao代码完成业务逻辑4.返回jsp5.jsp展现一些动态的代码新的方式是：1.浏览器发送请求2.直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）3.html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）4.填充html，展现动态效果，在页面上进行解析并操作DOM。（有兴趣的童鞋可以访问一下阿里巴巴等大型网站，然后按一下F12，监控一下你刷新一次页面，他的http是怎么玩的，大多数都是单独请求后台数据，使用json传输数据，而不是一个大而全的http请求把整个页面包括动+静全部返回过来）杨明翰原创文章，禁止转载，版权必究。总结一下新的方式的请求步骤：大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群同时又可以玩分模块，还可以按业务拆成一个个的小集群，为后面的架构升级做准备。前后分离的优势
1.可以实现真正的前后端解耦，前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）2.发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方互不干扰，前端与后端是相亲相爱的一家人。3.在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）4.减少后端服务器的并发/负载压力除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。6.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）7.页面显示的东西再多也不怕，因为是异步加载。8.nginx支持页面热部署，不用重启服务器，前端升级更无缝。9.增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。10.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。11.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。12.前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！注意事项
1.在开需求会议的时候，前后端工程师必须全部参加，并且需要制定好接口文档，后端工程师要写好测试用例（2个维度），不要让前端工程师充当你的专职测试，推荐使用chrome的插件postman或soapui或jmeter，service层的测试用例拿junit写。ps：前端也可以玩单元测试吗？2.上述的接口并不是java里的interface，说白了调用接口就是调用你controler里的方法。3.加重了前端团队的工作量，减轻了后端团队的工作量，提高了性能和可扩展性。4.我们需要一些前端的框架来解决类似于页面嵌套，分页，页面跳转控制等功能。（上面提到的那些前端框架）。5.如果你的项目很小，或者是一个单纯的内网项目，那你大可放心，不用任何架构而言，但是如果你的项目是外网项目，呵呵哒。6.以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面，仁者见仁智者见智。7.这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉，可没说jsp可以完全不学，对于一些学生朋友来说，jsp/servlet等相关的java web基础还是要掌握牢的，不然你以为springmvc这种框架是基于什么来写的？8.如果页面上有一些权限等等相关的校验，那么这些相关的数据也可以通过ajax从接口里拿。9.对于既可以前端做也可以后端做的逻辑，我建议是放到前端，为什么？因为你的逻辑需要计算资源进行计算，如果放到后端去run逻辑，则会消耗带宽&内存&cpu等等计算资源，你要记住一点就是服务端的计算资源是有限的，而如果放到前端，使用的是客户端的计算资源，这样你的服务端负载就会下降（高并发场景）。类似于数据校验这种，前后端都需要做！10.前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展示给用户。扩展阅读
1.其实对于js，css，图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上（如果是普通的服务器&操作系统，存储在到达pb级的文件后，或者单个文件夹内的文件数量达到3-5万，io会有很严重的性能问题），再在oss上配cdn（全国子节点加速），这样你页面打开的速度像飞一样， 无论你在全国的哪个地方，并且你的nginx的负载会进一步降低。2.如果你要玩轻量级微服务架构，要使用nodejs做网关，用nodejs的好处还有利于seo优化，因为nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据，不会解析页面中的js，这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染，需要把静态页面返回到浏览器，然后完成渲染工作，这加重了浏览器的渲染负担。浏览器发起的请求经过nginx进行分发，URL请求统一分发到nodejs，在nodejs中进行页面组装渲染；API请求则直接发送到后端服务器，完成响应。3.如果遇到跨域问题，spring4的CORS可以完美解决，但一般使用nginx反向代理都不会有跨域问题，除非你把前端服务和后端服务分成两个域名。JSONP的方式也被淘汰掉了。4.如果想玩多端应用，注意要去掉tomcat原生的session机制，要使用token机制，使用缓存（因为是分布式系统），做单点，对于token机制的安全性问题，可以搜一下jwt。5.前端项目中可以加入mock测试（构造虚拟测试对象来模拟后端，可以独立开发和测试），后端需要有详细的测试用例，保证服务的可用性与稳定性。总结
前后端分离并非仅仅只是一种开发模式，而是一种架构模式（前后端分离架构）。千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了。需要区分前后端项目前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。原创文章，禁止转载。
-
前后端分离架构：Web实现前后端分离，前后端解耦
2018-04-16 13:55:40一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种... -
在前后端分离的SpringBoot项目中集成Shiro权限框架
2017-12-12 14:13:47公司在几年前就采用了前后端分离的开发模式，前端所有请求都使用ajax。这样的项目结构在与CAS单点登录等权限管理框架集成时遇到了很多问题，使得权限部分的代码冗长丑陋，CAS的各种重定向也使得用户体验很差，在... -
前后端分离：Web实现前后端分离，前后端解耦
2019-03-12 13:50:59前后端分离架构：Web实现前后端分离，前后端解耦 一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、... -
一看就懂！Springboot +Shiro +VUE 前后端分离式权限管理系统
2019-04-15 20:40:28前段日子写过一篇关于SpringBoot+Shiro的简单整合的例子，那个例子并不适用于我们目前的前后端分离开发的趋势。我之前写过一个项目也是用到了Shiro的前后端分离，某度了许久也没找到解决方案，什么去掉shiroFilter.... -
搭建spring-boot+vue前后端分离框架并实现登录功能
2018-08-12 12:17:01一、环境、工具 jdk1.8 maven spring-boot idea VSVode vue 二、搭建后台spring-boot...这时候就需要下载跨域请求用的axios jar包 控制台cnpm install axios --save-dev 至此前后端都已经搭建完毕，启动项目即可访问 -
前后端分离与前后端不分离
2019-11-23 10:12:08前后端分离 开发模式介绍 前后端不分离 定义：以后端直接渲染模板完成响应为主的一种开发模式 特点 http请求次数少 只需要一个后台服务器 前后端开发耦合，责任不明确 单纯开发网站，效率非常高 响应的往往是html... -
Springboot + Spring Security 实现前后端分离登录认证及权限控制
2019-09-05 16:53:37Springboot + Spring Security 实现前后端分离登录认证及权限控制前言本文主要的功能文章目录一、数据库表设计建表语句初始化表数据语句二、Spring Security核心配置：WebSecurityConfig三、用户登录认证逻辑：... -
（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）
2020-04-04 01:12:43程序员都在说前后端分离，开发岗位也被很明确的分成了前后端工程师，很多大学的刚进入计算机专业的小伙伴和打算进入计算机行业的朋友，通常会有这些问题： 究竟什么是前后端呢？ 前后端分离又是什么呢？ 为... -
前后端分离（面试：说一说你理解的前后端分离？）
2020-02-20 02:36:38谈谈你对前后端分离这件事的理解？你觉得一个项目该如何实施前后端分离？ -
前后端分离Cookie sameSite坑 跨域之坑
2019-01-22 15:18:09在前后端分离解决跨域问题过程中，利用CORS解决跨域问题，前后端按照规范处理了，但不管怎样session都是不一致，所以前端无法登陆无法在本地测试。查了几天资料，中间反反复复，最后要放弃的时候无意中看到一个大神... -
前后端分离与前后端不分离的区别
2020-05-26 22:32:56前后端分离 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式... -
开发模式：前后端分离与前后端不分离
2020-11-18 14:08:02目前主流的开发模式，就两种：前后端分离 和 前后端不分离 前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的... -
前端通信, 前后端分离 、 前后端不分离
2019-06-21 19:00:32前端通信 基于后端的通信（ 后端完成 ）（ pc端用 ） ...使用终端（ shell ）作为客户端 思维流程 ...基于H5的webSocket来完成（ 应用于移动端 ）...前后端分离 、 前后端不分离 市场流行： 前后端分离 前后端分... -
前后端分离和前后端不分离的区别
2018-11-20 19:28:38前后端分离 1 前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合纯网页应用... -
什么是前后端分离与前后端不分离
2019-01-13 20:25:00我起初认为前后端分离是，在软件开发过程中前后端分工就叫做前后端分离，其实是前端所有用到的数据都是后端通过异步接口的方式提供的，前端只管页面的展示及效果。 前端和后端不分离的时候，前端的页面也是由... -
前后端分离项目，如何解决跨域问题
2021-01-20 13:42:36前后端分离项目，如何解决跨域问题 跨域资源共享（CORS）是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。 什么是跨域问题 CORS全称Cross-Origin Resource ... -
前后端分离时代，Java 程序员的变与不变！
2019-07-01 10:30:38前后端分离的时代，Java后台程序员的技术建议？ 松哥认真看了下这个问题，感觉对于初次接触前后端分离的小伙伴来说，可能都会存在这样的疑问，于是决定通过这篇文章和大家聊一聊这个话题。 我这里还是尽量从一个 ... -
前后端分离开发的理解以及和前后端不分离的区别
2020-03-21 22:03:51一、前后端分离的概念 前后端分离 前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP | HTML），后端给前端提供接口，前端调用后端提供的 REST 风格接口就行，前端专注写页面（html|jsp）和... -
前后端分离的项目部署到tomcat_如何部署前后端分离的JavaWeb项目
2020-12-21 22:07:56在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用... -
前后端解耦 前后端分离
2017-07-11 14:48:10前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦， 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种... -
什么是前后端分离
2019-08-23 10:40:54前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦， 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种...
