Spring Boot 3+Vue 3开发实战

前    言

本书是2021年出版的《Spring Boot Vue开发实战》一书的迭代更新版。Spring Boot 3和Vue 3的版本更新导致底层与上层技术均有较大的变化，本书将和读者一起，探索、分析、实践这两大技术新版本带来的新特色与底层原理。

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

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

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

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

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

本书特色

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

项目贯穿

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

涉及技术广泛

本书几乎包括行业中所有的常见技术，工具上使用WebStorm和Intellij IDEA进行前后端的开发，使用npm和Maven构建前后端项目，并利用MySQL存储数据。

后端技术包括Spring Boot、Spring Boot Test、Spring、Spring MVC、MyBatis、Tomcat、Undertow、HikariCP、Logback、Log4j2、Thymeleaf、Spring Data JPA、Redis、Spring Cache、Spring Security、JWT、RESTful、Swagger、Lombok等。

前端技术包括HTML、CSS、JavaScript、jQuery、Bootstrap、AJAX（Asynchronous JavaScript And XML，即异步JavaScript和XML）、NodeJS、Babel、ECMAScript、TypeScript、Vue、Vite、Local Storage、Pinia、Element Plus、axios等。

循序渐进

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

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

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

章节概要

本书从技术讲解和实现项目的角度分为单体Web项目（传统Web项目）（第1～9章）和前后端分离项目（第10～17章）两大部分。

第1章 Spring Boot与贯穿项目介绍

本章主要介绍Spring Boot的发展、特性、开发环境和工具的安装，实现一个简单的Spring Boot项目，并使用Spring Boot Test进行测试；介绍本书贯穿项目Alan人事管理系统，并对其进行需求分析与设计。

第2章 Spring Boot SSM实战

本章主要介绍当前行业中流行的SSM框架，并将它和Spring Boot结合来完成贯穿项目第一版的开发。

第3章 显示层技术演变与Thymeleaf

本章主要介绍有关网站的显示技术和架构的发展历程，对比各项技术的优缺点，详细讲解Thymeleaf模板引擎的语法，并使用它为Alan人事管理系统增加视图层。

第4章 传统Web前端设计

本章主要介绍传统Web前端设计的各项技术与通信方式，使用HTML、CSS、jQuery、Bootstrap、AJAX进行前端页面的设计与开发，使贯穿项目拥有漂亮的页面，实现传统的Web项目。

第5章 Spring Boot特性与原理

通过对前四章的学习，读者可利用积累的实践经验来理解Spring Boot管理依赖、简化配置、快速运行和推荐技术的好处，并使用它推荐的HikariCP、Logback等技术。本章深入分析Spring Boot的源码，探寻它的原理。

第6章 持久层发展与Spring Data JPA

本章首先介绍持久层的发展历史和各项技术的优缺点，然后详细介绍Spring Data JPA的新增、删除、修改、查询操作，以及方法命名查询、JPQL、关联关系等，最后使用Spring Data JPA替换贯穿项目中的MyBatis。

第7章  缓存与Redis

本章主要介绍行业中流行的缓存数据库Redis，详细介绍Redis的用法，以及在Spring Boot中使用它的三种方法，即Redis Template、Redis Repository和Spring Cache。

第8章 认证、授权与Spring Security

本章主要介绍网站系统的安全问题，并使用Spring Security实现网站的认证与授权，在贯穿项目的授权中分别使用配置方式、注解方式和过滤器实现。

第9章 Vue基础

本章主要介绍MVVM思想和Vue基础语法，使用Vue替换贯穿项目中的jQuery。通过对本章的学习，读者可以掌握Vue的基本指令和数据绑定技术，在后续完成对Vue高级的学习后，可以一起实现前端工程化项目。

第10章 RESTful与接口文档

本章主要介绍RESTful理论、RESTful的Spring MVC实现和Java接口文档实现技术。通过对本章的学习，读者可以掌握RESTful风格的URL设计，并使用Swagger完成Web接口化文档的编写，完成前后端分离架构的后端项目。

第11章  Vue 3 Vite TypeScript前端工程化

本章主要介绍前端工程化的概念、实现前端工程化所包含的一系列技术，如NodeJS、Vite、npm、Babel、ECMAScript、TypeScript等，并使用Vite搭建Vue的TypeScript工程化项目，同时分析Vue项目的目录结构与代码。

第12章 Vue高级

本章主要介绍Vue的选项式API、组合式API、setup语法糖、组件、路由和第三方技术，如axios。

第13章 Spring Boot Vue前后端分离项目实战

本章主要介绍实现Spring Boot Vue前后端分离项目开发，并在实战中对比Vue 3提供的选项式API、组合式API、setup语法糖的各自特点。

第14章 Element Plus

本章主要介绍Vue的第三方UI框架——Element Plus，并利用它提供的布局和控件快速搭建贯穿项目的页面，实现对Vue的简化开发，达到事半功倍的效果。

第15章 SPA富客户端

本章主要介绍SPA的概念，并在贯穿项目中利用标签页和弹出窗的形式实现富客户端网页，同时对组件进行解耦合。

第16章 前后端分离下的跨域、认证与授权

本章主要介绍前后端分离架构项目出现跨域问题、权限问题的原因及解决方案。其中，实现跨域的方法有反向代理和CORS，实现授权的有Session和JWT。另外，还利用axios拦截器、Pinia等技术实现贯穿项目的认证和授权处理。

第17章 项目完善及补充技术

本章的主要内容是对贯穿项目的功能和技术进行丰富和扩展，追加了分页、文件上传、Lombok等，并最终完成Spring 3 Vue 3实现的Alan人事管理系统。

本书面向的群体

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

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

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

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

致谢

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

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

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

朱建昕 

2023年7月

本书采用"项目贯穿式”的形式编写，从一个Alan人事管理系统入手，循序渐进，将Spring Boot 3和Vue 3的知识点融入项目中；并详细介绍各项技术、分析源码、剖析原理，使读者能够快速地将知识转换成技能，顺利地进行项目开发实战。 软件开发技术日新月异、不胜枚举，常常让人置身其中，不知如何取舍。本书对同类技术进行充分对比，并厘清前后端三十年的技术发展脉络，使读者在工作中具备根据项目的规模应用场景，做好恰当的架构设计和技术选型的能力。 本书适合Java软件开发从业人员对Java和Web前端高级知识的学习，以提升技术水平；还适合作为大学计算机、软件开发专业学生的参考用书。

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

目 录 
第1章 Spring Boot与贯穿项目介绍 1 
1.1　Spring Boot介绍 1 
1.1.1　Spring Boot特性 2 
1.1.2　Spring Initializr 3 
1.2　开发环境 4 
1.2.1　JDK 4 
1.2.2　Maven 5 
1.2.3　Gradle 5 
1.2.4　Git 5 
1.2.5　MySQL 5 
1.2.6　Eclipse 6 
1.2.7　Intellij IDEA 6 
1.2.8　在IDEA中集成Maven 7 
1.3　Spring Boot案例 7 
1.3.1　创建项目 8 
1.3.2　项目结构 9 
1.3.3　第一个案例 11 
1.4　Spring Boot Test 12 
1.5　贯穿项目的需求与设计 13 
1.5.1　Alan人事管理系统 14 
1.5.2　技术选型 14 
1.5.3　员工管理模块和部门管理模块 15 
1.5.4　权限管理模块 15 
1.5.5　数据库设计 17 
1.5.6　实体类设计 18 
1.5.7　界面设计 19 
1.6　本章总结 20 
第2章 Spring Boot SSM实战 21 
2.1　创建Spring Boot Module贯穿项目 21 
2.1.1　创建Module 22 
2.1.2　Alan人事管理系统项目结构 23 
2.2　Spring Boot简化配置 24 
2.2.1　简化Maven依赖配置 24 
2.2.2　简化SSM框架配置 27 
2.3　MyBatis 28 
2.3.1　解耦合 29 
2.3.2　参数 30 
2.3.3　关联关系 33 
2.3.4　动态语句 36 
2.3.5　DAO层设计 37 
2.4　Spring 38 
2.4.1　DI 38 
2.4.2　AOP 39 
2.4.3　Service设计 40 
2.5　Spring MVC 41 
2.5.1　URL映射 41 
2.5.2　接收参数 43 
2.5.3　转发、重定向、响应JSON 44 
2.5.4　Controller 设计 46 
2.6　本章总结 48 
第3章 显示层技术演变与Thymeleaf 49 
3.1　显示层技术演变 49 
3.1.1　静态网站 49 
3.1.2　CGI 50 
3.1.3　Servlet 50 
3.1.4　JSP 51 
3.1.5　模板引擎 52 
3.1.6　模板引擎对比 53 
3.1.7　前后端分离 54 
3.2　Thymeleaf 55 
3.3 在IDEA中复制项目并搭建环境 55 
3.4　Thymeleaf详解 57 
3.4.1　指令与显示 57 
3.4.2　表达式 58 
3.4.3　表达式运算 60 
3.4.4　选择分支 61 
3.4.5　循环 62 
3.4.6　设置属性值 64 
3.4.7　CSS修饰 65 
3.4.8　片段 66 
3.5　Thymeleaf高级特性 66 
3.5.1　全局工具对象 66 
3.5.2　内联操作 67 
3.6　Thymeleaf项目实战 69 
3.6.1　显示页面 69 
3.6.2　新增页面 71 
3.6.3　修改页面 71 
3.7　本章总结 72 
第4章 传统Web前端设计 73 
4.1　前端设计介绍 73 
4.1.1　网页设计技术 74 
4.1.2　网站通信技术 76 
4.2　Bootstrap 77 
4.2.1　栅格化 77 
4.2.2　控件 78 
4.2.3　Bootstrap项目实战 78 
4.3　jQuery 80 
4.3.1　常用API 80 
4.3.2　jQuery项目实战 81 
4.4　iframe复用技术实现首页 83 
4.5　AJAX 85 
4.5.1　AJAX特性 85 
4.5.2　AJAX项目实战 86 
4.5.3　模态框 88 
4.5.4　JavaScript UI介绍 90 
4.6　本章总结 91 
第5章 Spring Boot特性与原理 92 
5.1　spring-boot-dependencies管理依赖 92 
5.1.1　版本管理 92 
5.1.2　spring-boot-starter简化依赖 93 
5.2　简化配置 95 
5.2.1　properties和YAML 95 
5.2.2　Java Config 97 
5.3　快速运行 99 
5.3.1　内置Web容器 99 
5.3.2　热部署 100 
5.3.3　启动类 100 
5.4　推荐技术 101 
5.4.1　HikariCP数据库连接池 102 
5.4.2　Java日志发展史与Logback 103 
5.5　Spring Boot原理与源码分析 107 
5.5.1　@SpringBootApplication注解 108 
5.5.2　Spring Boot启动流程 109 
5.6　本章总结 115 
第6章 持久层发展与Spring Data JPA 116 
6.1　相关技术介绍 116 
6.1.1　Spring Data 116 
6.1.2　Hibernate 11