Vue:前端体系，前后端分离

1.概述

MVVM(Model- View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程模式。

MVVM源自经典的MVC(Model（在后台）-View-Controller)模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

• 该层向上与视图层进行双向数据绑定
• 向下与Model层通过接口请求进行数据交互

View

View是视图层，也就是用户界面。前端主要由HTML和CSS来构建，为了方便地展现ViewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等，各大MVVM框架如Vue.js,AngularJS,EJS等也都有自己用来构建用户界面的内置模板语言。

Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。

ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。

需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。

• 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）
• 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）

视图状态和行为都封装在了ViewModel里，这样的封装使得ViewModel可以完整的去描述View层。由于实现了双向绑定，ViewModel的内容会实时展现在view层。

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层应用。

Vue的核心库只关注视图层，HTML+ CSS+ JS, 不仅易于上手，还便于第三方库（如“vue-router: 跳转， vue-resource:通信。vuex：状态管理）或既有项目整合。

HTML+ CSS+ JS：视图：给用户看，刷新后台给的数据

网络通信：axios :http://www.axios-js.com/（vue不做网络通信）

VUE遵守SOC:关注点分离原则

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）,有几大好处。

• 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
• 独立开发：开发人员可以专注于业务逻辑和数据开发（ViewModel）.设计人员可于专注于页面设计。
• 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

2.前端知识体系

2.1 前端三要素

• HTML（结构）：超文本标记语言（Hyper Text Markup Language）,决定网页的结构和内容
• CSS(表现)：层叠式表（Cascading Style Sheets）,设定网页的表现形式
• JavaScript(行为):是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。

2.2表现层（CSS）

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可引用等，不具备支持任何语法支持，主要缺陷如下：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

**CSS预处理器：**提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。

常用的CSS预处理器有：

• SASS：基于Ruby,通过服务器端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS.
• LESS:基于NodeJS,通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，后台人员需要的话，建议使用LESS.

2.3行为层JavaScript

JavaScript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器解释运行。

Native原生JS开发

原生JS开发，即按照[ECMAScript]标准的开发模式，简称ES，特点是所有浏览器都支持。

TypeScript微软的标准

TypeScript是一种由微软开发的自由和开源的编程语言，是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

JavaScript 框架

• JQuery :优点简化了DOM操作，缺点DOM操作台频繁，影响前端性能；

• Angular:其特点是将后台的MVC（M:模型 V:视图 C：控制器 View:JSP{{}} ；DATA: ； vm:数据双向绑定）模式搬到前端并增加了模块化开发的理念，采用TypeScript语法开发，最大的缺点是版本迭代不合理。

• React: 一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM：利用内存】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点：使用复杂，且要额外学一门【JSX】语言；

• VUE:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发的、路由、状态管理等新特性。其特点是综合了Angular(模块化)，和React(虚拟DOM)的优点。（MVVM + DOM）

• Axios：前端通信框架；因为vue的边界明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；也可以直接选择使用JQuery提供的AJAX通信功能。

UI框架

• Ant-Design:阿里巴巴出品 基于React的UI框架
• ElementUI、iview、ice：饿了么出品，基于VUE的UI框架
• Bootstrap:Twitter推出的一个用于前端开发的开源工具包
• AmazeUI:一款HTML5跨屏前端框架 官网地址：http://tpl.amazeui.org/

JavaScript构建工具

• Bable:Js编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
• WebPack:模拟打包器，主要作用是打包，压缩、合并及按序加载

2.4 三端统一

混合开发（Hybrid App）

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

• 云打包：HBuild->HBuildX,DCloud出品； API Cloud
• 本地打包：Cordova(前身是PhoneGap)

2.5 后端技术

NodeJS框架及项目管理工作如下：

• Express: NodeJS框架
• Koa:Express简化版
• NPM:项目综合管理工具，类似于Maven
• YARN:NPM的替代方案，类似于Maven和Gradle的关系

2.6 主流前端框架

Vue.js

iView

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

属于前端主流框架，选型时可以考虑使用，主要特点是移动端支持较多

ElementUI

是饿了么前端开源维护的VUE UI组件库，组件齐全，基本涵盖后台所需的所有组件。主要用于开发PC端的页面，是一个质量比较高的VUE UI组件库。

属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

地址：https://element-plus.gitee.io/#/zh-CN

https://panjiachen.github.io/vue-element-admin-site/zh/

ICE

飞冰是阿里巴巴团队基于React/Angular/vue的中后台应用解决方案，在阿里巴巴内部，已经有270多个来自几乎所有的BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

3.了解前后端分离的演变史

3.1后端为主的MVC时代

为了降低开发是复杂度，以后端为出发点，比如:Struts、SpringMVC等框架的使用，就是后端的MVC时代。

• 发起请求到前端控制器（DispatcherServlet）
• 前端控制器请求HandlerMapping 查找Handler,可以根据xml配置，注解进行查找。
• 处理器映射器HandlerMapping向前端控制器返回Handler
• 前端控制器调用处理器适配器去执行Handler
• 处理器适配器去执行了Handler
• Handler执行完成给适配器返回ModelAndView
• 处理器适配器向前端控制器返回ModelAndView, ModelAndView是SpringMVC框架的一个底层对象，包括Model和Voew
• 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成为真正的视图（JSP）
• 视图解析器向前端控制器返回view
• 前端控制器进行视图渲染，视图渲染将模型数据（在ModelAndView对象中）填充到request域。
• 前端控制器向用户响应结果

优点：

MVC是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹，还可以使用Thymeleaf、Freemarker等模板引擎，使模板里面无法写入Java代码，让前后端分工更加清晰。

缺点：

3.2基于AJAX带来的SPA时代

SPA:单页面应用时代

优点：

这种模式下，前后端的分工非常清晰，前后端的关键协作点是AJAX接口。复杂度从服务端的JSP里移到了浏览器的JavaScript,浏览器变得很复杂。类似Spring MVC,这个时代开始出现浏览器端的分层架构。

缺点

• 前后端接口的约定：如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦。有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
• 前端开发的复杂度控制：SPA应用大多以功能交互为主。

3.3 前端为主的MV*时代

此处的MV*模式如下：

• MVC(同步通信为主)：Model View Controller
• MVP(异步通信为主)：Model View Presenter
• MVVM(异步通信为主)：Model View ViewModel

为了降低前端开发复杂度，涌现了大量的前端框架，如：AngularJS、React、Vue.js、EmberJS等。这些框架总的原则是先按类型分层，比如Templates、Controllers、Models，然后再在内层做切分。

优点：

• 前后端职责很清晰：前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发，后端则可以专注于业务逻辑的处理，输出RESTful等接口。
• 前端开发的复杂度可控：前端代码很重，但合理的分层，让前端代码能各司其职。
• 部署相对独立：可以快速改进产品体验

缺点：

• 代码不能复用
• 全异步，对SEO（搜索引擎优化）不利。往往还需要服务端做同步渲染的降级方案。
• 性能并非最佳，特别是移动互联网环境下。
• SPA不能满足所有需求，依旧存在大量多页面应用。URL Design需要后端配合，前端无法完全掌控。

基于NodeJS的全栈模式，依旧面临很多挑战：

• 需要前端对服务器编程有更进一步的认识。比如TCP/IP等网络知识的掌握。

• NodeJS层与Java层的高效通信。NodeJS模式下，都在服务器端，RESTful HTTP通信未必高效，通过SOAP等方式通信更高效，一切需要在验证中前行。

• 对部署、运维层面的熟练了解，需要更多知识点和实验操作。

4.MVVM模式的实现者

• Model:模型层，在这里表示JavaScript对象
• View:视图层，在这里表示DOM(HTML操作的元素)
• ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者。

在MVVM构架中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

• ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
• ViewModel能够监听到视图的变化，并能够通知数据发生改变。

Vue.js就是一个MVVM的实现者，核心就是实现了DOM监听与数据绑定。

为什么要使用Vue.js

• 轻量级，体积小是一个重要指标。
• 移动优先。更适合移动端，比如移动端的Touch事件
• 易上手，学习曲线平稳，文档齐全
• 吸取了Angular(模块化)和React(虚拟DOM)的长处，并拥有自己独特的功能，如：计算属性
• 开源。社区活页度高

5.第一个Vue程序

IDEA:插件 Vue

vue.js官网地址：https://cn.vuejs.org/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><h1>狂神说Java</h1><!--vue层变为模板-->
<div id="app">{{message}}
</div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",//model层相当于datadata:{message:"hello,vue!"}})
</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><h1>狂神说Java</h1><!--vue层变为模板-->
<div id="app"><span v-bind:title="message">
鼠标悬停几秒中查看此处动态绑定的提示信息！</span>
</div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",//model层相当于datadata:{message:"hello,vue!"}})
</script></body>
</html>

v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。它们会在渲染DOM上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。

判断-循环

if

else-if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">
<!--三个等号是全等--><h1 v-if="type==='A'">A</h1><h1 v-else-if="type==='B'">B</h1><h1 v-else>C</h1>
</div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",data:{type:'A'}});
</script>
</body>
</html>

可以点击网页检查进行修改

for:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><li v-for="item in items">{{item.message}}</li></div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来   数组[]表示   对象{}表示-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",data:{items:[{message:'狂神说java'},{message:'狂神说前端'},{message:'狂神说运维'}]}});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--这里要注意括号和 in 之间是有空格的  不然页面显示不了结果--><li v-for="(item,index) in items">{{item.message}}---{{index}}</li></div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来   数组[]表示   对象{}表示-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",data:{items:[{message:'狂神说java'},{message:'狂神说前端'},{message:'狂神说运维'}]}});
</script>
</body>
</html>

结果：

6.vue的安装

第一种安装方法：

第二种安装方法是第一种没有成功的情况下去官网下载vue 然后解压放在IDEA文件的plugins下

然后在IDEA中进行配置 在IDEA文件夹的plugin中找到vue然后加入就可以了。

下载官网地址：https://plugins.jetbrains.com/plugin/9442-vue-js/versions

B站学习地址：https://space.bilibili.com/95256449