1. 概述

Vue（发音为 /vju/，类似于 view）是一个用于构建用户界面的渐进式框架，于 2014 年 2 月发布。与其他大型框架不同，Vue 的设计理念是自下而上逐层应用。Vue 的核心库只关注视图层，不仅入门简单，而且易于与第三方库（如：vue-:jump、vue-:、vuex:）或现有项目集成。

官方网站：

Soc:HTML+CSS+JS:View:展现给用户，刷新后台给出的数据

网络通信：

页面跳转：vue-

状态管理：vuex

Vue-UI：ICE

CSS/新技能

2.前端知识体系

距离成为真正的“互联网 Java 全栈工程师”还有很长的路要走，而“我是大前端工程师”更是绕不过去的必修课。本阶段课程的主要目的就是带领我 Java 后端程序员认识前端、了解前端、掌握前端，从而向成为“互联网 Java 全栈工程师”更进一步。

2.1. 前端的三要素

●HTML（结构）：超文本标记语言（文本），决定网页的结构和内容

●CSS（表达式）：层叠样式表（ ），规定网页的呈现风格

●（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，来控制网页的行为。

2.2 结构层（HTML）

太简单了，略

2.3. 表现层（CSS）

CSS 是标记语言，不是编程语言，所以不能自定义变量或引用，也就是说没有任何语法支持，主要缺陷有以下几点：

● 语法不够强大，例如不能嵌套，导致模块化开发中出现大量重复的选择器；

● 没有变量或合理的样式重用机制，逻辑上相关的属性值必须以字面量的形式重复输出，难以维护；

这导致我们的工作中增加了很多不必要的工作量。为了解决这个问题，前端开发者会使用一个叫**[CSS 预处理器]**的工具，它提供了 CSS 所缺少的样式层复用机制，减少了冗余代码，提高了样式代码的可维护性。这大大提高了前端样式开发的效率。

什么是 CSS 预处理器

CSS 预处理器定义了一种新的语言。其基本思想是使用一种专门的编程语言为 CSS 添加一些编程特性，以 CSS 为目标生成文件，然后开发人员只需要使用这种语言对 CSS 进行编码即可。通俗地说，就是“使用专门的编程语言设计网页的样式，然后通过编译器转换成普通的 CSS 文件供项目使用”。

常用的 CSS 预处理器有哪些？

● SASS：基于Ruby，由服务器处理，功能强大，效率高。需要学习Ruby语言。入门难度比LESS高。

● LESS：基于，由客户端处理，使用简单。功能比SASS简单，解析效率也较低

SASS，但是在实际开发中已经足够了，所以我们后端工作人员建议必要时使用LESS。

2.4、行为层（）

一种弱类型脚本语言，其源代码不需要经过编译就可以发送到客户端执行。而是以文本格式的字符代码发送到浏览器进行解释和执行。

原生 JS 开发

原生 JS 开发就是遵循 [] 标准（简称 ES）的开发方式，所有浏览器都支持 ES。截止到本博文发布，ES 标准已经发布，具体如下：

ES3

●ES4（内部，未正式发布）。

ES5（所有浏览器都支持）

●ES6（常用，目前主流版本:封装成ES5支持！）

ES7

ES8

ES9（草案阶段）

不同之处在于新功能的逐步添加。

微软标准

是 开发的一种免费开源编程语言。它是 的超集，本质上为该语言添加了可选的静态类型和基于类的面向对象编程。由 （C# 之父、 、 ； .NET 创始人）领导。

该语言的特点是除了ES的特性之外，还融入了许多不在标准范围内的新特性，因此很多浏览器不能直接支持该语法，需要经过编译（编译成JS）后才能被浏览器正确执行。

框架

●：比较知名的框架，优点是简化了DOM操作，缺点是DOM操作过于频繁，影响前端性能；在前端眼里只是为了兼容IE6、7、8而用的；

●：收购的前端框架是由一群Java程序员开发的，特点包括将后端MVC模式搬到前端，加入模块化开发理念，与微软合作，采用语法开发，对后端程序员友好，对前端程序员就没那么友好了，最大的缺点就是版本迭代不合理（例如1代->2代，除了名字不同，基本是两码事；截至发博时已经上线）

●：出品，一款高性能的 JS 前端框架；特点是提出了全新的概念【虚拟 DOM】，减少真实的 DOM 操作，在内存中模拟 DOM 操作，有效提高前端渲染效率；缺点是使用起来比较复杂，需要额外学习一门【JSX】语言；

●Vue：一个渐进式框架。渐进式意味着逐步实现新功能，例如模块化开发、路由、状态管理等。它的特点是结合了（模块化）和（虚拟DOM）的优点；

● ：前端通信框架；因为 Vue 有明确的边界，就是处理 DOM，所以它不具备通信能力，这时候就需要额外借助一个通信框架来和服务端交互；当然你也可以直接选择使用提供的 AJAX 通信辅助；

UI 框架

● Ant- ：阿里巴巴出品，基于UI框架

● 、 、 ice：由饿了么出品，基于Vue的UI框架

● ：推出用于前端开发的开源工具包

● ：又名“Girl UI”，跨屏前端框架

构建工具

●：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译

●：模块打包器，主要功能是依次打包、压缩、合并、加载。

注：以上知识点已经整理好了开发所需的全部技能

2.5. 三端统一混合开发（App）

主要目的是希望三端（PC、.apk、iOS:.ipa）统一一套代码，能够调用设备底层硬件（如传感器、GPS、摄像头等）。主要有两种打包方式：

●云打包：->，生产；API

●本地包装：（以前）

微信小程序

具体可以参考微信官网，这里介绍一个方便开发微信小程序UI的框架：WeUI

2.6 后端技术

为了方便开发，前端人员也需要掌握一定的后端技术，但是我们Java人员都知道后端的知识体系极其庞大和复杂，所以为了方便前端人员开发后端应用，这项技术就出现了。

作者已经放弃（说架构没做好，比较繁琐，可能会让作者不开心），开始开发新的架构Deno。

既然是后端技术，肯定需要框架和项目管理工具，框架和项目管理工具如下：

● ：框架

● Koa：简化版本

● NPM：综合项目管理工具，类似于

● YARN：NPM 的替代品，类似于

2.7. 主流前端框架

Vue.js

它是一个基于 Vue 的强大的 UI 库，拥有很多比 的组件更丰富的实用基础组件，主要服务于 PC 界面的中后端产品。采用基于 npm++ 开发的单文件 Vue 组件开发模式，支持高质量、功能丰富且友好的 API，使用空间自由灵活。

● 官方网站地址

●

● -

注：属于主流的前端框架，选型时可以考虑，主要特点是支持移动端比较多。

是饿了么前端开源维护的组件库，组件齐全，基本覆盖了后端需要的所有组件，文档详细，示例丰富，主要用于开发PC页面，是一款优质的Vue UI组件库。

●

●

●vue--

注：属于主流前端框架，选型时可以考虑，主要特点是支持桌面终端较多。

冰

飞冰是阿里巴巴团队基于//Vue 开发的中后端应用解决方案，应用于阿里巴巴几乎所有BU的270多个项目，包含从设计端到开发端的完整链路，帮助用户快速构建属于自己的中后端应用。

●官网地址

●

注意：主要组件仍基于 Vue。截至 2019 年 2 月 17 日，对 Vue 的支持还不是很好。

完全的

3. 了解前后分离的演变

为什么要前后分离

3.1. 以后端为主的 MVC 时代

为了降低开发的复杂度，从后端入手，例如：使用诸如，是MVC时代的后端；

以流程为例：

● 向前端控制器发出请求（）

● 前端控制器请求搜索，可基于XML配置和注释进行搜索

● 处理程序映射器返回到前端控制器

● 前端控制器调用处理器适配器执行

● 处理器适配器执行

● 执行完成并返回给适配器

●处理器适配器返回前端控制器，是框架的底层对象，包括View

●前端控制器请求视图解析器进行视图解析，将逻辑视图名解析为真实视图（JSP）

视图解析器将视图返回给前端控制器

前端控制器执行视图渲染，使用模型数据（在对象中）填充域

●前端控制器响应用户

优势

MVC 是一个非常好的协作模型，可以有效降低代码的耦合度，让开发人员从架构的角度知道代码应该写在哪里。为了让 View 更加纯粹，还可以使用 和 等模板引擎，让 Java 代码不能写入模板中，让前后端的分工更加明确。

缺点

●前端开发严重依赖开发环境，开发效率低下。此架构下，存在前后端协作两种模式：

●第一种是前端写DEMO,写好后，让后端去套模板。好处是DEMO可以本地开发，很高效。不足是还需要后端套模板，可能套错，套完后还需要前端确定，来回沟通调整的成本比较大; ●另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境,环境成为影响前端开发效率的重要因素。

●前后端职责不明确：模板引擎强大，依然可以通过获取的上下文变量实现各种业务逻辑。这样一来，只要前端稍弱，后端往往会要求前端在模板层写一大堆业务代码。这里也存在很大的灰色地带，页面路由等功能应该是前端最关心的，但却是由后端来实现的。前后端经常会纠缠在一起，让人咬牙切齿的业务代码经常出现在后端层。这些问题不能完全归咎于程序员的素质，否则JSP就够了。

● 前端性能的局限性：如果只在前端做性能优化，空间非常有限，所以很多时候需要后端的配合，但是由于后端框架的限制，我们很难使用**[]**、[]等技术方案来优化性能。

注：这一时期（2005年之前），包括早期的JSP和PHP，可以称为Web 1.0时代。

对了，如果你是 Java 初学者，请不要太在意一些老技术，比如 JSP，因为时代在变，技术在变，一切都在变（引用扎克伯格的话：唯一不变的就是变化本身）；我们去大学实习的时候，有些同学会觉得我们讲的都不是什么实践性的内容，其实不然，只能说你认知里的实践性内容对于市场来说，已经过时了。

3.2. AJAX带来的SPA时代

早在2005年，AJAX（And XML，异步和XML，老技术有了新用途）正式提出并开始使用CDN作为静态资源存储，从而迎来了SPA（Page）单页应用的时代，王者归来（在这之前JS只是用来在网页上贴狗皮膏药广告）。

优势

这种模式下，前后端的分工非常明确，而前后端合作的关键点就是AJAX接口。看似如此美妙，但回头看，和JSP时代没太大区别。复杂性从服务器上的JSP转移到了浏览器，浏览器端变得非常复杂。同样，浏览器端的分层架构在这个时代开始出现：

缺点

● 前后端接口约定：如果后端接口乱七八糟，如果后端业务模型不够稳定，那么前端开发就会很痛苦；很多团队都有类似的尝试，通过接口规则、接口平台等方式，将接口规则和后端一起沉淀，也可以用来模拟数据，让前后端在约定接口后，实现高效的并行开发。

● 前端开发复杂度控制：SPA应用多为交互类，代码超过10万行很正常，整理大量JS代码并绑定到View层并非易事。

3.3. 前端主导的MV*时代：后端：轻松、分布式、微服务、大数据

这里的MV*模式如下：

● MVC（主要是同步通信）： 、 View、

● MVP（主要是异步通信）：、View、

● MVVM（主要是异步通信）： ，View， ，

为了降低前端开发的复杂度，出现了大量的前端框架，如：、、Vue.js等，这些框架的大致原则是先按类型分层，如、、，然后在层内进行拆分，如下图所示：

优势

●前后端职责非常明确：前端工作在浏览器端，后端工作在服务器端。明确的分工允许并行开发，测试数据的模拟难度不大。前端可以在本地开发。后端可以专注于业务逻辑、输出等界面的处理。

●前端开发复杂度可控：前端代码很重，但合理的分层却能让前端代码各司其职。这点挺有意思的，哪怕是模板功能选择这么简单的事情，也有很多考量，并不是功能越强大就越好。限制什么，留下什么自由，代码该怎么组织，这些设计都需要一本书来阐述。

●相对独立部署：可快速提升产品体验

缺点

●代码无法复用。比如后端仍然需要对数据进行各种校验，验证逻辑无法复用浏览器端代码。如果可以复用，那么后端的数据验证就可以相对简单一些。

● 完全异步，不利于SEO，通常服务端需要实现同步渲染的降级方案。

●性能不是最佳，尤其是在移动互联网环境中。

●SPA不能满足所有需求，大部分页面应用依然存在，URL需要后端的配合，前端无法完全掌控。

3.4. 全栈时代

基于前端的MV*模式解决了很多问题，但正如上文所说，它还是有很多不足的。随着的兴起，它开始可以在服务端运行。这意味着可以有一个新的研发模式：

在这种开发模式下，前后端的职责非常明确，对于前端来说，两个UI层各有各的职责：

●端UI处理浏览器层的显示逻辑，通过CSS渲染样式、添加交互功能等也可以放在这一层，根据应用场景而定。

●后端UI处理路由、模板、数据获取等，通过路由，前端终于可以独立控制URL，这样无论是单页应用还是多页应用，前端都可以自由调控，后端终于可以摆脱对表现的强关注，专注于业务逻辑层的开发。

通过Node，Web层也是代码，也就是说有些代码前后可以复用，而且需要SEO。

场景可以在服务端进行同步渲染，过多异步请求带来的性能问题也可以通过服务端来缓解，上一种模式的不足之处可以通过该模式几乎完美解决。

全栈模式相对于JSP模式来说，看上去是一种倒退，也确实是对原有开发模式的回归，但是是一种螺旋式的回归。

全栈模式依然面临诸多挑战：

●前端需要对服务器端编程有较深入的了解，例如TCP/IP等网络知识。

● Java层与服务器端的高效通信，这种模式下HTTP通信可能效率不高，通过SOAP等方式通信效率更高，一切都需要验证。

● 熟练掌握部署和运维需要较多的知识点和实践经验。

●大量历史遗留问题如何过渡，这可能是最大的挑战。

注：看完这些，相信很多同学就能理解为什么会说：“前端学后端很难，而我们后端程序员学什么都很容易”；就是因为我们的后端程序员有比较完善的知识体系。

全栈！太简单了！！

3.5 总结

总结一下，无论是模型还是技术，没有好坏，只有适合；前后端分离的开发思路，主要基于SoC（关注点分离原则）。以上模型都是为了使前后端的职责更加清晰，分工更加合理高效。

注：以上内容仅供个人学习参考！！！