读书笔记：sping boot+vue开发实战
sping boot+vue开发实战，朱建昕
前言
Spring Boot可以在项目中管理依赖、简化配置、快速运行，让开发者尽可能地从技术中解脱出来，把精力放在业务逻辑的开发中。
谷歌V8引擎和NodeJS的出现和发展，使Web前端工程化成为现实，也让具有MVVM思想的框架横扫Web前端开发。
HTML5的出现使网页的适用性变得更强，很多移动端App界面的设计也开始选用HTML5,这改变了之前面向不同操作系统来开发界面的局面。
本书特色
本书会先使用SSM框架开发项目的第一版， 随后替换成Spring Boot,让读者通过对比来感受使用Spring Boot 的好处。
涉及技术广泛
后端技术包括 Spring Boot, Spring Boot Test, Spring, Spring MVC, MyBatis JSTL, Tomcat, Jetty, HikariCP, Logback, Log4j2, Thymeleaf, Spring Data JPA，Redis, Spring Cache, Spring Securit, JWT, RESTful, Swagger, Spring Rest Docs, Mock MVC, Spring Task, Quartz, Lombok 等。
前端技术包括 HTML, CSS, JavaScript, jQuery, Bootstrap, AJAX, NodeJS, Webpack, Babel, ECMASeript, Vue, Vue CLI, vue ci-esvices Local Storage. Vuex
第1章 Spring Boot入门 1
1.1 Spring Boot介绍 1
Spring的创造者Rod Johnson 是一个传奇人物，他在2002年出版了著名的expert one-on-one J2EE Development without EJB 一书，指出Sun公司所提供的J2EE( Java企业级开发技术，后改名为JavaEE)标准技术中EJB的弊端，并提出了一种基于POJO (普通Java对象)，利用DI和AOP实现组件化开发的解决方案。
除了Spring 核心框架，其还提供了Web开发、快速开发、微服务（Spring Cloud）、数据存储、消息队列、工作流、安全、任务调度、Android开发等解决方案，几乎囊括了Java 软件开发所能遇到的所有应用场景。
设计SpringBoot的目的是简化Java软件(主要是Web应用系统)的创建。如果你初次接触Spring Boot,则可以简单地认为它是一个快速开发框架。
安全框架中的Spring Security和Shiro等。
1.1.1 Spring Boot特性 3
1.1.2 Spring Initializr 3
1.2 开发环境 4
1.2.1 JDK 5
1.2.2 Maven 5
Maven是Java项目的构建工具，主要有两个作用:第一，统一不同开发工具的项目
结构，这样不管使用哪种开发工具，只要是Maven构建的项目，其结构目录就是相同的，避免出现不同开发者在不同开发工具中所开发的项目无法直接导人的问题。第二，管理项目中使用的jar包，利用它提供的依赖可以下载和管理jar包，省去了以前自已查找、复制粘贴并导人jar包的麻烦。
Java的项目构建工具最早有Ant,现在主流的是Maven和Gradle。
1.2.3 Git 5
1.2.4 MySQL 5
1.2.5 Eclipse 6
1.2.6 STS 6
1.2.7 Intellij IDEA 6
1.2.8 IDEA中集成Maven 8
1.3 Spring Boot案例 8
1.3.1 创建项目 9
1.3.2 项目结构 14
1.3.3 第一个案例 17
1.4 Spring Boot Test 18
1.4.1 环境配置 18
1.4.2 单元测试 18
1.5 项目需求与设计 19
1.5.1 Alan人事管理系统 20
1.5.2 技术选型 20
1.5.3 员工管理模块和部门管理模块 21
1.5.4 权限管理模块 22
1.5.5 数据库设计 23
1.5.6 实体类设计 24
1.5.7 界面设计 26
1.6 本章总结 27
第2章 SSM框架 28
Struts，Spring和Hibernate组成的SSH框架
但从2011年开始，更加轻量级的Java开发组合框架出现了，即由Spring MVC, Spring, MyBatis 组成的SSM框架。
2.1 创建SSM项目 29
2.1.1 创建Maven Module 29
2.1.2 配置SSM依赖 31
2.2 SSM整合 34
2.2.1 项目结构 34
2.2.2 配置文件详解 36
2.3 MyBatis 39
MyBatis是一个优秀的持久层框架，它简化了JDBC烦琐的步骤，让开发者只关心
SQL语句的开发。
需要注意的是，MyBatis不是一个如同Hibermate的ORM (对象关系映射)框架，
而是只会根据映射对数据库访问的结果对应生成对象。
2.3.1 解耦合 40
2.3.2 参数 42
2.3.3 关联关系 45
2.3.4 动态语句 48
2.3.5 DAO层设计 49
2.4 Spring 50
2.4.1 DI 50
IOC ( Inversion of Control,控制反转)和DI ( Dependency Injection,依赖注人)其实解决的是同一个问题，是指使用Spring容器管理接口对应的实现类，并为声明的按”类型变量生成和装配对象。
DI强调的是怎么找到接口所对应的实现类，并将实现类对象装配给此接口类的
属性。
2.4.2 AOP 51
2.4.3 对DAO层和Service层支持 52
2.4.4 Service设计 53
2.5 Spring MVC 54
Spring MVC是一个==基于Servlet ==封装的MVC框架。
2.5.1 URL映射 54
Servlet提供了一个URL对应一个类的映射， 但无法将URL直接映射到-一个方法。
例如，在EmployeCotoller 类中有增刪改查操作的四个方法可以定义“/emp"映射
EmployeCotoller的类(根据请求类型会调用该类的doGet方法或doPost方法),即以
前端传来的type参数，其取值可以是“add" "delete” “'update”“search”"等，在后端接收到请求后先通过requestgetParameter("type")拿到 type值，然后根据type的取值通过elseif多重选择分支调用相应的方法。
@WebServlet ("/emp" )
public class EmployeeController extends HttpServlet {
public void doGet (ttpServletRequest request, HttpServletResPons
response){
String type = request.getParameter ("type");
if (type = nu111 I"search". equals (type)) {
search (request, response) :
}
}
}
程序中书写大量的else if 会让代码显得臃肿。这可以使用反射的机制来优化，即将前端传递来的type值和方法名保持致。
public void doGet (HttpServletRequest request, HttpServletResponse response) {
//省略编译型异常
String type = request.getParameter ("type") ;
Class clazz = this.getClass() ;
Method method = clazz.getDeclaredMethod (type, HttpServletRequest.class,
HttpServletResponse.class) ;
method. invoke (this, request, response) ;
)
2.5.2 接收参数 56
2.5.3 转发、重定向、响应JSON 57
1.转发
转发是指Controller处理完毕后跳转到JSP页面，因为这个过程是服务器内部做的处理，所以浏览器的地址不变。使用Servlet 转发要通过request.getRequestDispatcher("WEB-INF/employee. jsp").forwardrequest, response)方式进行。
2.重定向
重定向是响应浏览器一个 302状态码，在响应header (头部文件信息)的Location属性上指定要重新定向的URL,此时浏览器会自动发起一个新的请求访问新的 URL,浏览器地址发生变化。在Servlet 中，使用response.sendRedirect("search")语句可以重定向到某个新的路径下，Spring MVC是在方法的返回值上使用“redirect:重定向的路径”的方式进行。
2.5.4 Controller 设计 60
2.6 JSP 62
对于Java Web的View层设计，由于视图最终在浏览器上显示，因此一般用劲的是HTML, CSS和JavaScript但若要把Java从后端数据库中查询并整理的数据境有HTML合适的位置上，就需要用到JSP技术。
原始的JSP是嵌入在HTML页面上的Java片段，可以任意割裂HTML代码，但从阅读的角度来看这特别不友好。后来15P又推出了JSTL标签和EL表达式，利用这种标签化的语法可以和HTML代码完美地融合起来。
2.7 部署项目 66
2.7.1 配置Tomcat 66
2.7.2 运行访问 67
2.8 本章总结 68
第3章 传统Web前端设计 69
使用传统Web前端设计，即由后端程序的控制器转发视图，通过模板引擎解析Java代码生成页面
响应给浏览器，在页面上再搭配AJAX请求数据，后端对应返回JSON字符串的方式就能满足这些网站的需求，还可以降低公司的运营成本。
3.1 前端设计介绍 69
3.1.1 网页设计技术 70
1.HTML
由于HTML不包含逻辑，因此严格意义上讲它不是一门编程语言， 而是一门由一对“<>”组成的“<标签名>”形式的标记性语言。它由浏览器解析执行，用来组织网页的结构及内容，其内容可以是文字、图片、声音、视频。
2.CSS
CSS也是一种标记性语言，用来修饰HTML元素。它提供了各种属性和对应值，用来对文字、文本、背景、表格、盒子模型、定位进行修饰，使用选择器和样式表可以让属性对HTML元素的修饰生效。
3.JavaScript
脚本语言.
HTML, CSS, JavaScript是Web前端标准实现技术，另外还有很多基于它们的框架，如基于CSS的Bootstrap, MUI, HUI 等，基于JavaScript 的ExtJS、jQuery, 还有最新的实现MVVM思想的框架，即现在Web前端最流行的AngularJS, React 和Vue。
3.1.2 网站通信技术 72
前端向后端发送请求，最重要的信息是URL,因为利用其中的主机名可以在互联网上找到一台计算机，而利用端口号可以找到该计算机运行的进程，如Tomcat,利用路径名可以找到应用程序中的代码文件。
从上层应用的角度来看，一种请求是发送URL,后端处理完会响应页面;另一种请求是通过JavaScript发送AJAX,后端处理完会响应字符串或JSON字符串。
当网站访问者通过浏览器发送请求时，如果后端程序是Java语言实现的MVC架构，则会由Controller接收请求，处理完之后转发到JSP, Tomcat先将JSP代码解析完毕后再将文件(此时只会保留HTML, CSS, JavaScript及数据信息等)响应给浏览器，然后浏览器解析传输过来的文件信息，再渲染成页面展示给网站访问者。
访问者与网站的交互，实际上就是前端与后端进行的HTTP通信，隐藏在内部的是浏览器往后端发送URL、报文、数据等信息
从用户的角度来看，发送请求有四种形式:
- 地址栏输人URL访问。
- 超链接href属性指定URL,单击该链接访问。
- form表单在action中指定URL,单击form表单中type类型为submit的按钮提交数据。
- 通过JavaScript的事件机制调用JavaScript 函数，驱动向后端发送请求。你可以使用location 对象提供的href属性指定URL进行访问，也可以使用AJAX技术访问。
3.2 复制搭建项目 73
3.3 Bootstrap 75
Bootstrap是Twitter 公司出品的，当前广泛使用的Web UI 框架，主要用于开发响应式布局的Web项目。
Bootstrap主要的知识点是栅格化概念，即让开发者可以方便地进行网页布局。
3.3.1 静态文件引用规则 76
3.3.2 栅格化 76
3.3.3 控件 77
3.3.4 Bootstrap项目实战 77
3.4 jQuery 79
jQuery是一个JavaScript 框架，封装原生的JavaScript 函数，创建了一整套新定义的方法来简化JavaScript的DOM操作。
3.4.1 常用API 79
3.4.2 jQuery项目实战 80
3.5 iframe页面复用技术 82
3.6 AJAX 84
3.6.1 AJAX特性 85
传统前后端通信的架构和流程，如图所示，
第一步，浏览器发起请求，以Java语言实现后端程序为例，Tomcat 监听8080端口发来的信息，并将接收到的请求作为线程交由Servlet 处理。第二步，Controller 接收到请求后，即调用Model,比如调用Service 层或Dao层来访问数据库，当然第二步不是必需的，也可以直接执行第三步，即转发到JSP。因为JSP是嵌人HTML的脚本语言，会先将JSP中的Java片段解释成文本信息，然后将整个JSP文档作为信息响应给浏览器，即完成第四步。此时响应的信息只包含HTML，CSS, JavaScript 及文本信息，浏览器接收之后便可以解释并执行这些前端代码，渲染出对应的UI界面，完成最终的第五步。
3.6.2 AJAX项目实战 86
3.6.3 模态框 88
3.6.4 JavaScript UI介绍 89
Bootstrap是一个CSS UI框架，主要提供各种UI控件，但不提供该控件展示数据的方法。
行业中还流行一种Web UI框架，其不仅提供各种UI控件，还提供各个控件的新中访问方法和操作方法，因为其是通过JavaScript动态生成的HTML和CSS来实现的，所以一般称它们为JavaScript Ul框架，其中常见的有jQuery EasyUI和Lay UI。
使用Vue实现项目时用到JavaScript UI中的ElementUI框架。
3.7 本章总结 91
第4章 Spring Boot实战与原理 92
4.1 Spring Boot开发 92
4.1.1 项目结构 92
4.1.2 处理JSP 95
4.2 配置文件 98
4.2.1 properties和YAML 99
4.2.2 Java Config 101
4.3 Spring Boot项目运行 103
4.3.1 内置Web容器 103
4.3.2 热部署 104
4.3.3 启动类 105
4.4 Spring Boot常用推荐技术 106
4.4.1 HikariCP数据库连接池 106
4.4.2 Logback日志 108
4.5 Spring Boot原理与源码分析 112
4.5.1 依赖与版本管理 112
4.5.2 @SpringBootApplication注解 114
4.5.3 Spring Boot启动流程 115
4.6 本章总结 122
第5章 Thymeleaf 123
5.1 显示层技术演变 123
5.1.1 静态网页 123
5.1.2 CGI 124
开发者便想到是否可以把数据存储在数据库表中，通过编程语言开发一个程序来监听某个端口号，当有请求访向该端口号时，程序就根据请求查找表中的数据并组织成HTML代码，再响应给用户的浏览器。这个想法很快得以实现，即CGI ( Common Gateway Interface,公共网关接口)技术。
5.1.3 Servlet 124
Applet 的功能与后来浏览器Flasher插件的相似，对大量频繁的前后端数据交互并不是非常友好，而且需要将Java的运行环境安装在客户端的本地，但在当时的网速下，几十兆的Java运行环境的下载让人“望而生畏”。
Servlet技术的思路和CGI的一致，而Servlet
容器会监听服务器端口号，并将接收的和要响应的数据分别封装成request对象和resporse
对象。服务器转变为req消息？
5.1.4 JSP 125
JSP是一种嵌入在HTML语言中的脚本语言。在运行期间，它会被Servlet 容器在后端解析为Servlet 对象。 JSP不是Sun公司的首创，而是微软公司率先在ASP上做的创新，即JSP是借鉴ASP后的产物。
5.1.5 模板引擎 126
5.1.6 模板引擎对比 127
因为JSTL本质上是翻译成JSP,而JSP又会被解析成Servlet,这就导致开发效率较低，而且必须依赖于Web容器，所以有些第三方公司推出了自己的模板引擎，如Velocity, FreeMarker, Thymeleaf 等，它们通过将Java 对象解析成HTML文档，大大提高了工作效率。
5.1.7 前后端分离 128
前后端分离的开发与部署，是最近几年兴起的一项技术，即后端程序不再负责页面的转发，只提供返回JSON数据的Web访问接口，没有了视图显示层的概念。
5.2 Thymeleaf介绍 129
5.2.1 Thymeleaf特点 129
5.2.2 环境搭建 130
5.3 Thymeleaf详解 132
5.3.1 指令与显示 132
5.3.2 表达式 133
5.3.3 表达式运算 134
5.3.4 选择分支 136
5.3.5 循环 137
5.3.6 设置属性值 138
5.3.7 CSS修饰 140
5.3.8 片段 141
5.4 Thymeleaf高级特性 141
5.4.1 全局工具对象 141
5.4.2 内联操作 143
5.5 Thymeleaf项目实战 144
5.5.1 显示页面 144
5.5.2 新增页面 145
5.5.3 修改页面 146
5.6 本章总结 147
第6章 Spring Data JPA 148
6.1 相关技术介绍 148
ORM是对象关系映射，是一种思想， 即通过类和数据表映射、属性和字段映射、对象和数据表记录映射，从而实现以面向对象编程的思想和风格来操作关系型数据库的目的。用Java语言实现的ORM框架有Hibernate和TopLink等，其中以Hibernate最为知名。
6.1.1 Spring Data 148
6.1.2 Hibernate 149
Hibermate是澳大利亚程序员Gavin King在2001年创造的一个面向关系型数据库的Java持久层框架，它将实体类与数据库表建立映射关系，是一个全自动的ORM框架。Hibernate在底层封装了JDBC操作，对开发者提供简洁的、面向对象操作的API使用这些API可以自动生成SQL语句并连接到数据库执行，还可以将执行结果转换成面向对象的数据类型。
6.1.3 JPA 150
6.1.4 Spring Data JPA 150
Spring Data JPA是Spring 根据ORM思想在JPA规范的基础上封装的套新的JPA应用规范，也是要靠Hibernate, OpenJPA 等ORM框架实现的一种解决方案。
6.2 Spring Data JPA详解 151
6.2.1 环境搭建 151
6.2.2 实体类 152
6.2.3 Repository接口 154
6.2.4 基本增删改查 156
6.2.5 方法命名查询 158
6.2.6 JPQL 159
6.3 关联关系 163
6.3.1 多对一 163
6.3.2 一对多 167
6.3.3 多对多 170
6.4 Spring Data JPA项目实战 171
6.4.1 实体类开发 171
6.4.2 DAO层开发 174
6.4.3 Service层及动态条件查询 174
6.4.4 视图层开发 176
6.5 本章总结 180
第7章 Redis 181
7.1 Redis介绍 181
7.1.1 Redis特点 182
7.1.2 Redis数据结构 182
7.2 Redis详解 183
7.2.1 安装Redis 183
7.2.2 Redis命令 183
7.3 Spring Boot操作Redis 185
7.3.1 Spring Data Redis 185
7.3.2 Redis Repository 191
7.4 Spring Cache 196
7.4.1 Spring Cache介绍 197
7.4.2 Spring Cache详解 197
7.4.3 Spring Cache项目实战 199
7.5 本章总结 202
第8章 Spring Security 203
8.1 安全框架 203
安全框架主要是解决应用系统中的两类问题:认证和授权。其中认证就是通常所说的登录，即判断该用户是否是系统的合法用户;而授权就是权限设计与验证，即判断该用户是否具备访问系统中某些资源的权限。
8.1.1 安全框架比较 204
8.1.2 RBAC详解 204
8.1.3 Spring Security环境配置 207
8.2 认证 207
8.2.1 YAML存储用户 208
8.2.2 Spring Security Config 208
8.2.3 配置登录 210
8.2.4 内存式用户 213
8.2.5 数据库式用户 214
8.2.6 加密技术 215
将固定的字符串“alan”作为盐，以增强代码的安全性。
因为经过MD5加密后的密文是不可逆的，而相同明文的加密结果是一致的，这就导致很多简单的密码，如“123"“12346"经过MD5加密后的密文，可以很容易通过“MDS明文密文对照表”查到对应的明文，所以最好通过加盐的手段将用户输人的密码进行复杂化处理。
8.3 授权 219
8.3.1 授权配置 219
8.3.2 Config方式 223
8.3.3 注解方式 225
8.3.4 过滤URL方式 226
8.4 视图层控制 230
8.5 本章总结 231
第9章 Vue基础 233
9.1 Vue介绍 233
9.1.1 MVVM思想 234
MVVM思想把每个页面分成M (Model)、V (View)和VM ( ViewModel),其中VM是核心，是M和V之间的调度者。通过ViewModel, View 和Model可以实现数据的相互影响。
Model保存的是每个页面中单独的数据，形式上可以是JavaScript的变量、对象和数组。
View是指页面中的HTML标签控件，如table, div, form 标签元素等。
ViewModel充当调度者，协调Model和View之间的数据和渲染的关系，Model 和View不再直接关联。
双向绑定技术的底层实现依然是用JavaScript DOM编程，一般是通过观察者模式对Model和View进行关联绑定。当Model的数据发生变化时，观察者模式会将View重新谊染。反之，当View通过用户的操作发生改变时，会对应修改Model中的数据，这样就能一直保持Model和View的一致，从而实现数据和显示控件的双向绑定。
9.1.2 前端三大框架介绍 235
9.2 DOM编程与MVVM编程对比 235
9.2.1 改变元素内容案例 235
9.2.2 表单与表格案例 238
9.3 Vue语法 240
9.3.1 Vue对象和文本渲染 240
9.3.2 选择分支 241
9.3.3 循环 243
9.3.4 CSS处理 244
9.3.5 事件 245
9.3.6 表单 246
9.4 Vue项目实战 247
9.4.1 Vue环境搭建 247
9.4.2 员工展示 248
9.4.3 条件查询 250
9.4.4 选中表格数据 251
9.4.5 改造按钮与删除员工 252
9.4.6 新增员工 253
9.4.7 修改员工 254
9.5 本章总结 254
第10章 RESTful 255
随着互联网的出现，软件面临在不同电脑上进行数据交互的情况，于是出现了经典的C/S(客户端/服务器架构软件。随着万维网技术的诞生，对于用户上网来说，这种技术操作方便，可以迅速获取自己想要的资源。这也导致了B/S (浏览器/服务器)架构系统的蓬勃发展，出现了如谷歌、淘宝网等超大型的Web应用系统。如果将浏览器当作一个软件，B/S 架构也是一一种特殊的C/S架构。
简单来说，Web服务就是服务器如何向客户端提供服务，现有的实现方式有三类:
- SOA ( Service-Oriented Architecture, 面向服务架构)，它强调面向消息，如以前非常流行的Web Service技术就是SOA的一种实现。
- RPC ( Remote procedure Call,远程过程调用),它强调面向方法，如Java中最常使用的RMI ( Remote Method Invoke,远程方法调用)技术。
- REST ( Representational state transfer,表征状态转移),它强调面向资源。
10.1 RESTful介绍 256
REST的含义可以从以下三点来理解:
- 每一个URL代表种资源。
- 在客户端和服务器之间，传递这种资源的某种表现层。
- 客户端通过HTTP协议提供请求方法，并对服务器端的资源进行操作，以实现“表现层状态转换"”。
RESTful就是通过对REST加上英语的形容词词尾，表示REST风格。在行业中，一般用RESTful表示在项目中实现REST
10.1.1 RESTful原则 256
RESTful风格的六大基本原则如下:
1.C/S架构
2.无状态
3.统一的接口
4.一致的数据格式
5.可缓存
6.按需编码
10.1.2 RESTful风格URL 258
10.2 Spring MVC RESTful支持 258
10.3 RESTful项目实战 261
10.4 测试接口 265
10.4.1 HTTP Client可视化测试 265
10.4.2 HTTP Client脚本测试 267
10.5 接口文档生成工具 268
10.5.1 Swagger 269
10.5.2 Swagger项目实战 270
10.5.3 Spring REST Docs 273
10.5.4 Spring REST Docs项目实战 273
10.6 本章总结 277
第11章 前端工程化 278
11.1 前端工程化简介 278
11.1.1 前端工程化的必要性 278
在万维网流行的初期，还没有从网站开发中分离出前端开发工程师的岗位。软件开发工程师在掌握一门后端编程语言(Java, PHP, C#，Python) 的前提下一般还需要先会使用ExtJS, jQuery, EasyUl 等前端框架，然后利用模板引擎搭配AJAX通信完成构
建页面的工作。如果页面要求特别漂亮，还需要UI设计师给出网站设计图，并提供设计稿中的各项素材。
最初，在移动设备的App开发中，不同操作系统的App只能通过使用系统支持的语言访问它提供的API进行开发工作，这样就出现了Android开发工程师、ios 开发工程师等不同操作系统的App界面开发工程师。
11.1.2 前端工程化的现状 279
工程是指通过最少的人力、财力和时间完成复杂的、有实际应用价值的项目。在完成这个项目的过程中，所用到的科学的和数学的方式方法，就是工程学中需要不断积累、群空和更新的内容。
前端工程化是指前端项目可以独立执行整个软件工程中所定义的生命周期的所有环节:可行性分析、需求分析、设计、开发、测试、运维。
前端工程化必然面临着前后端分离的问题，即前后端独立部署。当浏览器访问页面时，其实访问的是前端服务器，即前端服务器管理页面。在页面上，如单击按钮获取JSON数据的操作，就是发起异步请求访问后端服务器。
11.2 前端工程化技术概览 280
11.2.1 ECMAScript 280
网景公司将JavaScript提供给ECMA( European Computer Manufacturers Association,欧洲计算机制造商协会)来管理维护。ECMA对其制定标准，并推出了ECMAScript。
11.2.2 NodeJS 280
NodeJS也被称为node.js,是一个基于 谷歌V8引擎的JavaScript运行环境，可以使JavaScript脱离浏览器环境在服务器环境运行。
11.2.3 npm 281
npm相当于Java中的Maven,是NodeJS官方提供的包管理工具。
11.2.4 Webpack 281
Webpack是一个模块打包器，认为HTML, CSS, JavaScript, 图片等文件都是资源，每个资源文件都是一个模块( module )。Webpack 就是根据模块之间的依赖关系，通过loader (加载器)和plugins (插件)对资源进行处理，打包成符合生产环境部署的前端资源。
11.2.5 Babel 281
11.2.6 Vue CLI 282
Vue CLI是Vue官方提供的项目创建工具，也被称为Vue项目脚手架工具，利用它可以快速创建Vue项目。
11.3 ECMAScript语法 282
11.3.1 let和const 282
11.3.2 定义对象 283
11.3.3 import和export 285
11.3.4 箭头函数 286
11.4 Vue前端工程化环境搭建 288
11.4.1 NodeJS 288
11.4.2 npm 288
11.4.3 Webpack 288
11.4.4 Vue CLI 289
11.4.5 WebStorm 289
11.5 创建Vue项目 289
11.5.1 Vue CLI命令行 289
11.5.2 Vue项目欢迎页面代码解析 295
11.6 本章总结 298
第12章 Vue高级 299
12.1 组件 299
12.1.1 定义组件 300
12.1.2 复用组件 301
12.1.3 组件传参 304
12.2 路由 307
路由是一个比较广义和抽象的概念，其本质就是对应关系，而在JavaScript和PHP等语言中，路由特指URL和代码文件之间的映射关系。
12.2.1 定义路由 307
12.2.2 路由跳转 309
通过路由跳转可以实现组件的切换，从用户的角度来说，就是页面的跳转。
12.2.3 嵌套路由 312
12.2.4 路由传参 313
12.3 axios 313
axios是一个基于Promise管理的AJAX库。
12.4 前后端分离项目实战 315
12.4.1 创建前端项目 315
12.4.2 引入依赖 316
12.4.3 员工管理模块 318
12.4.4 解决跨域问题 319
12.4.5 Index组件 320
12.5 本章总结 322
第13章 Element UI 323
13.1 Element UI介绍 323
Element UI 是国内饿了么公司推出的一套开源的、基于Vue的UI框架，它不仅提供了静态UI控件，而且还提供了一套更加方 便的绑定数据的API。
13.1.1 Element UI特点 324
13.1.2 Element UI案例 324
13.1.3 搭建环境 325
然后根据提示通过npm安装Element UI,并在src/mainjis 中导人Element UI。
import ElementUI from 'element-ui '
import 'element-ui/lib/ theme-chalk/ index.css'
Vue.use (ElementUI) ;
13.2 Element UI 项目实战 326
13.2.1 首页布局 326
13.2.2 导航栏 328
13.2.3 表格 329
13.2.4 查询表单 331
13.2.5 按钮 333
13.2.6 弹出框提示 334
13.2.7 新增员工表单 335
13.2.8 自消失弹出框 336
13.3 本章总结 338
第14章 SPA富客户端 339
SPA ( Single Page Web Application，单页Web应用)是近两年比较热门的话题。如果想使用后端返回页面的传统方式实现SPA, 则是异常困难的，因为要使用JavaScript局部刷新组织HTML文档。就算是使用Lay UI和jQuery EasyUl等传统JavaScript框架，
因为页面是放在后端应用程序中管理的，这就要为页面提供后端访问的URL,所以实际上也很难实现纯粹的SPA系统。例如，我们之前使用Vue开发的项目实际上已经是SPA应用了。注意，不要被它多个组件文件的表象所迷惑，当在第17章中对项目打包发布时，你会发现项目最终会被Webpack打包成一个index.html页面。
RIA ( Rich Internet Applications,富因特网应用程序),又被称为富客户端技术。它让Web前端网页模仿C/S架构程序,把原来需要页面跳转切换的实现改由弹出窗口实现，从而形成更好的用户体验。如果使用原生的HTML和CSS设计，则需要开发者自己开
发标签页和弹窗。
14.1 SPA介绍 339
SPA,是指只有一个HTML页面的网站系统，但是它呈现给网站访问者的效果却是多页面的。但是从代码级别来看它们其实都在一个index.html中。
它的实现原理是Vue和Webpack会将项目中的组件、JavaScript 等文件整理成一个HTML页面，当访问者访问该HTML页面时，JavaScript 会根据访问者与网页的交互动态更新该页面的控件和样式，并在浏览器上显示不同的页面效果。
SPA风格项目的优点如下:
适合前后端分离开发:服务端提供RESTful风格的Web接口，前端请求该接口来获取数据并使用JavaScript进行局部刷新渲染。
其缺点如下:
首页加载慢: SPA 会将JavaScript和CSS打包成一个文件，并在加载页面显示时加载打包文件，那么如果打包文件较大或者网速较慢，则用户体验不好。
14.1.1 SPA优缺点 340
14.1.2 富客户端设计 340
富客户端的设计方案是，网站提供一个主页，主页上有一个菜单栏， 其可以是纵向的也可以是横向的。单击菜单栏上的选项可以在主区域打开对应的标签页，标签页面是系统功能模块的展示，还提供搜索、新增、修改、删除按钮。
14.2 富客户端项目实战 341
14.2.1 Index视图组件开发 341
14.2.2 标签页设计 342
14.2.3 标签页优化 344
14.2.4 弹出框 346
14.2.5 员工组件重新设计 347
14.2.6 组件解耦重构 350
14.3 本章总结 353
第15章 前后端分离权限处理 354
在默认的非同域环境下，由于浏览器无法共享Cookie,因此基于Cookie的Session在前后端分离架构中无法使用，而传统Web项目的认证和授权的解决方案是将用户权限放在Session中的，故该解决方案在前后端分离项目中已经不再适用。
15.1 跨域资源共享 354
15.1.1 跨域引发项目问题 354
15.1.2 浏览器同源策略 357
浏览器同源策略是一种约定， 是浏览器最核心，也是最基本的安全功能。它由网景公司率先提出，该策略要求浏览器认为相同的协议名、城名(局城网内则是主机名或IP地址)、端口号的URL是同源网站，反之则是非同源网站。只有同源的网站才可以进行AJAX和Cookie操作，而对超链接、JavaSeript 和CSS的引用则不需要同源限制。
前后端分离项目的架构图，如图所示，在我们的学习环境下，因为浏览器、前端服务器和后端服务器都部署在同一台电脑上，所以主机名都为localhost, 协议名都为HTTP。其中前端服务器的端口号是8080，后端服务器的端口号是8090,故浏览器首先会访问8080端口的前端服务器得到页面，再从页面中访问8090端口，这时则认为8090端口的URL是不同源的，限制访问。
要解决这一问题，可以使用JSONP、反向代理、CORS （Cross-origin Resoure Sharing,跨城资源共享）等多种解决方案。
15.2 反向代理 358
15.2.1 反向代理原理 358
以前后端分离架构项目为例，如图所示，当浏览器发起http://localhhost:8080请求时，是请求前端服务器响应页面。而当发起http://localhhost:8080/api请求时，是由前端服务器的代理服务来处理，并由它发起http://localhhost:8090请求到后端服务器。
使用反向代理可以在前端服务器上进行配置，在第17章项目部署中会使用Nginx部署
前端项目。
15.2.2 ProxyTable 359
ProxyTable是Vue Cli提供的解决方案，底层使用http-proxy-middleware。
http-proxy-middleware是一个基于NodeJS实现的HTTP代理中间件，当浏览器发送已经定义好的URL时，http-proxy-middleware会接收到，并由它发送到真正的后端服务
足接收到响应后再由它交给前端服务器进行处理。
在前端项目的根目录下，新建vue.config.js文件，并在文件中添加配置反向代理的代码配置“/api"路径对应的是http://localhhost:8090域。这样，当浏览器通过axios发起请求且URL以“/api" 开头时，不会直接往后端服务器发送，而是先发送到前端服务器，然后前端服务器再向后端服务器发起请求。因此，对于浏览器而言，它只知道前端服务器，故不会出现跨域问题。
15.3 CORS 360
CORS是由W3C推出的解决非同源网站进行交互的方案。CORS 允许浏览器和服务器交互HTTP头部信息，从而决定跨域请求或响应是否有权限。
当前，所有主流浏览器都支持CORS,即浏览器端的CORS通信过程都是内部自动完成的，不需要额外的代码参与。
15.3.1 CORS原理 360
15.3.2 CORS项目实战 362
15.4 JWT 364
在网站的应用上会频繁出现这样的场景:用户登录之后，网站要记录该用户的登录状态，并且保存它所有的用户名、角色、权限等信息，但HTTP协议是一种无状态协议。
因此，Session 很难得到推广，而JWT的认证方式则应运而生。
JWT( JSON Web Token )是为了在网络应用环境间传递声明而执行的一种基于JSON
的开放标准的令牌JWT被设计得紧凑且安全特别适用于分布式站点的单点登录( SSO)
场景。JWT可以直接被用于认证，也可以被加密处理。
15.4.1 JWT原理 366
15.4.2 JWT项目实战 367
15.4.3 axios拦截器 374
15.5 前端界面级权限控制 376
15.5.1 注销 377
15.5.2 菜单级权限 377
15.6 Vuex 381
15.7 本章总结 383
第16章 项目完善及补充技术 384
16.1 分页 384
一般而言，应用系统中的多条数据都需要分页显示，如商城中的商品、贴吧中的帖
子。与将数据全部显示相比，分页显示有以下好处:
而使用分页技术，如每页只查询10条数据，则会大大减轻服务器的压力。
根据用户的阅读习惯，一般也只会阅读前几十条数据，如果找不到想要的数据，则
会通过更精确的条件查询。
从页面排版来看，页面固定显示，如10条数据，比显示不固定的成千上万条数据
要简洁明了，且便于用户操作。
16.1.1 后端实现 384
分页本质上是对数据库进行区间查询，即根据前端发来的当前页码，计算出要从数据库中查询的起止数据。
16.1.2 前端实现 387
16.2 CreateTime和ModifyTime 389
16.3 文件上传 390
16.3.1 Spring MVC接收文件 391
16.3.2 表单上传文件 393
16.3.3 AJAX上传文件 395
16.3.4 前后端分离上传文件 397
16.4 Lombok 399
16.5 任务调度 402
任务调度有时也被称为定时任务，是指基于给定的时间点、时间间隔和执行次数自动执行的任务。
16.5.1 Spring Task 402
16.5.2 Quartz 408
Quartz是OpenSymphony 开源组织推出的-一个功能完善且强大的开源任务调度框架。
Quartz的三个核心要素及其关系如图所示:
Scheduler:任务调度器。
Trigger:触发器，用于定义任务调度的时间规则。
Job:任务，即被调度的任务。
16.6 Hash和History 412
16.6.1 Hash和History的原理 413
16.6.2 History项目实战 414
16.7 本章总结 415
第17章 部署 416
17.1 前端部署 416
因为Vue CLI创建项目时会生成基于Webpack的vue-cli-service 服务器，其可以自动部署Vue项目，以便验证和调试程序。但是在项目开发完，就不能再使用vue-cli-service
服务器，而是需要将Vue打包生成静态文件放到某个Web服务器下运行。
17.1.1 Vue打包与后端混合部署 416
打包的文件会放到项目根目录下的dist文件夹中。项目中原来的文件会消失，取而代之的是前端语言所应该有的CSS、字体、JS、HTML文件，这就是Webpack进行打包
所完成的工作。
可以发现， 打包完毕后的Web前端项目只有一个 index.html 文件，而Vue项目开发
的组件文件、 路由文件等全部被转换成js文件，这就是Vue所实现的SPA单页面应用程序。
Vue项目最终可以部署到任意提供HTTP服务的Web服务器中，如Nginx。
当然，还有一种前后端分离开发但混合部署的方式，即将Vue项目文件复制到Spring
Boot 项目的resource/static文件夹中。而又因为页面和RESTful接口同属于一个项
目浏览器会认为它们是同城的，所以不必考虑跨城资源共享的问题。
因为static文件夹对应的是网站访问的根目录“/”，所以访问http://localhost:8090/index.htm即可正常访问项目。
17.1.2 Nginx部署 417
将Vue打包的dist 中的所有文件复制到Nginx根目录下的html文件夹中，这时访问http://localhost/会发现并不能正常访问项目网页，还需要在Nginx中配置由路由来管理路径。
在Nginx根目录下找到.conf文件夹中的nginx.conf 文件，并在其server的{}中添加如下代码:
location / {
root html;
try_files $uri $uri/ @router;
index index.html index. htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
依政完毕后，重新启动Nginx进行访问，会发现Vue项目的页面已经可以正常访问，但是却于法正常访问后端项目的接口，即只有页面，页面上没有数据。这是因为在Vue项目的vue.config.js文件中设置的ProxyTable 是针对Vue-cli-service的反向代理，而现在项目部署在Nginx中，故同样要对Nginx进行反向代理配置。对于浏览器请求的“/api/"路径，会由Nginx分派到poxy_pass所指定的"http://localhost:8090/” 中实现反向代理的效果。
17.2 后端部署 419
传统的Java Web项目开发完毕后,是要将项目打成war包,并将war包上传到Tomcat中，由Tomcat管理运行。
17.3 Linux部署 420
17.3.1 VMware安装CentOS 420
17.3.2 安装运行环境 423
17.3.3 部署运行项目 426
17.4 最终项目展示 428
17.5 本章总结 429
浙公网安备 33010602011771号