学习java web历程之前后端分离

第一幕：初识

爽总第一次听说我要转java，就给我讲，不管面试官问什么，你一定要从前后端分离的角度去考虑。这是我刚开始意识到前后端分离这个概念很重要。这个时候，前端页面渲染和后端业务层需要分离来做是我对前后端分离全部的理解。

第二幕：了解

因为快春招了嘛，时间是来不及全部学习的，在看完java基础后，没有学习servlet，直接学习SSM,中间掺杂着看看vue.js。这个时候，我知道原来前端有一个框架，后端也有一个框架，开发人员各开发各的，互不影响。同时解耦这个概念在我看网课的时候反复出现。前后端分离大概就是解耦吧。

第三幕：熟悉

• 随着SMM的学完，vue.js教程快速过了一遍。同时也听说了很多技术名字，包括REST风格,axios,webpack,ElementUI,swagger,mock等等。我开始学着使用springboot写一些登陆，这个时候我发现一些问题：
  • 怎么前端也有router后端也有controller。这两个东西是不是重复了。
  • springboot课程教给的模板引擎thymeleaf里面的@ $符号很像JSP中的EL表达式，也很像vue.js中的双向绑定。这前后端还是有耦合啊。spingboot中@Controller加thymeleaf应该不是前后端分离吧。
  • 前端写出来的资源要放到springboot的resources(SpringMVC的web/WEB-INF)下面才能使用吗？那不是得先把前端页面写好才能写后端？

前后端分离

• 什么是前后端分离
• 如何前后端分离

什么是前后端分离？

前后端分离是一种开发模式。到底什么是前后端分离得从历史渊源说起，以JSP为例，过去都是这种前后端耦合在一起的技术案例，包括四大域啊，混乱不堪。尤其是随着工程量大了以后，页面代码量复杂起来，使用html,js,css这些代码， 涉及到JQuery的技术点写出来的代码简直就像“屎山”。
** 前端没有工程化，模块化和可复用化**导致项目开发效率极低。所以为了提高效率， 使用工程化，模块化，可复用化的思想，开始了“解耦”，前端以vue.js（vue就是前面这个问题的一种具体解决方案）为例本身的手脚架就代表了工程化，而vue.js一大特性就是组件化开发，另外ElementUI也诠释了可复用化的思想。
vue,react,angular都是前端开发的工程化框架。另外，前端也可以借助Node来开发各种各样的工具来辅助开发包括包管理器npm，预编译工具webpack（webpack实际上是一个流程管理工具+打包工具，而预编译可以作为这套流程中的一个环节存在），比如将sass编译成css,vue编译成js。
前后端分离不是一个技术问题，而是一个工程问题，因为前后端分离是需要成本的， 小项目根本不需要前后端分离。而且如果前后端分离不彻底会引起一系列的麻烦。

如何前后端分？

• 一个正常的软件开发分为：设计，开发，测试，部署。真正的前后端分离应该渗透到每一个步骤上去。
  • 设计：系统架构设计，接口设计
    • 后端的系统架构设计包括数据库，中间件，缓存这些架构设计。主要是考虑性能，容量，可维护性，可扩展性。而前端也应该满足一个长期可演进可迭代的目标。
    • 接口设计：前后端通过接口交互，Model层面的接口交互(swagger)很重要，包括接口请求方式，数据类型，数据格式等等。
  • 开发：前后端在当下已经可以独立化驱动页面了。前端需要的数据也可以从mock服务器中去拿到模拟数据了。
    • 独立开发的好处：相互透明，完全解耦。后端一套接口可以提供给很多类型的前端使用，web，app,h5，微信小程序等等。
  • 测试：保证前后端独立可测试。
    • 前端主要是页面、跳转、展示、输入传参等等测试。
    • 后端保证数据接口的提供，数据格式，校验，异常情况，权限，数据一致性问题等等。
  • 部署：独立可部署。
    • 过去都是把前端筛到后端一起上线（我们上面写的springboot+thymeleaf）。前端如果要改版本后端也要一起去做。
    • 独立部署的优点：前后端上线可以完全独立，双方按照各自的版本规划来发版本。
      • 关于前端资源部署，静态资源优化方案基本上需要实现：配置超长时间的本地缓存，采用内容摘要作为缓存更新依据，静态资源CDN部署，更资源发布路径实现非覆盖式发布。->前端性能优化也是个工程化问题。

个人对前后端分离的理解

工程化、体系化的前端技术脱胎于“前后端分离”的历史浪潮中。前后端分离前，前端页面效果需要依赖于后端代码，即html文件是由后端代码（Java、PHP等）根据请求内容拼接生成的。前后端分离后，前端页面效果由前端代码（也就是JavaScript语言）自己负责，即html文件由JavaScript语言负责拼接生成。“执行JavaScript代码以拼接生成html文件”这一过程，既可以在前端浏览器中，也可以在后端node环境中，前者被称为浏览器端渲染，后者被称为服务器端渲染（SSR）。

这样的转变对前后端都产生了深刻影响：在前端，为了使JavaScript能更高效稳健地生成并改动html文件（用户与网页UI的交互，本质上就是js代码在改动html文件），诞生了诸如Vue、React等框架；在后端，剥离掉与html文件交互的需求后，开发者也可更专注于后端服务化。此时的后端可以分为两套，一套专门负责将静态的html、js、css文件发往前端浏览器，另一套负责响应这些发往前端浏览器的静态js文件可能产生的请求。