本文目录一览：
如何在开发时部署和运行前后端分离的JavaWe
在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用dubbo+zookeeper或者springCloud来构建微服务，前端则会是一个单独的项目，前台的请求通过微服务来调用。但是，不同与传统的web项目，这类前后端分离的项目如何在开发中部署和运行呢？
当前后端分离时，后端项目一定会被加载到tomcat的webapp目录下面，但是前端的资源院该如何被访问到呢？这里以tomcat这个中间件为例，探讨在开发这类项目的时候，如何让前后端分离的项目部署并且运行起来，即后端项目部署在tomcat之后如何在运行时访问静态资源（非上线部署）。
主要有两种方案：1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中，并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍
一、使用Nginx来访问静态资源。
在本地安装nginx并且修改nginx.conf，修改相关配置，将web访问的端口的资源进行更改，配置如下：
server { listen 80; server_name localhost; charset utf-8; #access_log logs/host.access.log main;
location / { proxy_pass ; proxy_redirect off;
proxy_set_header HOST $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$ {
root D:\Workspaces\esop-html; index index.html;
}
listen对象改为你本地的tomcat访问端口，最下面location中的root改为你前端项目中静态资源的位置，这样就可以实现只部署后端的项目就能访问前端的页面了。
二、将前端项目转换为动态的web项目，随后端项目一起丢入tomcat
这个方案省去了在本地安装和配置nginx，但是也只适用于开发阶段项目的部署运行和调试，真正在生产环境通常前后端项目会部署在不同的服务器。
如果是Intellij Idea,在导入前端项目之后，右键项目 add framework support -- web application，这时将会把前端项目转换为一个javaweb项目，然后将静态资源放在生成的web目录下即可。
如果是eclipse，可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下，或者直接先导入前端项目，然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。
然后，运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。
Web项目开发为何要走前后端分离模式？
把前端与后端独立起来去开发，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员，前后端工程师需要约定交互接口，实现同步开发，开发结束后需要进行独立部署，前端通过接口来调用调用后端的API，前端只需要关注页面的样式与动态数据的解析和渲染，而后端专注于具体业务逻辑。具体好处有以下几点：
1.彻底解放前端
前端不再需要向后台提供模板或是后台在前端html中嵌入后台代
2.提高工作效率，分工更加明确
前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。
3.局部性能提升
通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。
4.降低维护成本
通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。
5.实现高内聚低耦合，减少后端（应用）服务器的并发/负载压力。
6.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，但无法提供数据。
7.可以使后台能更好的追求高并发，高可用，高性能；使前端能更好的追求页面表现、速度流畅、兼容性、用户体验等。
我理解的前后端分离，前端是需要起服务器的，减少学习成本，可以用node，前端也要有域名的
如果是半分离， 那么前端提供js文件（css等）这个我也做过，前后端都用node就不说了，如果是两种语言，
如果一个工程文件下开发，webpack下直接打包进后台语言的静态目录下。
如果是两个工程，那么前端只提供生成的js（css）文件，git pull后台项目，扔进静态目录，这样又涉及到版本控制的问题，一般我会生成一个配置文件，直接读取的，内容是xxx.hash.js这种文件名，然后document.wirte动态写入js/css
前端起服务器就不需要动态引入了，直接html插件生成文件，更好的控制版本
半分离 还有一个问题，例如首页同构，如果更改xxx.blade.php文件，这就又动了php文件，甚至包括nginx反向代理啊，ssl这种缓存啊，都比较麻烦，你要是改了点啥，自己的ok了，后台的崩了，那就挺操蛋了，大公司有专门的运维还好，小公司真的是一团糟
后台我们采取全分离，nginx前端管理，至于升级nginx版本，http2，反向代理，https证书，都是前端自己弄，毕竟小公司，每个人水平都不一致，自己负责自己的比较好
但是这个跨域又要稍微处理一下，至今我这边后台还是*，我也没法说什么
阿里云这么便宜，如果把成本浪费在人力上，会变得很贵
一个人的精力有限，前后端分离有助于我们更专注我们所要注重的技术点，俗话说：“术业有专攻”。
比如我们后端，前后端分离有助于我们把注意力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（dubbo，dubbox，spring cloud），弹性计算架构，微服务架构（springboot+zookeeper+docker+jenkins），java性能优化，以及相关的项目管理等等。
而前端也可以集中精力在前端的展示上。
总的来说，前后端分离利大于弊。这也是越来越少用jsp的原因。
补充两点
1.每次请求的数据量变小，也意味着更少的响应时间。
2.也不是每个应用用前后端分离都是最合适的，要根据应用规模，工期综合判断。
怎么理解前后端分离
对于前后端分离，认识上有个误区，那就是很多人自称：我们老早就分离了，全AJAX，使用Angular或者什么什么就可以了。
这个说法是不合适的，打个比方，别人问的是逗如何解决家禽把蛋生在水草边的问题看地，但实际上人家养的是鸭子，答题的却是养鸡的，所以回答逗不让去水边就行了地，这显然不在点子上。
这
两年业界说的前后端分离，是限于偏展示类的系统（用A代替），而不是应用、管控类Web项目（用B代替），在B类项目里，前后端是天然分离的，对此，除了
少部分后端开发人员，基本所有人的认识都是一致的。上一段中这样回答的人一般都是只做B类项目，在B类项目里，前后端分离是共识，不需要讨论。
那么，剩下的问题就是讨论A类项目的前后端分离了。这个问题的核心在什么地方呢，在于模板的与数据结合的位置，以及，模板的控制权在谁手里。经过这两年的讨论，基本上我们可以达成的共识就是：模板应当由前端人员去控制，主要原因有两方面：
- 性能优化（尤其是外部资源的管理与发布，请求合并等等）
- 协作的顺畅性（已形成模板的界面片段的返工等问题）
那么，模板到底应该在什么地方跟数据结合看
这个问题就比较折腾了，有部分人尝试像B类项目那样，使用js模板，然后在浏览器端执行，这是存在一些问题的，比如说seo不友好，首屏性能不够，尤其对于首页DOM量很大的电商类网站，差距很明显。
所
以我们还是得把主要的模板放在服务端来执行。在这个过程中，阿里作了一些尝试，那就是引入Node层，在这一层把模板与数据进行合成，然后浏览器拿到的就
是生成好的HTML了，但也不是所有HTML都是这么生成好的，还是会有一些内容等到了浏览器之后，再用js去加载和生成。
所以这一定会是一个混合方案，同一个系统中存在两种模板，一种在服务端执行，一种在浏览器中执行，互为补充。
至
于说这个方案中，是否中间层一定要是node，我觉得无所谓，只要是能正常做web项目的东西都可以，这个还是要看所在企业的技术积累方向，当然node
做这块是有一些优势的，比如对前端人员的语言友好性，前后端模板的通用性等等，但这些都是细节，重点还是整体方案和流程。
这时候回头看你问题中的这句：
前后端分离的意思是，前后端只通过 JSON 来交流，组件化、工程化不需要依赖后端去实现。
我相信你这里对前后端的限定是以浏览器为准的，但事实上，A类项目中，前后端的分界一定要延伸到服务器端的模板层，也就是在这一层里，把各种来源的数据整合到模板中，这个数据未必是JSON格式的，会存在有JSON，XML，特定的二进制等等。
组
件化这个话题就更复杂了，在刚才组织形式中，很难说出究竟什么才是组件。是某个商品的模板吗看是数据吗看是数据和模板的结合体吗看没法回答。在此，我说一
句自己的看法：像电商这种项目的前端部分，基本不存在组件的概念，甚至不存在组件化的价值，因为这里面可复用的东西太少了，也不易提取，大多数东西都是不
带逻辑的界面模板。
最近因为ReactJS的流行，带来了一个Isomorphic的概念，这是一种很有意义的探索，但是否能解决这类问
题，尚不得而知，根据我的理解，它对B类项目是较好的补充方案，但对A类项目暂时还缺乏可用性，因为A类项目中，运行期的DOM变更并不多，多是整片的改
变，用这个方案去解决的话，有些牛刀杀鸡的感觉。
关于B类项目的组件化，我之前那个没写完的系列是关于它的，但经过最近一年多的思考，我又觉得需要再重新写一篇东西了。感谢你的问题提醒了我，这就写。
jsp与前后端分离谁更快
前后端分离更快
前后分离的优势：
1.可以实现真正的前后端解耦，前端服务器使用nginx。
前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用跳转路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。这里需要使用一些前端工程化的框架比如（nodejs，react，router，react，redux，webpack）
2.发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。
页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。
接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。
双方互不干扰，前端与后端是相亲相爱的一家人。
3.在大并发情况下，可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。
4.减少后端服务器的并发/负载压力
除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。
且除了第一次页面请求外，浏览器会大量调用本地缓存。
5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
6.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，
那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）7.页面显示的东西再多也不怕，因为是异步加载。
8.nginx支持页面热部署，不用重启服务器，前端升级更无缝。
9.增加代码的维护性易读性（前后端耦在一起的代码读起来相当费劲）。
10.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。
11.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。
12.前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！
