前端要素:HTML、CSS、JavaScript
什么是 CSS 预处理器?
????????CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。
常用的CSS预处理器:SASS、LESS
JavaScript对应的框架:
??????? 1、JQuery库
??????? 2、 Angular:将后台的 MVC 模式搬到了前端以及模块化
??????? 3、React:特点：虚拟DOM
???????? 4、Vue:渐进式框架，综合了Angular和React的特点
UI框架:
????? ? 1、 Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
????????2、ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
????????3、 Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
????????4、AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架????????
????????5、Layui：轻量级框架
前后端分离:
1、MVC模式
1、发起请求到前端控制器( DispatcherServlet )
2、前端控制器请求 HandlerMapping 查找 Handler ，可以根据 xml 配置、注解进行查找
3、处理器映射器 HandlerMapping 向前端控制器返回 Handler
4、前端控制器调用处理器适配器去执行 Handler
5、处理器适配器去执行 Handler
6、Handler 执行完成给适配器返回 ModelAndView
7、处理器适配器向前端控制器返回 ModelAndView ， ModelAndView 是 SpringMVC 框架的
一个底层对象，包括 Model 和 View
8、 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图( JSP )
9、视图解析器向前端控制器返回 View
10、前端控制器进行视图渲染，视图渲染将模型数据(在 ModelAndView 对象中)填充到 request
域
11、前端控制器向用户响应结果?
?优点：
MVC 是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应
该写在哪里。为了让 View 更纯粹，还可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里无
法写入 Java代码，让前后端分工更加清晰。
缺点：
前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：
1、第一种是前端写 DEMO，写好后，让后端去套模板。好处是 DEMO 可以本地开发，很高效.
不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大；
2、另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相
关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为
影响前端开发效率的重要因素。前后端职责纠缠不清：模板引擎功能强大，依旧可以通过拿到的上
下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少
业务代码。还有一个很大的灰色地带是Controller ，页面路由等功能本应该是前端最关注的，但却
是由后端来实现。 Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的业务代码经常会
出现在 Controller 层。
对前端发挥的局限性：性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作；
2、AJAX
?优点：
????????这种模式下，前后端的分工非常清晰，前后端的关键协作点是 A JAX 接口。看起来是如此美妙，但回过 头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：
?缺点:
????????前后端接口的约定： 如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的 接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
????????前端开发的复杂度控制： SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量JS 代码的组织，与 View 层的绑定等，都不是容易的事情。
3、MVVM
????????MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
????????低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
????????可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。????
????????独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页
面设计。
????????可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。
组成:
?View：
????????View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现
ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、
Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。
Model：
????????Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则
ViewModel：
???????? ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现 事件驱动编程。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
?
?
?
?
?
?
?
?
?
?
?