nginx+tomcat前后端分离_我们公司的前后端分离(二)

在前后端分离的实际操作中。，后端仅返回前端所需的数据，不在渲染前端页面，不再参与前端的效果， 开发者权重偏向于前端逻辑。也就是说，用户看到什么样的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后端仅仅需要提供一套逻辑对外提供数据即可，并且前端与后端的耦合度相对较低，将后端开发的每个视图都成为一个接口，或者API，前端通过访问接口来对数据进行增删改查。减轻服务器的负荷。

我们对后端的要求。三高铁律，高并发，高可用，高性能，及安全性，存储能力，业务层可靠。

废话不多说，来点儿干货。(错误的开发方式)

1. 动态资源和静态资源全部 结合在一起，服务器压力大，因为服务器会收到各种http请求，比如thpp请求，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. 快速直接到达 HTML 页面(前端控制路由器与渲染页面，整体项目开发的权重前移)

3. HTML 页面负责调用服务端接口产生数据(通过 ajax 等等，后台返回 json 格式数据，json数据格式因为简洁高效而取代 HTML)

4. 填充 HTML，展现动态效果，在页面上进行解析并操作 DOM。

(二)

1. 可以实现真正的前后端解耦，前端服务器使用 nginx。前端 / WEB 服务器放的是 css，js，图片等一系列静态资源(甚至你还可以 css，js，图片等资源放到特定的文件服务器，例如阿里云的 oss，并使用 cdn 加速)，前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用 tomcat(把 tomcat 想象成一个数据提供者)，加快整体响应速度。(这里需要使用一些前端工程化的框架，比如：nodejs，react，router，redux，webpack)

2. 发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方 单独操作。前端后端互不干扰， 愉快的相处。

3. 在打并发情况下，以同时水平扩展前后端服务器，比如某项目的一个首页就需要 2000+ 台前端服务器做集群来扛住日均多少亿+的 pv(访问量)。(牛叉的企业。web 容器都是自己写的，单实例扛10万 http 并发，2000台是2亿 http 并发，并且可以根据预知高发时来无线拓展，牛X吧！就一个首页 ，颠覆了我们的想象)

4. 减少后端服务器的并发/负载压力。除了接口以外的其他所有 http 请求全部转移到前端 nginx 上，接口的请求调用 tomcat，参考 nginx 反向代理 tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。利用缓存来减少页面请求压力。

5. 即使后端服务器暂时超时或者宕机了，前端页面也会正常访问，只不过数据显示不出来而已。(这时候后端有。应对机制展现完美的显示 例如，亲 稍等一下数据马上就会回来)

6. 也许你也需要有某信相关的轻应用，那样你的接口完全可以共用，如果也有 app 相关的服务，那么只要通过一些代码重构，也可以大量复用接口，提升效率。(多端应用)一个后台大量被服用。

7. 页面显示的东西再多也不怕，因为是异步加载。

8. pHp支持热部署，不用每次重启服务器，前端无缝升级。

9. 增加代码的维护性&易读性(前后端耦合在一起的代码读起来相当费劲， 双方都在打架，谁也不让谁)

10. 提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖

11. 在nginx 中部署证书，外网使用http访问，并且只开发443和80端口，其他端口一律关闭(防止黑客户端口扫描)，内网使用http，性能和安全都有保障

12. 前端大量的组件代码得以复用，组件化，提升开发效率， 大大的节省了时间。

(三)

1. 在开需求会议的时候，前端工程师必须全部参加，并且需要定制好接口文档，后端工程师要写好测试用例(2个维度)，不要让前端工程师充当你的专职测试，推荐使用 chrome 的插件 postman 或 soapui或 jmeter，service 层的测试用例拿 junit 写。ps：前端也可以单元测试(一些假的数据来测试页面交互)

2. 上述的接口并不是Java里的interface，说白了调用接口就是调用你controller里的方法数据

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 反向代理都不会有跨域问题，除非你把前端服务的后端服务分成两个域名。JSON的方式也被淘汰掉了。

4. 如果想玩多端应用，注意要去掉 tomcat 原生的 session 机制，要使用 token 机制，使用缓存(因为是分布式系统)，做单点，对于 token 机制的安全性问题，可以搜一下 jwt。

5. 前端项目中可以加入 mock 测试(构造虚拟测试对象来模拟后端，可以独立开发和测试)，后端需要有详细的测试用例，保证服务的可用性与稳定性。

最后：

前后端分离并非仅仅只是一种开发模式，而是一种架构模式(前后端分离架构)。不要以为只有在撸代码的时候吧前端和后端分开就是前后端分离了，需要区分前后端项目。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的代码库，不同的开发人员。前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，因时间关系，今天就先说这么多。以后我为大家讲解。Python语言架构。