SPRING BOOT+VUE.JS企业级管理系统实战

第 1 章 Spring Boot Vue全栈开发概述 1
1.1 全栈开发模式和前后端技术栈 1
1.1.1 全栈开发中的MVC模式和MVVM模式 2
1.1.2 前端Vue框架及其相关组件 3
1.1.3 后端Spring Boot框架及其相关组件 4
1.1.4 前端、后端与数据库之间的交互 5
1.2 搭建前端开发和运行环境 5
1.2.1 安装Node.js 5
1.2.2 npm命令介绍 5
1.2.3 搭建空白Vue项目 6
1.2.4 安装依赖包 7
1.3 搭建后端开发和运行环境 7
1.3.1 安装JDK和IDEA集成开发环境 7
1.3.2 安装MySQL和MySQL Workbench客户端 8
1.3.3 安装Redis缓存 8
1.3.4 后端项目管理工具Maven 9
1.4 跑通人事管理系统 10
1.4.1 在MySQL上配置数据库和数据表 10
1.4.2 安装编译和运行前端项目 13
1.4.3 启动后端Spring Boot框架项目 14
1.4.4 观察前端页面 15
1.5 实践练习 16
第 2 章 Vue.js实例和指令 17
2.1 认识Vue.js实例 17
2.1.1 通过范例了解实例 17
2.1.2 在实例中定义和使用方法 18
2.1.3 Vue.js实例的生命周期及其钩子函数 19
2.2 Vue内置指令 20
2.2.1 v-text和v-html指令 20
2.2.2 v-show指令 21
2.2.3 v-bind指令 22
2.2.4 v-model指令 23
2.2.5 v-once和v-pre指令 24
2.2.6 条件渲染指令 25
2.2.7 循环渲染指令 27
2.3 自定义指令 28
2.3.1 钩子函数 28
2.3.2 开发自定义指令 28
2.3.3 以动态方式传入参数 29
2.4 实践练习 30
第 3 章 在Vue.js框架中引入element-ui组件 31
3.1 在Vue.js项目中引入element-ui 31
3.1.1 在package.json中引入依赖包 31
3.1.2 element-ui常用组件介绍 32
3.2 首页中用到的element-ui布局类组件 33
3.2.1 el-row和el-col表格组件 33
3.2.2 el-link超链接组件 35
3.2.3 element-ui组件整合HTML与SCSS 35
3.3 登录页面用到的element-ui组件 36
3.3.1 el-form和el-form-item表单类组件 36
3.3.2 el-input输入框组件 37
3.3.3 el-button命令框组件 38
3.3.4 el-checkbox选择框组件 39
3.3.5 前端代码整合Vue.js代码 39
3.4 业务页面用到的element-ui组件 40
3.4.1 el-table表格组件 40
3.4.2 el-form表单组件 41
3.4.3 命令框组件 42
3.4.4 对话框组件 43
3.5 实践练习 44
第 4 章 Vue.js方法、监听器和事件处理修饰符 45
4.1 Vue.js方法 45
4.1.1 定义和使用方法的参数 45
4.1.2 组件与处理方法的绑定方式 46
4.2 监听器 47
4.2.1 监听属性 48
4.2.2 监听对象 49
4.2.3 通过监听器绑定属性和方法 50
4.3 事件处理方法的修饰符 51
4.3.1 stop阻止事件扩散的修饰符 51
4.3.2 capture捕获事件的修饰符 53
4.3.3 只执行一次操作的once修饰符 54
4.3.4 只触发本处理方法的self修饰符 55
4.3.5 处理按键事件的修饰符 56
4.4 实践练习 58
第 5 章 前端组件与前端布局 59
5.1 Vue实例与前端组件 59
5.1.1 从页面上观察Hamburger组件 59
5.1.2 分析Hamburger组件代码 60
5.1.3 使用Hamburger组件 62
5.1.4 通过props和$emit实现组件间的交互 62
5.2 页面上方导航组件分析 63
5.2.1 导航组件的构成 63
5.2.2 Breadcrumb组件分析 63
5.2.3 watch监听器分析 65
5.2.4 组合成上方导航组件 65
5.3 左侧导航栏组件分析 67
5.3.1 菜单类组件分析 67
5.3.2 引入Vue Router 69
5.3.3 整合路由模块，实现导航效果 70
5.4 业务功能组件分析 73
5.5 汇总组件，布局前端页面 74
5.5.1 App.vue入口程序 74
5.5.2 在main.js中引入资源 74
5.5.3 在layout实例中布局前端元素 75
5.6 实践练习 76
第 6 章 用Vuex实现组件间的交互 78
6.1 Vuex组件分析 78
6.1.1 Vuex的重要对象 78
6.1.2 搭建Vuex开发环境 79
6.2 Vuex使用说明 80
6.2.1 state对象使用分析 80
6.2.2 与computed整合 82
6.2.3 getter和mapGetters 82
6.2.4 用mutation修改全局属性 84
6.2.5 用action异步修改全局属性 86
6.3 Vuex在人事管理项目中的用例 88
6.4 实践练习 90
第 7 章 搭建Spring Boot项目的基本框架 91
7.1 Spring Boot概述 91
7.1.1 Spring Boot是什么 92
7.1.2 Spring Boot架构与MVC模式 92
7.1.3 Spring Boot与前端项目的交互方式 93
7.2 搭建Spring Boot开发环境 93
7.2.1 安装JDK开发环境 94
7.2.2 安装IDEA集成开发环境 95
7.2.3 确认IDEA集成Maven工具 96
7.3 搭建脚手架项目 97
7.3.1 创建基于Spring Boot的脚手架项目 97
7.3.2 通过pom文件引入依赖包 98
7.3.3 编写启动类 99
7.3.4 编写控制器类 99
7.3.5 启动项目、发送请求并观察效果 100
7.3.6 对Spring Boot项目的说明 100
7.4 人事管理后端项目结构概述 101
7.5 实践练习 102
第 8 章 后端控制器和Swagger组件 103
8.1 通过HTTP协议对外提供服务 103
8.1.1 HTTP协议概述 103
8.1.2 HTTP常用返回码 104
8.1.3 HTTP请求动作和增删改查请求 104
8.2 实现后端控制器方法 105
8.2.1 通过注解定义控制类 105
8.2.2 @GetMapping注解与“查询”接口 106
8.2.3 @PostMapping注解与“添加”接口 108
8.2.4 @PutMapping注解与“更新”接口 109
8.2.5 @DeleteMapping注解与“删除”接口 110
8.2.6 @RequestMapping注解 110
8.3 通过Swagger展示后端接口 111
8.3.1 Swagger的作用 112
8.3.2 引入Swagger依赖包 112
8.3.3 编写Swagger配置类 112
8.3.4 通过Swagger观察API接口 113
8.4 实践练习 115
第 9 章 后端业务层和数据服务层 116
9.1 在业务层封装业务代码 116
9.1.1 业务类的构成 116
9.1.2 用@Service修饰业务类 117
9.1.3 @Autowired和依赖注入 120
9.2 ORM组件与数据服务层 120
9.3 编写基于MyBatis的数据服务层 121
9.3.1 引入依赖包，编写数据库配置代码 121
9.3.2 编写映射文件 122
9.3.3 编写mapper接口 124
9.3.4 编写Java业务模型类 125
9.3.5 使用MyBatis的要点归纳 126
9.4 编写基于JPA的数据服务层 126
9.4.1 引入依赖包，编写数据库配置代码 126
9.4.2 通过注解编写业务模型类 127
9.4.3 用JpaRepository实现数据服务层 128
9.4.4 改写业务层的代码 128
9.4.5 对比MyBatis和JPA 130
9.5 实践练习 130
第 10 章 分页、事务、Redis缓存和分库分表 132
10.1 引入分页效果 132
10.1.1 从前端获取分页参数 132
10.1.2 在后端用分页插件实现分页 133
10.1.3 通过前端观察分页效果 135
10.2 引入事务效果 137
10.2.1 用@transactional实现事务 137
10.2.2 事务隔离级别 138
10.2.3 事务传播机制 139
10.2.4 合理设置超时时间 139
10.2.5 合理设置事务的粒度 140
10.3 用Redis缓存数据 140
10.3.1 Redis的数据结构 140
10.3.2 用Redis缓存员工数据 142
10.3.3 合理设置缓存超时时间 145
10.4 MyCat组件与分库分表 146
10.4.1 分库需求与MyCat组件 146
10.4.2 搭建MyCat环境，观察分库效果 147
10.4.3 以分库的方式读写员工表 150
10.4.4 同时整合Redis和MyCat 150
10.5 实践练习 151
第 11 章 全栈系统的前后端交互 152
11.1 Axios组件概述 152
11.1.1 同步和异步交互方式 152
11.1.2 在前端引入Axios组件 153
11.2 用Axios组件实现前后端交互 153
11.2.1 在request.js中封装Axios实例 153
11.2.2 在业务类中调用Axios方法 155
11.2.3 页面发起请求，异步处理返回 157
11.3 解决跨域问题 158
11.4 Spring Security组件与安全管理 159
11.4.1 Spring Security框架说明 159
11.4.2 引入依赖包，编写配置参数 160
11.4.3 设置资源访问策略 160
11.4.4 登录流程说明 162
11.4.5 用过滤器实现Token鉴权 165
11.5 实践练习 166
第 12 章 面向切面编程、过滤器和拦截器 167
12.1 AOP概述 167
12.1.1 AOP的相关概念 167
12.1.2 AOP的范例 168
12.1.3 AOP与拦截器 170
12.2 拦截器的开发要点 171
12.2.1 拦截器的重要方法 171
12.2.2 引入多个拦截器 171
12.2.3 观察拦截器的效果 174
12.3 过滤器的开发要点 174
12.3.1 过滤器的重要方法 174
12.3.2 开发过滤器 175
12.3.3 配置过滤器 176
12.3.4 观察过滤器的效果 176
12.3.5 拦截器和过滤器的使用场景 176
12.4 基于AOP的实例分析 177
12.4.1 全局异常处理类 177
12.4.2 自定义注解 178
12.5 实践练习 180
第 13 章 整合日志组件 181
13.1 通过Logback组件输出日志 181
13.1.1 开发日志代码的注意点 181
13.1.2 日志的级别与适用场景 182
13.1.3 引入依赖包，配置Logback参数 182
13.1.4 输出不同级别的日志 184
13.1.5 观察日志输出效果 185
13.2 搭建基于ELK的日志环境 187
13.2.1 ELK组件概述 187
13.2.2 搭建ELK环境 188
13.3 后端项目整合ELK组件 190
13.3.1 向Logstash输出日志 190
13.3.2 在Kibana上观察日志效果 191
13.4 实践练习 193
第 14 章 整合Nacos服务治理组件 194
14.1 Spring Boot与微服务架构 194
14.1.1 单机版架构与微服务架构 194
14.1.2 微服务与Spring Cloud Alibaba组件 196
14.1.3 Spring Boot和Spring Cloud Alibaba的关系 196
14.1.4 后端Spring Cloud Alibaba项目的说明 197
14.2 服务治理组件Nacos概述 197
14.2.1 服务治理与注册中心 197
14.2.2 搭建Nacos环境 198
14.2.3 Nacos的可视化管理界面 198
14.3 后端Spring Boot整合Nacos 199
14.3.1 引入依赖包 199
14.3.2 编写配置文件和注解代码 200
14.3.3 观察注册中心效果 200
14.4 搭建Nacos集群 201
14.4.1 Nacos持久化 201
14.4.2 搭建集群 202
14.4.3 观察集群效果 203
14.4.4 向Nacos集群注册服务 204
14.5 整合负载均衡组件 204
14.5.1 实现负载均衡的Ribbon组件 205
14.5.2 配置负载均衡参数 205
14.5.3 Ribbon常用参数分析 206
14.6 实践练习 207
第 15 章 限流、熔断和服务降级 208
15.1 微服务架构中的安全防护需求 208
15.1.1 限流需求概述 208
15.1.2 熔断需求概述 209
15.1.3 高并发下的服务降级 209
15.2 搭建Sentinel环境 209
15.2.1 下载Sentinel组件 209
15.2.2 观察Sentinel控制台界面 210
15.3 实现限流效果 210
15.3.1 引入依赖包 210
15.3.2 编写配置文件 211
15.3.3 在方法上添加注解 211
15.3.4 通过控制台实现限流效果 212
15.3.5 观察限流效果 214
15.4 实现熔断效果 214
15.4.1 设置需要熔断的方法 214
15.4.2 设置慢调用熔断参数 215
15.4.3 设置异常熔断参数 216
15.5 实现服务降级效果 217
15.5.1 整合限流和服务降级 217
15.5.2 整合熔断和服务降级 219
15.5.3 服务降级要点分析 219
15.6 实践练习 220
第 16 章 整合Gateway网关组件 221
16.1 Gateway网关组件概述 221
16.1.1 Gateway网关组件的作用 221
16.1.2 创建网关项目 222
16.1.3 转发前端请求 223
16.1.4 网关过滤器 224
16.1.5 断言及其关键字 225
16.2 整合Nacos和Sentinel 226
16.2.1 整合后的效果图 226
16.2.2 整合Nacos组件 226
16.2.3 在网关层实现负载均衡 227
16.2.4 整合Sentinel组件 228
16.2.5 引入限流效果 229
16.2.6 分组限流 230
16.2.7 引入熔断效果 232
16.3 实践练习 233
第 17 章 整合Skywalking监控组件 234
17.1 监控服务的需求与Skywalking组件 234
17.1.1 服务监控需求分析 234
17.1.2 服务监控组件Skywalking 235
17.1.3 搭建Skywalking运行环境 235
17.2 后端项目整合Skywalking组件 237
17.2.1 回顾后端项目的框架 237
17.2.2 配置Skywalking的Agent 237
17.2.3 监控后端项目 238
17.2.4 观察监控效果 239
17.3 设置基于Skywalking的告警机制 240
17.3.1 配置告警规则 240
17.3.2 观察告警效果 242
17.3.3 通过Webhooks发送告警信息 243
17.4 实践练习 244