作者：徐丽健
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统试读：
前言
纵观当今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开发和系统架构经验，开源技术爱好者和开源代码贡献者，闲暇之余爱写文字，博客园不知名技术博主。现在国内任科技企业的系统架构师一职，主持企业软件的系统架构和产品研发工作。
作者邮箱：514045152@qq.com
技术博客：https://www.cnblogs.com/xifengxiaoma/
开源社区：https://gitee.com/liuge1988
本书QQ技术交流群：429854222代码下载
本书示例代码需要从gitee上下载，地址如下：
https://gitee.com/liuge1988/mango-platform
如果下载有问题，或者对本书有疑问和建议，请加入本书QQ技术交流群沟通。著 者2019年4月第一篇 系统介绍篇
本篇内容主要包括系统介绍、安装指南和关键技术3个章节内容。
第1章 权限管理系统介绍，从系统功能、系统架构和系统界面3个方面出发，分别进行解读和描述，让读者在开始学习和开发前，能够对本书内容和项目有一个大致的印象。
第2章 安装指南，分为前后端安装指南两个部分，通过完整详细的项目安装运行步骤，帮助读者快速在本地搭建起开发环境，快速进入源码学习和项目实践。
第3章 关键技术，为读者介绍Mango权限管理系统开发中所涉及的主要技术，让读者对涉及的相关技术有一个初步的认识，并引导读者进行更为深入的学习。第1章 权限管理系统介绍
本章分为权限管理系统介绍、系统架构和系统界面3节，针对基于本书实现的Mango（本书示例项目名）权限管理系统，分别从系统功能、系统架构和系统界面3个方面进行相对整体的介绍，让读者对Mango系统以及本书涉及的相关技术有一个大致的印象和了解，以便在后续的阅读中可以结合相关知识和项目实践逐步深入学习和开发。系统简介罗列主要的系统功能，系统架构分别对前后端的架构绘图进行描述，系统界面通过系统功能界面截图并配合简要描述的方式帮助读者更好地了解系统拥有的功能和模块。1.1 系统简介
Mango后台权限管理系统是基于Spring Boot、Spring Cloud、Vue.js 、Element UI等主流前后端技术，采用前后端分离架构实现的权限管理系统，也是一款采用当前主流技术实现的界面优雅、架构优良、代码简洁、注释完善、基础功能相对完整的Java EE快速开发平台，前后端开发人员都可以以此为范例从中学习和汲取技术知识，也可以基于此系统开发和实现具体生产项目。
Mango实现的主要功能包括：● 系统登录：系统用户登录，系统登录认证（token方式）。● 用户管理：新建用户，修改用户，删除用户，查询用户。● 机构管理：新建机构，修改机构，删除机构，查询机构。● 角色管理：新建角色，修改角色，删除角色，查询角色。● 菜单管理：新建菜单，修改菜单，删除菜单，查询菜单。● 字典管理：新建字典，修改字典，删除字典，查询字典。● 配置管理：新建配置，修改配置，删除配置，查询配置。● 登录日志：记录用户的登录日志，查看系统登录日志记录。● 操作日志：记录用户的操作日志，查看系统操作日志记录。● 在线用户：根据用户的登录状态，查看统计当前在线用户。● 数据监控：定制Druid信息，提供简洁有效的SQL数据监控。● 聚合文档：定制Swagger文档，提供简洁美观的API文档。● 备份还原：系统数据备份还原，一键恢复系统初始化数据。● 主题切换：支持主题切换，自定主题颜色，实现一键换肤。● 服务治理：集成Consul注册中心，实现服务的注册和发现。● 服务监控：集成Spring Boot Admin，实现全方位的服务监控。● 服务消费：集成Ribbon、Feign，实现服务调用和负载均衡。● 服务熔断：集成Hystrix、Turbine，实现服务的熔断和监控。● 服务网关：集成Spring Cloud Zuul，实现统一API服务网关。● 链路追踪：集成Sleuth、ZipKin，实现服务分布式链路追踪。● 配置中心：集成Cloud Config和Bus，实现分布式配置中心。
这里简单地罗列了相关的系统功能，后续篇幅会给出各功能的系统界面说明。1.2 系统架构
本系统采用前后端分离架构实现，前后端通过JSON格式进行交互，前后端皆可分开独立部署。前端支持开启Mock模拟接口数据，可以避免对后台接口开发进度的依赖；后台支持使用Swagger进行接口测试，同样可以避免对前端页面开发进度的依赖。1.2.1 前端架构
前端架构比较简单，核心框架使用当前主流的Vue.js，UI使用饿了么开源的Element，前后端交互使用了axios，使用Mock模拟接口数据。
前端架构如图1-1所示。图1-11.2.2 后端架构
后端架构使用Spring Boot + Spring Security + Spring Cloud + MyBatis的主体架构，除此之外，选择Consul注册中心，使用Maven构建工具、MySQL数据库等。
后端架构如图1-2所示。图1-21.3 系统界面1.3.1 登录页面
系统登录界面如图1-3所示，因为验证码是通过后台生成的，所以显示验证码需要后台的支持。图1-31.3.2 系统主页
系统主页主要是系统介绍内容，如图1-4所示。图1-41.3.3 用户管理
用户管理支持用户的增、删、改、查功能，用户可以配置角色和机构。另外，在工具栏提供了表格列过滤和导出Excel表格的实现范例，如图1-5所示。图1-51.3.4 机构管理
机构管理支持机构的增、删、改、查功能，是树型层级结构，如图1-6所示。图1-61.3.5 角色管理
角色管理支持角色的增、删、改、查功能，支持给选定角色配置不同的菜单权限，如图1-7所示。图1-71.3.6 菜单管理
菜单管理支持菜单的增、删、改、查功能，是树型层级结构。菜单可以设置类型、图标、权限标识和菜单路径URL属性，如图1-8所示。图1-81.3.7 字典管理
字典管理支持数据字典的增、删、改、查功能，如图1-9所示。图1-91.3.8 系统配置
系统配置支持系统配置信息的增、删、改、查功能，如图1-10所示。图1-101.3.9 登录日志
登录日志支持系统登录日志的查询，如图1-11所示。图1-111.3.10 操作日志
操作日志支持系统用户操作日志的查询，如图1-12所示。图1-121.3.11 注册中心
注册中心可以查看Consul注册中心的服务页面，可以查看当前服务的注册情况和健康状况信息，如图1-13所示。图1-131.3.12 接口文档
接口文档可以查看Swagger集成的接口文档页面，如图1-14所示。图1-141.3.13 数据监控
数据监控可以查看Druid提供的数据监控界面，可以查看SQL监控、Session监控等信息内容，如图1-15所示。图1-151.3.14 服务监控
服务监控可以查看Spring Boot Admin提供的Spring Boot应用监控页面，查看应用的CPU、线程、内存和垃圾回收状态等信息，如图1-16所示。图1-161.3.15 备份还原
备份还原入口在用户信息面板，可以提供系统数据的备份和还原，包括备份创建、备份删除、备份查询和备份还原功能，如图1-17所示。图1-171.3.16 主题切换
主题切换支持通过主题切换器实现一键换肤的功能。1. 绿色主题（如图1-18所示）图1-182. 黑色主题（如图1-19所示）图1-19第2章 安装指南
本章节介绍如何本地安装运行Mango权限管理系统，着眼于实践，建议读者结合源码和书本内容逐步学习和掌握Mango系统的整个开发过程。因为是前后端分离项目，所以项目安装指南分为前端安装指南和后端安装指南两部分。2.1 前端安装指南
本系统前端使用Vue.js和Element框架搭建，基于NPM环境开发，所以在开发之前，需要先安装Node.JS，开发工具为Visual Studio Code，当然读者也可以根据自己的喜好选择其他开发工具，比如说WebStorm，具体开发环境的搭建请参考后续章节：前端实现篇◎搭建开发环境，这里着重说明以下现有源码的安装和运行。2.1.1 开发环境
前端开发环境基于NPM环境，使用VS Code开发。2.1.2 技术选型
前端技术主要使用Vue.js和Element UI框架。2.1.3 项目结构
前端项目结构如下：2.1.4 编译运行
编译运行步骤说明如下。（1）获取源码。获取前端源码，整个前端只有一个工程mango-ui，将其备份放置到本地目录。（2）编译源码。在mango-ui目录下打开CMD终端，执行npm install，下载和安装项目依赖包。（3）启动系统。执行npm run dev命令，启动项目，启动之后通过http://localhost:8080访问。（4）项目打包。执行npm run build命令，进行前端项目打包，打包完成之后会生成dist目录。
将生成的目录直接放置到如Tomcat之类的Web服务器，启动服务即可访问。（5）Mock开关。本系统采用前后端分离架构，前端若开启Mock模块，则可模拟大部分接口数据。
通过修改src/mock/index.js中的openMock变量，可以一键开启或关闭Mock功能。（6）修改配置。如果想自定义端口（默认是8080），可以修改config/index.js下的port属性。
后台接口和备份服务器地址配置在src/utils/global.js，如有修改请做相应变更。2.2 后端安装指南2.2.1 开发环境
后端开发环境基于Java环境，使用Eclipse开发。2.2.2 技术选型
后端技术主要使用Spring Boot、Spring Cloud和MyBatis框架。2.2.3 项目结构
后端项目源码工程结构如下：2.2.4 编译运行1. 编译运行步骤（1）获取源码。获取后端源码，获取上面所列的所有项目结构，将其备份放置到本地目录。（2）导入工程。使用Eclipse导入Maven项目，在此之前请确认已安装JDK和Maven工具。（3）编译源码。找到mango-pom工程下的pom.xml，执行maven clean install命令进行一键打包。一般来说不会有什么问题，如果打包失败，可以尝试按照优先级逐个编译。（4）导入数据库。新建mango数据库，使用项目sql目录下的mango.sql脚本，导入初始化数据库。
修改mango-admin下application.yml中的数据源配置信息为自己的数据库配置。
修改mango-backup下application.yml中的数据源配置信息为自己的数据库配置。（5）启动系统
●基础必需模块（注册中心，mango-consul；服务监控，mango-monitor）
找到mango-consul工程，根据安装说明安装注册中心，执行consul agent -dev启动。
找到mango-monitor工程下的MangoMonitorApplication，启动项目，开启服务监控。
●权限管理模块（权限管理，mango-admin；备份还原，mango-backup）
找到mango-admin工程下的MangoAdminApplication，启动项目，开启权限系统服务。
找到mango-backup工程下的MangoBackupApplication.java，启动项目，开启备份服务。
●其他示例模块（Spring Cloud示例模块，作为开发模板和范例，根据需要启动）
以下为Spring Cloud体系各种功能的实现范例，可以根据需要启动，后续扩展开发也可以作为参考和模板使用，具体使用教程请参考本书后面Spring Cloud系列教程的章节，关于Spring Cloud体系的各种功能模块都有详细的讲解和完整的案例实现。
这些示例模块包括：● mango-producer：服务提供者示例，演示服务提供者的实现。● mango-consumer：服务消费者示例，演示服务消费者的实现。● mango-hystrix：服务熔断监控模块，演示熔断监控功能的实现。● mango-zuul：API服务网关模块，演示API统一网关的实现。● mango-config：配置中心服务端，演示分布式配置中心的实现。2. 注意事项（1）注册中心是基础服务，需要先安装Consul，找到mango-consul工程，根据安装说明安装Consul。（2）如果需要链路追踪服务，需要安装zipkin，找到mango-zipkin工程，根据安装说明安装zipkin。（3）如果需要配置中心服务，需要安装rabbitMQ，找到mango-config工程，根据安装说明安装rabbitMQ。第3章 关键技术3.1 Spring Boot
Spring Boot是由Pivotal团队提供，设计用来简化新Spring应用的初始搭建和开发过程的开源框架。大家都知道，随着Spring体系越来越庞大，各种配置也是越来越繁杂，曾经有多少开发人员在埋头修改配置文件的时候对此嗤之以鼻，直到Spring Boot的诞生。Spring Boot遵循约定优于配置的规则，使用特定的方式来进行配置，从而使开发人员不再需要定义各种样板化的配置，将开发人员从繁杂的配置文件中解放出来。
Spring Boot其实并不是什么新的框架，它只是默认配置了很多框架的使用方式，就像Maven整合了所有的jar包一样，Spring Boot整合了所有的框架。使用Spring Boot可以非常方便、快速地搭建我们的项目，使我们可以不用关心各框架之间的兼容性、版本适用性等问题，我们想使用什么东西，往往只需添加一个配置即可。另外，Spring Boot内置了服务器，使得服务的测试和部署也变得非常方便，所以Spring Boot非常适合开发微服务。
官方教程：http://spring.io/projects/spring-boot/ 。3.2 Spring Cloud3.2.1 Spring Cloud简介
Spring Cloud是一个微服务框架。相比Dubbo等RPC框架，Spring Cloud提供的是一整套分布式系统解决方案。它为微服务架构开发中所涉及的服务治理、服务熔断、智能路由、链路追踪、消息总线、配置管理、集群状态管理等操作都提供了一种简单的开发方式。3.2.2 Spring Cloud架构
Spring Cloud的架构大致如图3-1（来自互联网）所示。图3-13.2.3 Spring Cloud组件
Spring Cloud是一个全套的框架，整个框架系统包含各种方方面面的功能组件，组件数量繁多，这里针对一些比较常用的组件进行说明。● Netflix Eureka：一个基于REST服务的服务治理组件，包括服务注册中心、服务注册与服务发现机制的实现，目前仍是Spring Cloud的默认内置注册中心组件，不过自从Eureka 2.0停止开发的消息以后，有逐渐被Consul等注册中心替代的趋势。● Netflix Hystrix：容错管理工具，实现断路器模式，通过控制服务的节点，从而对延迟和故障提供更强大的容错能力。● Netflix Ribbon：实现客户端负载均衡的服务调用组件。● Netflix Feign：基于Ribbon和Hystrix的声明式服务调用组件。● Netflix Zuul：微服务网关，提供动态路由，访问过滤等服务。● Spring Cloud Config：配置管理工具，支持使用Git存储配置内容，支持应用配置的外部化存储，支持客户端配置信息刷新、加解密配置内容等。● Spring Cloud Bus：事件、消息总线，用于在集群（例如，配置变化事件）中传播状态变化，可与Spring Cloud Config联合实现热部署。● Spring Cloud Sleuth：日志收集工具包，封装了Dapper、ZipKin和HTrace操作。● Spring Cloud Consul：封装了Consul操作，Consul是一个服务发现与配置工具，与Docker容器可以无缝集成。● Spring Cloud Zookeeper：操作Zookeeper的工具包，用于使用zookeeper方式的服务注册和发现。● Spring Cloud Stream：数据流操作开发包，封装了与Redis、Rabbit、Kafka等发送接收消息的接口。● Spring Cloud Data Flow：大数据操作工具，通过命令行方式操作数据流。● Spring Cloud Security：安全工具包，为你的应用程序添加安全控制，主要是指OAuth2。3.2.4 参考教程
提供一些Spring Cloud的参考资料：● 官网教程：http://spring.io/projects/spring-cloud● 博客教程：https://www.cnblogs.com/xifengxiaoma/p/9798330.html3.3 Spring Security
Spring Security是Spring社区的一个顶级项目，也是Spring Boot官方推荐使用的安全框架。Spring Security是一个强大且支持高度自定义的安全框架，可以为系统在登录认证和访问授权两大核心安全方面提供强有力的保障。● 官网教程：https://spring.io/projects/spring-security● 博客教程：https://www.cnblogs.com/xifengxiaoma/p/10020960.html3.4 MyBatis
MyBatis是一款非常优秀的持久层框架，可以支持定制化SQL、存储过程以及高级映射等高级特性。MyBatis可以使用简单的XML或注解来配置和映射原生信息，将接口和Java的POJOs对象映射成数据库中的记录，使用MyBatis可以避免几乎所有的JDBC代码，无须手动设置参数和获取结果集。相比类似Hibernate这种完全ORM框架，MyBatis其实只能算是SQL Mapping框架，两种方式各有优劣，MyBatis虽然编写Mapping文件有点麻烦，但贵在灵活，故深受企业的喜爱，成为当前主流的持久层框架。● 官网教程：http://www.mybatis.org/mybatis-3/zh/● W3C教程：https://www.w3cschool.cn/mybatis/3.5 Vue.js
Vue.js是当前前端领域主流的核心框架之一，特别深受国内用户的喜爱。
Vue.js（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。
Vue只关注视图层，采用自底向上增量开发的设计方式，非常容易上手。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。● 官网教程：https://cn.vuejs.org/v2/guide/● 菜鸟教程：http://www.runoob.com/vue2/vue-tutorial.html3.6 Element
Element是国内饿了么开源的一套前端UI框架，提供了较为丰富的组件，界面简洁优雅，同样深受国内开发者的喜爱。Element分别提供了Vue.js、React和Angular的实现，本书将使用Vue.js版本搭建Mango管理系统的界面。● 官网教程：http://element.eleme.io/#/zh-CN第二篇 后端实现篇
本篇内容为后端实现篇，全面细致地讲解了Mango权限管理系统的后端实现全过程。从零开始，逐步扩展，逐渐完善，手把手地教你如何利用Spring Boot和Spring Cloud构建微服务系统。
第4章 数据库设计，详细地阐述设计原则、表间关系和数据库表结构。
第5章 搭建开发环境，完整地阐述和示范后端开发环境的搭建和安装。
第6章 集成Swagger文档，阐述和实现如何集成Swagger并进行接口测试。
第7章 集成MyBatis框架，阐述和实现如何集成MyBatis进行数据库操作。
第8章 集成Druid数据源，阐述和实现如何集成Druid数据源和查看SQL监控。
第9章 跨域解决方案，阐述什么是跨域并提供CORS实现跨域的解决方案。
第10章 业务功能实现，对权限系统后台涉及的业务功能接口统一设计开发。
第11章 登录流程实现，讲解如何集成Spring Security并完善登录流程。
第12章 数据备份还原，讲解如何通过调用MySQL命令完成数据备份还原。
第13章 系统服务监控，讲解如何集成Spring Boot Admin实现服务监控。
第14章 注册中心（Consul），讲解如何安装Consul注册中心和服务客户端的注册。
第15章 服务消费（Ribbon、Feign），阐述和实现如何通过Ribbon和Feign进行服务消费。
第16章 服务熔断（Hystrix、Turbine），讲解如何集成Hystrix和Turbine进行服务熔断和监控。
第17章 服务网关（Zuul），阐述和示范如何通过Zuul实现智能路由，提供API网关。
第18章 链路追踪（Sleuth、ZipKin），讲解如何集成Sleuth和ZipKin进行服务调用的链路追踪。
第19章 配置中心（Config、Bus），讲解如何通过Spring Cloud Config实现分布式配置中心。第4章 数据库设计4.1 数据库表设计
在经过对权限管理系统做了细致的需求分析和功能分析之后，我们列出需要实现的需求：● 系统登录：能够进行系统登录。● 用户管理：提供用户管理界面。● 机构管理：提供机构管理界面。● 角色管理：提供角色管理界面。● 菜单管理：提供菜单管理界面。● 字典管理：提供字典管理界面。● 登录日志：提供登录日志界面。● 操作日志：提供操作日志界面。● 数据监控：集成Druid数据监控。● 服务监控：集成Boot Admin服务监控。● 服务治理：集成Spring Cloud服务治理。
基于以上需求，结合各功能需求之间的直接关系，我们需要设计出权限管理系统的数据库表。
这里，我们的数据库设计遵循以下原则：● 所有数据库表均采用长整型的“编号”字段作为表的主键。● 编号、创建人、创建时间、更新人、更新时间为所有表的共同字段。● 表间关系采用各表编号进行关联查询，不定义实际数据库外键。● 本系统涉及的数据库脚本均采用MySQL，其他数据库脚本请自行处理。4.2 数据库表关系
整体数据库表间关系如图4-1所示。图4-1
其中主要包含以下关系：● 用户表和角色表通过用户角色表关联。● 角色表和菜单表通过角色菜单表关联。● 角色表和机构表通过角色机构表关联。● 用户表和机构表通过用户的机构ID管理。● 用户菜单和按钮权限查找流程为：用户→用户角色→角色→角色菜单→菜单。4.3 数据库表结构
下面详细给出各个数据库表的建表SQL，格式为MySQL数据库脚本。4.3.1 用户表（sys_user）
用户表包含用户信息，主要有编号、用户名、昵称、密码、邮箱、手机号等字段，其中用户表通过表中dept_id与机构表关联，表明所属机构。4.3.2 角色表（sys_role）
角色表代表用户角色，用户拥有角色，角色拥有菜单，菜单拥有权限标识，所以不同角色拥有不同的权限，角色表主要有编号、角色名、备注等字段。
试读结束[说明：试读内容隐藏了图片]