Spring Boot+Vue开发实战

前    言

在软件开发行业中，技术日新月异，而对于Java开发工程师来说更是体会颇深。Java开发技术可谓“你方唱罢我登场”，曾经SSH框架以低侵入、解耦合的优点一举取代Sun公司JavaEE（EJB）的地位，成为行业的标准，享有Java三大框架的盛名，一统Java 企业级开发领域近十年之久，但后来SSH逐渐被更简化、侵入性更低的SSM框架取代。这几轮更新换代的技术都是Java开发的主线技术，它们管理麻烦、配置烦琐。其他解决应用场景的技术，如安全、模板引擎、缓存等，更是层出不穷，让人眼花缭乱，难以选择，而Spring Boot的出现很好地解决了这些问题。

Spring Boot可以在项目中管理依赖、简化配置、快速运行，让开发者尽可能地从技术中解脱出来，把精力放在业务逻辑的开发中。它还推荐了一系列应用于实际场景的技术来辅助开发者快速开发，免去了他们在众多Java技术中选型的困扰。基于Spring Boot的这些优点，很多公司都开始使用它。另外，Spring Boot是一个让开发者用起来很“爽”的框架，这种用户黏度使它在未来会有越来越大的市场。

谷歌V8引擎和NodeJS的出现和发展，使Web前端工程化成为现实，也让具有MVVM思想的框架横扫Web前端开发。利用前端工程化和MVVM框架，开发者可以方便地进行前端项目的设计、开发、部署和管理。Vue作为以上技术的代表，当前在行业中有着广泛的应用。

HTML5的出现使网页的适用性变得更强，很多移动端App界面的设计也开始选用HTML5，这改变了之前面向不同操作系统来开发界面的局面，也大大节省了公司的成本。随着Web技术体系发生重大变革，出现了许多新技术。针对前端开发，Java工程师只要掌握了HTML和CSS，靠jQuery“一招鲜、吃遍天”的情况已不复存在，而掌握Vue，更是一种需要。

由此表明，对Spring Boot和Vue的学习是开发者重要且紧急的任务。

本书特色

本书会对当前软件开发中前沿、流行的Spring Boot和Vue进行全面介绍，并使用贯穿项目进行实战。鉴于Spring Boot的学习需要一定的框架基础，本书会先使用SSM框架开发项目的版，随后替换成Spring Boot，让读者通过对比来感受使用Spring Boot的好处。之后逐渐追加常见的开发技术，并和Web前端技术一起完成传统Web项目的开发。在进行前端工程化及Vue技术的讲解后，完成前后端分离架构的项目，并部署上线。

项目贯穿

本书的创新点在于以一个Alan人事管理系统作为贯穿项目，将每章所讲解的技术及时融入其中，让读者充分了解该技术在实际项目中的用处和用法。为了便于读者回顾所学的知识，新项目不会在原项目上直接修改，而是通过复制原项目来建立新项目，层叠式地追加技术，直到完成终版。除为学习技术本身而建立的项目外，Alan人事管理系统的前后端项目总数超过30个。

涉及技术广泛

本书几乎包括行业中所有的常见技术，工具上使用WebStorm和Intellij IDEA进行前后端的开发，使用npm和Maven构建前后端项目，并利用MySQL存储数据。项目开发完毕后会通过VMware搭建发行版为CentOS的Linux环境，并使用Nginx在该环境下进行部署运行。

后端技术包括Spring Boot，Spring Boot Test，Spring，Spring MVC，MyBatis，JSTL，Tomcat，Jetty，HikariCP，Logback，Log4j2，Thymeleaf，Spring Data JPA，Redis，Spring Cache，Spring Security，JWT，RESTful，Swagger，Spring Rest Docs，Mock MVC，Spring Task，Quartz，Lombok等。

前端技术包括HTML，CSS，JavaScript，jQuery，Bootstrap，AJAX，NodeJS，Webpack，Babel，ECMAScript，Vue，Vue CLI，vue-cli-service，Local Storage，Vuex，Element UI，axios等。

循序渐进

本书在面临解决相同应用场景有多个常用技术可选时，会使用不同技术来实现该功能，进行横向对比，让读者感受到各项技术的优劣势，如使用MyBatis和Spring Data JPA实现持久层，使用Spring Task和Quartz实现定时任务。

如果解决同一场景问题的技术出现了更替，但旧技术没有被完全淘汰，仍然在行业中有较广泛的使用，则会进行纵向对比，让读者明白新技术的好处。例如，使用JSTL充当模板引擎，再替换成Thymeleaf；分别使用传统Web项目架构和前后端分离架构。

本书在厘清前后端技术三十年发展脉络的基础上，让读者能够具备根据实际项目的规模、应用场景，做好恰当的架构设计和技术选型的能力。

本书面向的群体

想要学习Spring Boot的Java开发者；

想要学习以Vue为代表的Web前端开发的Java开发者；

想要学习Spring Boot和Vue开发的大学生；

想要以Java和Vue技术就业的软件开发求职者；

想要掌握Java及Web前端开发流行技术的编程爱好者。

致谢

本书是笔者从事十多年Java Web应用系统设计与开发的经验总结。在此，要感谢我曾经工作过的公司、与我共事过的同事，以及互联网上乐于分享的朋友们，因为有了你们提供的环境与无私帮助，才有了我对编程事业的热爱和对新技术的敏感与热忱。

感谢家人的理解和支持，让我本应在工作之余陪伴你们的时间里，能够专心于此书的项目开发与文字撰写。这本书能够面世，有你们很大的功劳。谢谢！

本书完成后，我进行了六次调整与校稿，但限于时间和精力，难免会有纰漏和不足之处，希望读者能够批评指正、不吝赐教。如果你在学习过程中遇到困难或疑惑，可以通过76523775@qq.com与我联系，我会尽力帮你解答。

本书采用“项目贯穿式”的形式编写，从一个实战项目入手，将知识点融入其中，循序渐进地全面介绍Spring Boot和Vue的知识点，并分析源码、剖析原理，使读者能够快速地将知识转换成技能，顺利地进行项目开发实战。软件开发技术日新月异、不胜枚举，常常让人置身其中，不知如何取舍。本书会对同类技术进行充分地对比，并厘清前后端技术三十年的发展脉络，使读者在工作中具备根据项目的规模、应用场景，做好恰当的架构设计和技术选型的能力。

曾在世界五百强公司、国内上市软件公司从事过开发、架构、管理等工作，曾在IT职业培训公司担任过Java讲师、教学总监等职务，研究方向为Java、JavaScript、Spring家族、Vue。

目 录 
第1章　Spring Boot入门 1 
1.1　Spring Boot介绍 1 
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 
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 
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 
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 
2.4.2　AOP 51 
2.4.3　对DAO层和Service层支持 52 
2.4.4　Service设计 53 
2.5　Spring MVC 54 
2.5.1　URL映射 54 
2.5.2　接收参数 56 
2.5.3　转发、重定向、响应JSON 57 
2.5.4　Controller 设计 60 
2.6　JSP 62 
2.7　部署项目 66 
2.7.1　配置Tomcat 66 
2.7.2　运行访问 67 
2.8　本章总结 68 
第3章　传统Web前端设计 69 
3.1　前端设计介绍 69 
3.1.1　网页设计技术 70 
3.1.2　网站通信技术 72 
3.2　复制搭建项目 73 
3.3　Bootstrap 75 
3.3.1　静态文件引用规则 76 
3.3.2　栅格化 76 
3.3.3　控件 77 
3.3.4　Bootstrap项目实战 77 
3.4　jQuery 79 
3.4.1　常用API 79 
3.4.2　jQuery项目实战 80 
3.5　iframe页面复用技术 82 
3.6　AJAX 84 
3.6.1　AJAX特性 85 
3.6.2　AJAX项目实战 86 
3.6.3　模态框 88 
3.6.4　JavaScript UI介绍 89 
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 
5.1.3　Servlet 124 
5.1.4　JSP 125 
5.1.5　模板引擎 126 
5.1.6　模板引擎对比 127 
5.1.7　前后端分离 128 
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 
6.1.1　Spring Data 148 
6.1.2　Hibernate 149 
6.1.3　JPA 150 
6.1.4　Spring Data JPA 150 
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 
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 
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 
10.1　RESTful介绍 256 
10.1.1　RESTful原则 256 
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 
11.1.2　前端工程化的现状 279 
11.2　前端工程化技术概览 280 
11.2.1　ECMAScript 280 
11.2.2　NodeJS 280 
11.2.3　npm 281 
11.2.4　Webpack 281 
11.2.5　Babel 281 
11.2.6　Vue CLI 282 
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 
12.2.1　定义路由 307 
12.2.2　路由跳转 309 
12.2.3　嵌套路由 312 
12.2.4　路由传参 313 
12.3　axios 313 
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 
13.1.1　Element UI特点 324 
13.1.2　Element UI案例 324 
13.1.3　搭建环境 325 
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 
14.1　SPA介绍 339 
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　组件解