[Java]前后端分离

前后端分离

• 前后端分离是一种开发模式
• 前后端分离前，前端页面效果需要依赖于后端代码，即html文件是由后端代码（Java、PHP等）根据请求内容拼接生成的
• 前后端分离后，前端页面效果由前端代码（也就是JavaScript语言）自己负责，即html文件由JavaScript语言负责拼接生成。“执行JavaScript代码以拼接生成html文件”这一过程，既可以在前端浏览器中，也可以在后端node环境中，前者被称为浏览器端渲染，后者被称为服务器端渲染（SSR）
• 前后端分离后
  • 在前端，为了使JavaScript能更高效稳健地生成并改动html文件（用户与网页UI的交互，本质上就是js代码在改动html文件），诞生了诸如Vue、React等框架
  • 在后端，剥离掉与html文件交互的需求后，开发者也可更专注于后端服务化，此时的后端可以分为两套，一套专门负责将静态的html、js、css文件发往前端浏览器，另一套负责响应这些发往前端浏览器的静态js文件可能产生的请求

未分离

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

实现前后端分离

一个正常的软件开发分为：设计，开发，测试，部署，真正的前后端分离应该渗透到每一个步骤上去

设计

系统架构设计，接口设计

• 后端的系统架构设计包括数据库，中间件，缓存这些架构设计。主要是考虑性能，容量，可维护性，可扩展性。而前端也应该满足一个长期可演进可迭代的目标。
• 接口设计：前后端通过接口交互，Model层面的接口交互(swagger)很重要，包括接口请求方式，数据类型，数据格式等等

开发

• 前后端在当下已经可以独立化驱动页面了，前端需要的数据也可以从mock服务器中去拿到模拟数据了。
• 独立开发的好处：相互透明，完全解耦
• 后端一套接口可以提供给很多类型的前端使用，web，app,h5，微信小程序等等

测试

• 保证前后端独立可测试。
• 前端主要是页面、跳转、展示、输入传参等等测试。
• 后端保证数据接口的提供，数据格式，校验，异常情况，权限，数据一致性问题等等

部署

• 独立可部署
• 过去都是把前端筛到后端一起上线（我们上面写的springboot+thymeleaf），前端如果要改版本后端也要一起
• 独立部署的优点

  - 前后端上线可以完全独立，双方==按照各自的版本规划==来发版本
    - 关于前端资源部署，静态资源优化方案基本上需要实现：配置超长时间的本地缓存，采用内容摘要作为缓存更新依据，静态资源CDN部署，更资源发布路径实现非覆盖式发布。->前端性能优化也是个工程化问题
             

node.js

nodejs是js运行时运行环境，类比java中jvm，由于node.js的存在，不论操作系统，只要安装对应版本的nodejs，那你就可以用js来开发后台程序

vue.js

• vue.js 是库而非框架，Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
• Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
• Vue.js可以在html里引用，使用npm引入是方便包管理
• 应用需要的库和框架多起来后，一个个从html里引入麻烦，用到打包工具比如webpack（node.js中的构建工具），可以直接require引入之后将不同模块打包成单个js文件，同时这些工具提供各种自动化处理，大大提高开发效率
• Vue.js是数据驱动，和JQuery思路不同，几乎不需要进行复杂低效的dom操作，所以JQUERY基本可以放弃