Vue

新书上线

大家好，笔者的新书《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》已上线，此书内容充实、材质优良，乃家中必备垫桌脚垫菜盘之良器，欢迎大家无情购买使用，欢迎大家共同学习交流，欢迎大家提出改进意见。

内容简介：

本书从项目实践出发，手把手、心贴心地带领读者从零开始，一步一步地开发出功能相对完整的权限管理系统，从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇，对系统的功能、架构和界面进行介绍，对系统的安装运行给出指南，对涉及的关键技术进行简单介绍。第二篇为后端实现篇，从数据库设计和搭建开发环境开始，全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现篇，从搭建开发环境开始，全面细致地讲解权限管理系统的前端实现全过程。 本书适合前后端开发人员和全栈工程师阅读，也适合高等院校和培训学校相关专业的师生教学参考。

购买途径

通过天猫、京东、当当等各大网站，搜索 “Spring Boot+Spring Cloud+Vue+Element” 或 “手把手教你开发权限管理系统” 等相关关键字，即可检索到相关图书购买链接，为方便大家查找，下面附上一些简单查找流程示例。

京东

参考链接：

https://item.jd.com/49029589963.html

https://item.jd.com/48751078393.html

 

当当

参考链接：

http://product.dangdang.com/1438252364.html

 

天猫

参考链接：

https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.16.a4721049QUevoi&id=595707200013

https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.6.a4721049QUevoi&id=596116466076

 

相关介绍

前    言

纵观当今Web开发领域，优秀的后端开发语言虽有不少，但是Java依然独占鳌头，连续多年占据了行业的半壁江山，特别是随着Spring Boot和Spring Cloud的诞生和流行，集智慧于大成的Spring技术体系成为行业开发的首选之一。在前端领域，也是各种框架齐出，技术更新日新月异，在众多的技术和框架中，Vue.js、React和Angular.js算是当前核心框架中的佼佼者，各自占有不少市场份额 。市场代表需求，技术代表能力。显而易见，在当今开发领域中，谁能更好地掌握这些主流开发技术，谁就能在跟别人竞争的时候多一些筹码，谁就能获得更好的就业机会、薪资报酬和发展空间。

如何能更好地掌握行业技术呢？抱着技术书籍埋头苦读？当然不能死记硬背，我们这样的开发人员，除了要掌握基础理论，最重要的还是要多实践，实践出真知嘛，大家都知道。要想更好地掌握开发技术和知识，就要进入项目多写代码，当然，对于大多数人来说，最好的成长方式，就是能够进入优秀的项目，跟着优秀的前辈，产出优秀的代码。然而现实是，很多人并不能够进入优秀的项目，也无法跟着优秀的前辈学习优秀的代码。他们苦于想要入门而又找不到门道，想要成长而又找不到方向，往往一不小心就在学习的路上混沌迷茫，不知所措，遂而丧失了信心，萌生了怯意。

关于本书

本书为广大开发者量身打造，从项目实践出发，选用当前各种主流的技术，手把手、心贴心地带着读者从零开始，一步一步地实现一个完整的后台权限管理系统。通过整个管理系统的开发和实践，让读者在学成之后能够熟悉和掌握当前的一些主流技术和方向，且在后续的工作中拥有自主搭建开发环境和完成整个系统开发的能力。后台权限管理系统是各种业务系统的基础配备模块之一，且整个大业务系统中的其他系统大多都要依赖权限系统模块，所以权限管理系统在整个业务系统中的重要性就不言而喻了。

本书的示例系统称为Mango权限管理系统，诞生于本教材实践项目。Mango采用前后端分离架构，前端采用Vue.js作为核心框架，并使用同样非常流行的Element作为UI框架。前端开发基于NPM环境，使用Visual Studio Code作为IDE编写代码。前端使用Mock可以模拟后台接口数据，可以在没有后台的情况下使用大部分功能，所以也适合不会部署后端的开发人员学习和使用。后端则采用Spring Boot + Spring Security + Spring Cloud + MyBatis的主体架构，基于Java环境采用Eclipse开发，使用Maven工具构建，支持使用Swagger进行后台接口测试。总而言之，Mango是一个基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现，采用前后端分离架构的权限管理系统，也是一款采用当前主流技术实现的界面优雅、架构优良、代码简洁、注释完善、基础功能相对完整的Java快速开发平台。读者可以以此为范例从中学习和汲取技术知识，也可以基于此系统开发和实现具体生产项目。

本人知识有限，经验尚浅，书中若有谬处，烦请指正，不胜感激。回首当年，我也曾为如何入门而困扰，也因难以进步而迷茫，聊著此书，只为可以帮助更多的人在学习和开发中寻得门道、取得进步和成长，果有人能因此书而获益，那就是功德无量了。本书适用于业界前后端开发人员和全栈工程师以及广大想要学习和掌握前后端技术的人员，特别适合那些想要快速提升项目实践经验，熟悉和掌握架构开发整个业务系统能力的广大开发者。读者在学习和开发的过程中若有什么疑问，欢迎通过电子邮件提问或群聊咨询。

关于作者

徐丽健，毕业于广东金融学院，拥有多年Java开发和系统架构经验，开源技术爱好者和开源代码贡献者，闲暇之余爱写文字，博客园不知名技术博主。现在国内任科技企业的系统架构师一职，主持企业软件的系统架构和产品研发工作。

代码下载

本书示例代码需要从gitee上下载，地址如下：

https://gitee.com/liuge1988/mango-platform

如果下载有问题，或者对本书有疑问和建议，请加入本书QQ技术交流群沟通。

本书目录

第一篇  系统介绍篇
第1章  权限管理系统介绍    3
1.1  系统简介    3
1.2  系统架构    4
1.2.1  前端架构    4
1.2.2  后端架构    4
1.3  系统界面    5
1.3.1  登录页面    5
1.3.2  系统主页    5
1.3.3  用户管理    6
1.3.4  机构管理    6
1.3.5  角色管理    7
1.3.6  菜单管理    7
1.3.7  字典管理    8
1.3.8  系统配置    8
1.3.9  登录日志    8
1.3.10  操作日志    9
1.3.11  注册中心    9
1.3.12  接口文档    9
1.3.13  数据监控    10
1.3.14  服务监控    11
1.3.15  备份还原    11
1.3.16  主题切换    11
第2章  安装指南    13
2.1  前端安装指南    13
2.1.1  开发环境    13
2.1.2  技术选型    13
2.1.3  项目结构    13
2.1.4  编译运行    14
2.2  后端安装指南    14
2.2.1  开发环境    14
2.2.2  技术选型    15
2.2.3  项目结构    15
2.2.4  编译运行    15
第3章  关键技术    17
3.1  Spring Boot    17
3.2  Spring Cloud    17
3.2.1  Spring Cloud简介    17
3.2.2  Spring Cloud架构    17
3.2.3  Spring Cloud组件    18
3.2.4  参考教程    19
3.3  Spring Security    19
3.4  MyBatis    19
3.5  Vue.js    19
3.6  Element    20
第二篇  后端实现篇
第4章  数据库设计    23
4.1  数据库表设计    23
4.2  数据库表关系    23
4.3  数据库表结构    24
4.3.1  用户表（sys_user）    24
4.3.2  角色表（sys_role）    25
4.3.3  机构表（sys_dept）    25
4.3.4  菜单表（sys_menu）    26
4.3.5  用户角色表（sys_user_role）    26
4.3.6  角色菜单表（sys_role_menu）    26
4.3.7  角色机构表（sys_role_dept）    27
4.3.8  字典表（sys_dict）    27
4.3.9  配置表（sys_config）    28
4.3.10  操作日志表（sys_log）    28
4.3.11  登录日志表（sys_login_log）    28
第5章  搭建开发环境    30
5.1  开发环境准备    30
5.1.1  安装JDK环境    30
5.1.2  安装Eclipse开发工具    30
5.1.3  安装MySQL数据库    30
5.1.4  安装Maven构建工具    31
5.2  生成项目模板    31
5.3  导入Maven项目    31
5.4  编译打包运行    34
5.4.1  编译打包    34
5.4.2  启动应用    35
5.4.3  修改启动端口    35
5.4.4  自定义Banner    35
5.4.5  接口测试    37
第6章  集成Swagger文档    38
6.1  添加依赖    38
6.2  配置类    39
6.3  页面测试    39
第7章  集成MyBatis框架    41
7.1  添加依赖    41
7.2  添加配置    42
7.2.1  添加MyBatis配置    42
7.2.2  添加数据源配置    42
7.2.3  修改启动类    43
7.3  生成MyBatis模块    43
7.4  编写服务接口    44
7.5  配置打包资源    46
7.6  编译运行测试    47
第8章  集成Druid数据源    48
8.1  Druid介绍    48
8.2  添加依赖    49
8.3  添加配置    49
8.4  配置Servlet和Filter    51
8.5  编译运行    53
8.6  查看监控    54
8.6.1  登录界面    54
8.6.2  监控首页    55
8.6.3  数据源    55
8.6.4  SQL监控    55
第9章  跨域解决方案    57
9.1  什么是跨域    57
9.2  CORS 技术    57
9.2.1  简单请求    57
9.2.2  非简单请求    58
9.3  CORS实现    59
第10章  业务功能实现    60
10.1  工程结构规划    60
10.1.1  mango-admin    60
10.1.2  mango-common    62
10.1.3  mango-core    63
10.1.4  mango-pom    63
10.1.5  打包测试    63
10.2  业务代码封装    65
10.2.1  通用CURD接口    65
10.2.2  分页请求封装    66
10.2.3  分页结果封装    67
10.2.4  分页助手封装    68
10.2.5  HTTP结果封装    69
10.3  MyBatis分页查询    70
10.3.1  添加依赖    70
10.3.2  添加配置    71
10.3.3  分页代码    71
10.3.4  接口测试    73
10.4  业务功能开发    74
10.4.1  编写DAO接口    74
10.4.2  编写映射文件    74
10.4.3  编写服务接口    75
10.4.4  编写服务实现    75
10.4.5  编写控制器    77
10.5  业务接口汇总    78
10.5.1  用户管理    78
10.5.2  机构管理    79
10.5.3  角色管理    79
10.5.4  菜单管理    80
10.5.5  字典管理    81
10.5.6  系统配置    82
10.5.7  登录日志    82
10.5.8  操作日志    83
10.6  导出Excel报表    83
10.6.1  添加依赖    83
10.6.2  编写服务接口    84
10.6.3  编写服务实现    84
10.6.4  编写控制器    85
10.6.5  工具类代码    86
10.6.6  接口测试    87
第11章  登录流程实现    89
11.1  登录验证码    89
11.1.1  添加依赖    89
11.1.2  添加配置    89
11.1.3  生成代码    90
11.1.4  接口测试    91
11.2  Spring Security    91
11.2.1  添加依赖    91
11.2.2  添加配置    92
11.2.3  登录认证过滤器    93
11.2.4  身份验证组件    96
11.2.5  认证信息查询    97
11.2.6  添加权限注解    99
11.2.7  Swagger添加令牌参数    100
11.3  登录接口实现    101
11.4  接口测试    105
11.5  Spring Security执行流程剖析    108
第12章  数据备份还原    109
12.1  新建工程    109
12.2  添加依赖    109
12.3  添加配置    110
12.4  自定Banner    111
12.5  启动类    111
12.6  跨域配置    111
12.7  Swagger配置    112
12.8  数据源属性    112
12.9  备份还原接口    113
12.10  备份还原实现    114
12.11  备份还原逻辑    114
12.11.1  数据备份服务    115
12.11.2  数据还原服务    116
12.12  备份还原控制器    117
12.12.1  数据备份接口    117
12.12.2  数据还原接口    117
12.12.3  查找备份接口    118
12.12.4  删除备份接口    119
12.13  接口测试    119
第13章  系统服务监控    123
13.1  新建工程    123
13.2  添加依赖    123
13.3  添加配置    124
13.4  自定义Banner    124
13.5  启动类    125
13.6  启动服务端    125
13.7  监控客户端    125
13.8  启动客户端    126
第14章  注册中心（Consul）    128
14.1  什么是Consul    128
14.2  Consul安装    128
14.3  monitor改造    129
14.3.1  添加依赖    129
14.3.2  配置文件    130
14.3.3  启动类    130
14.3.4  测试效果    131
14.4  backup改造    132
14.4.1  添加依赖    132
14.4.2  配置文件    132
14.4.3  启动类    133
14.4.4  测试效果    134
14.5  admin改造    134
14.5.1  添加依赖    134
14.5.2  配置文件    135
14.5.3  启动类    136
14.5.4  测试效果    137
第15章  服务消费（Ribbon、Feign）    138
15.1  技术背景    138
15.2  服务提供者    138
15.2.1  新建项目    138
15.2.2  配置文件    139
15.2.3  启动类    140
15.2.4  自定义Banner    140
15.2.5  添加控制器    140
15.3  服务消费者    142
15.3.1  新建项目    142
15.3.2  添加配置    143
15.3.3  启动类    144
15.3.4  自定义Banner    144
15.3.5  服务消费    144
15.3.6  负载均衡器（Ribbon）    147
15.3.7  修改启动类    148
15.3.8  添加服务    149
15.3.9  页面测试    149
15.3.10  负载策略    149
15.4  服务消费（Feign）    150
15.4.1  添加依赖    150
15.4.2  启动类    150
15.4.3  添加Feign接口    151
15.4.4  添加控制器    151
15.4.5  页面测试    152
第16章  服务熔断（Hystrix、Turbine）    153
16.1  雪崩效应    153
16.2  熔断器（CircuitBreaker）    153
16.3  Hystrix特性    153
16.3.1  断路器机制    153
16.3.2  fallback    154
16.3.3  资源隔离    154
16.4  Feign Hystrix 154
16.4.1  修改配置    154
16.4.2  创建回调类    155
16.4.3  页面测试    155
16.5  Hystrix Dashboard 156
16.5.1  添加依赖    156
16.5.2  启动类    157
16.5.3  自定义Banner    157
16.5.4  配置文件    158
16.5.5  配置监控路径    158
16.5.6  页面测试    159
16.6  Spring Cloud Turbine 161
16.6.1  添加依赖    161
16.6.2  启动类    162
16.6.3  配置文件    162
16.6.4  测试效果    163
第17章  服务网关（Zuul）    164
17.1  技术背景    164
17.2  Spring Cloud Zuul    164
17.3  Zuul工作机制    165
17.3.1  过滤器机制    165
17.3.2  过滤器的生命周期    165
17.3.3  禁用指定的Filter    167
17.4  实现案例    167
17.4.1  新建工程    167
17.4.2  添加依赖    168
17.4.3  启动类    168
17.4.4  配置文件    169
17.4.5  页面测试    169
17.4.6  配置接口前缀    170
17.4.7  默认路由规则    170
17.4.8  路由熔断    171
17.4.9  自定义Filter    172
第18章  链路追踪（Sleuth、ZipKin）    174
18.1  技术背景    174
18.2  ZipKin    174
18.3  Spring Cloud Sleuth    174
18.4  实现案例    175
18.4.1  下载镜像    175
18.4.2  编写启动文件    175
18.4.3  启动服务    176
18.4.4  添加依赖    177
18.4.5  配置文件    178
18.4.6  页面测试    178
第19章  配置中心（Config、Bus）    180
19.1  技术背景    180
19.2  Spring Cloud Config    180
19.3  实现案例    181
19.3.1  准备配置文件    181
19.3.2  服务端实现    181
19.3.3  客户端实现    185
19.3.4  Refresh机制    188
19.3.5  Spring Cloud Bus    191
第三篇  前端实现篇
第20章  搭建开发环境    201
20.1  技术基础    201
20.2  开发环境    201
20.2.1  Visual Studio Code    201
20.2.2  Node JS    202
20.2.3  安装 webpack    203
20.2.4  安装vue-cli    203
20.2.5  淘宝镜像    203
20.2.6  安装 Yarn    203
20.3  创建项目    204
20.3.1  生成项目    204
20.3.2  安装依赖    205
20.3.3  启动运行    206
第21章  前端项目案例    207
21.1  导入项目    207
21.2  安装Element    207
21.2.1  安装依赖    207
21.2.2  导入项目    208
21.3  页面路由    210
21.3.1  添加页面    210
21.3.2  配置路由    210
21.4  安装 SCSS    212
21.4.1  安装依赖    212
21.4.2  添加配置    212
21.4.3  如何使用    212
21.4.4  页面测试    212
21.5  安装 axios    213
21.5.1  安装依赖    213
21.5.2  编写代码    213
21.5.3  页面测试    214
21.6  安装 Mock.js    214
21.6.1  安装依赖    215
21.6.2  编写代码    215
21.6.3  页面测试    216
第22章  工具模块封装    217
22.1  封装 axios 模块    217
22.1.1  封装背景    217
22.1.2  封装要点    217
22.1.3  文件结构    217
22.1.4  代码说明    218
22.1.5  安装 js-cookie    222
22.1.6  测试案例    223
22.2  封装 mock 模块    225
22.2.1  文件结构    225
22.2.2  登录界面    228
22.2.3  主页界面    229
22.2.4  页面测试    229
第23章  第三方图标库    230
23.1  使用第三方图标库    230
23.2  Font Awesome    230
23.2.1  安装依赖    230
23.2.2  项目引入    230
23.2.3  页面使用    231
23.2.4  页面测试    231
第24章  多语言国际化    232
24.1  安装依赖    232
24.2  添加配置    232
24.3  字符引用    234
24.4  页面测试    235
第25章  登录流程完善    236
25.1  登录界面    236
25.1.1  界面设计    236
25.1.2  关键代码    236
25.2  主页面    237
25.2.1  界面设计    237
25.2.2  关键代码    237
25.3  页面测试    240
第26章  管理应用状态    241
26.1  安装依赖    241
26.2  添加store    241
26.2.1  index.js    242
26.2.2  app.js    242
26.3  引入Store    243
26.4  使用Store    243
26.5  收缩组件    244
26.5.1  文件结构    244
26.5.2  关键代码    244
26.6  页面测试    245
第27章  头部功能组件    247
27.1  主题切换组件    247
27.1.1  编写组件    247
27.1.2  页面测试    250
27.2  语言切换组件    250
27.2.1  编写组件    250
27.2.2  页面测试    251
27.3  用户信息面板    252
27.3.1  编写组件    252
27.3.2  页面测试    253
27.4  系统通知面板    254
27.4.1  编写组件    254
27.4.2  页面测试    255
27.5  用户私信面板    255
27.5.1  编写组件    255
27.5.2  页面测试    256
第28章  动态加载菜单    258
28.1  添加Store    258
28.2  登录页面    259
28.3  导航守卫    259
28.4  导航树组件    262
28.5  页面测试    263
第29章  页面权限控制    264
29.1  权限控制方案    264
29.1.1  菜单类型    264
29.1.2  权限标识    264
29.1.3  菜单表结构    264
29.2  导航菜单实现思路    265
29.2.1  用户登录系统    265
29.2.2  根据用户加载导航菜单    265
29.2.3  导航栏读取菜单树    265
29.3  页面按钮实现思路    265
29.3.1  用户登录系统    265
29.3.2  加载权限标识    266
29.3.3  页面按钮控制    266
29.4  权限控制实现    266
29.4.1  导航菜单权限    266
29.4.2  页面按钮权限    267
29.5  标签页功能    270
29.6  系统介绍页    273
29.7  页面测试    274
第30章  功能管理模块    276
30.1  字典管理    276
30.1.1  关键代码    276
30.1.2  页面截图    279
30.2  角色管理    279
30.2.1  关键代码    279
30.2.2  页面截图    281
30.3  菜单管理    281
30.3.1  表格列组件    282
30.3.2  创建表格树    283
30.3.3  页面截图    284
第31章  嵌套外部网页    285
31.1  需求背景    285
31.2  实现原理    285
31.3  代码实现    285
31.3.1  确定菜单URL    285
31.3.2  创建嵌套组件    287
31.3.3  绑定嵌套组件    288
31.3.4  菜单路由跳转    290
31.4  页面测试    290
第32章  数据备份还原    293
32.1  需求背景    293
32.2  后台接口    293
32.3  备份页面    294
32.4  页面引用    296
32.5  页面测试    298