前言
纵观当今Web开发领域,优秀的后端开发语言虽有不少,但是Java依然独占鳌头,连续多年占据了行业的半壁江山,特别是随着Spring Boot和Spring Cloud 的诞生和流行,集智慧于大成的Spring 技术体系成为行业开发的首选之一。
在前端领域,也是各种框架齐出,技术更新日新月异,在众多的技术和框架中,Vue.js、React和Angular.js算是当前核心框架中的佼佼者,各自占有不少市场份额。市场代表需求,技术代表能力。显而易见,在当今开发领域中,谁能更好地掌握这些主流开发技术,谁就能在跟别人竞争的时候多一些筹码,谁就能获得更好的就业机会、薪资报酬和发展空间。
![a1fa80ab5655ded7e46b04c18a78d9da.png](https://i-blog.csdnimg.cn/blog_migrate/3f7fdaec22cf8d335bcde92f5c22b7fc.jpeg)
本文从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud +Vue前后端集成开发技术,希望大家能喜欢,也希望大家能够多提提意见,小编好改进!!
目录
![4f36ee17cffd86ec062421646ea2fad4.png](https://i-blog.csdnimg.cn/blog_migrate/c1d92207a469ee8673c3515004b8b4be.jpeg)
![01ed41188a5a0ea1f88a1fa6808f503a.png](https://i-blog.csdnimg.cn/blog_migrate/8203df225e030cc118b820e2a3bb1d51.jpeg)
![28737573f43714c8672c921d35df14fe.png](https://i-blog.csdnimg.cn/blog_migrate/ac6152a0f8edd0de52c1ce58d58edb53.jpeg)
![402e24a1cee1e5f021cae52d7130ef15.png](https://i-blog.csdnimg.cn/blog_migrate/20063c5094f9a5f2d96d4f053add2e5d.jpeg)
![4fd1c856f00f5b3440915e2d5215d5d9.png](https://i-blog.csdnimg.cn/blog_migrate/29ea8d75e0a8501fe3d14e0a3a2af02c.jpeg)
![1b247b33e17aa9bac9af1cf203e9fedf.png](https://i-blog.csdnimg.cn/blog_migrate/a4f564a9d373d89612317089f1a78cda.jpeg)
主要内容
全文分为三篇共32章。
第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。
第1章权限管理系统介绍,本章分为权限管理系统介绍、系统架构和系统界面3节,针对基于本文实现的Mango(本文示例项目名)权限管理系统,分别从系统功能、系统架构和系统界面3个方面进行相对整体的介绍,让读者对Mango系统以及本文涉及的相关技术有一个大致的印象和了解,以便在后续的阅读中可以结合相关知识和项目实践逐步深入学习和开发。系统简介罗列主要的系统功能,系统架构分别对前后端的架构绘图进行描述,系统界面通过系统功能界面截图并配合简要描述的方式帮助读者更好地了解系统拥有的功能和模块。
![4dc5f24f700549f22a33d9e2c2a1f899.png](https://i-blog.csdnimg.cn/blog_migrate/df409b12f0b7d5f51ee74c7db2bd63a2.jpeg)
第2章安装指南,本章节介绍如何本地安装运行Mango权限管理系统,着眼于实践,建议读者结合源码和书本内容逐步学习和掌握 Mango系统的整个开发过程。因为是前后端分离项目,所以项目安装指南分为前端安装指南和后端安装指南两部分。
![7ff6c0e4893060f0b94b2e7046a88d7f.png](https://i-blog.csdnimg.cn/blog_migrate/dff862a0266f94654e78d89f8d49f2cd.jpeg)
第3章关键技术,为读者介绍 Mango权限管理系统开发中所涉及的主要技术,让读者对涉及的相关技术有一个初步的认识,并引导读者进行更为深入的学习。
![1259cb8e2fd3a3b2c86d9966320f6020.png](https://i-blog.csdnimg.cn/blog_migrate/c2222d54b8be7b44cb8e1bfa825ef8cf.jpeg)
第二篇为后端实现篇,本篇内容为后端实现篇,全面细致地讲解了Mango权限管理系统的后端实现全过程。从零开始,逐步扩展,逐渐完善,手把手地教你如何利用Spring Boot和Spring Cloud构建微服务系统。
第4章数据库设计,详细地阐述设计原则、表间关系和数据库表结构。
![ee27bb36419defa20f77c2cb6ad79e92.png](https://i-blog.csdnimg.cn/blog_migrate/8944f6e74508240d4a7e7ec6a78c1ee0.jpeg)
第5章搭建开发环境,完整地阐述和示范后端开发环境的搭建和安装。
![af0a7db4b01e285af5225a3ead4b008c.png](https://i-blog.csdnimg.cn/blog_migrate/0b027ca2b3996719e8fef42fb25bdfb4.jpeg)
第6章集成Swagger文档,Spring Boot作为当前最为流行的Java Web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口。这些接口不但会服务于传统的Web端(B/S),也会服务于移动端。在实际开发过程中,这些接口还要提供给开发测试进行相关的白盒测试,那么势必存在如何在多人协作中共享和及时更新API开发接口文档的问题。假如你已经对传统的 WIKI文档共享方式所带来的弊端深恶痛绝,那么不妨尝试一下Swagger2方式,一定会让你有不一样的开发体验。
![55e382605828a2a8f93543fcfe5c064a.png](https://i-blog.csdnimg.cn/blog_migrate/6d6b389b85b94d73ecc4fc9d9b2a5448.jpeg)
第7章集成MyBatis 框架,阐述和实现如何集成 MyBatis 进行数据库操作。
![c58f13cff669ec65eaa38bd5764012a4.png](https://i-blog.csdnimg.cn/blog_migrate/ab4c1c3cbd222106e2b5babd07905dd9.jpeg)
第8章集成Druid数据源,数据库连接池负责分配、管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个,释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏。通过数据库连接池能明显提高对数据库操作的性能。在Java应用程序开发中,常用的连接池有DBCP、C3P0、Proxool等。
Spring Boot默认提供了若干种可用的连接池,默认的数据源是org.apache.tomcat.jdbc.pool.DataSource。Druid是阿里系提供的一个开源连接池,除在连接池之外,还提供了非常优秀的数据库监控和扩展功能。在此,根据项目实践中的应用,讲解如何实现Spring Boot与 Druid连接池的集成。
![257b6ad2a0a4ec3f098b80656dc713fb.png](https://i-blog.csdnimg.cn/blog_migrate/2c70fe00a1863ffb45d22ab3ff80fabc.jpeg)
第9章跨域解决方案,阐述什么是跨域并提供CORS实现跨域的解决方案。
![200eb95f7d5f0c0a527dd4b161ef9300.png](https://i-blog.csdnimg.cn/blog_migrate/6879946d25d723baf3a33e0b54d8c96d.jpeg)
第10章业务功能实现,对权限系统后台涉及的业务功能接口统一设计开发。
![810ccd0e381eb4d119925b38ebba0963.png](https://i-blog.csdnimg.cn/blog_migrate/e4e83b5939e7bb5778a8b77e6cdf8f47.jpeg)
第11章登录流程实现,用户登录流程是后台管理系统必备的功能,接下来我们将实现用户登录流程。在这个过程中,我们还将利用kaptcha实现登录验证码,利用Spring Security进行安全控制。
![a368f7c0fd3d8464cb25f6e7310aa9d9.png](https://i-blog.csdnimg.cn/blog_migrate/ebc2045e11954ce03c4b8500279e2a7c.jpeg)
第12章数据备份还原,在很多时候,我们需要对系统数据进行备份还原。当然,实际生产环境的数据备份和还原通常是由专业数据库维护人员在数据库端通过命令执行的这里提供的是通过代码进行数据备份,主要是方便一些日常的数据恢复,比如说想把数据恢复到某一世界节点的数据。这一章节,我们讲解如何通过代码调用MySQL的备份还原命令实现系统备份还原的功能。
![93ae7e4597dd50589798e7de5f1fe032.png](https://i-blog.csdnimg.cn/blog_migrate/7ee455534a5b3df3dd83e6def7ba422d.jpeg)
第13章系统服务监控,Spring Boot Admin是一个管理和监控Spring Boot应用程序的开源监控软件,针对spring-boot的actuator接口进行UI美化并封装,可以在管理界面中浏览所有被监控spring-boot项目的基本信息,详细的Health信息、内存信息、JVM信息、垃圾回收信息、各种配置信息(比如数据源、缓存列表和命中率)等,还可以直接修改logger的level,Spring Boot Admin提供的丰富详细的监控信息给Spring Boot应用的监控、维护和优化都带来了极大的便利。本章就给大家介绍如何使用Spring Boot Admin对Spring Boot应用进行监控。
![bdac5dd15992536375aab08361093ea0.png](https://i-blog.csdnimg.cn/blog_migrate/2ccc1649b1f98f0cd6a22c8b8264bd09.jpeg)
第14章注册中心(Consul),讲解如何安装Consul注册中心和服务客户端的注册。
![4f728072a68f7658f252290b996e5d4e.png](https://i-blog.csdnimg.cn/blog_migrate/2bb48f623f89f3dc804c0a6b77bbef89.jpeg)
第15章服务消费(Ribbon.Feign),阐述和实现如何通过Ribbon和Feign 进行服务消费。
![bb8fb08d612e92a71824af2fe86dfcc1.png](https://i-blog.csdnimg.cn/blog_migrate/f62b78d8600fa959c7a2acb61451772e.jpeg)
第16章服务熔断(Hystrix,Turbine),讲解如何集成Hystrix和Turbine进行服务熔断和监控。
![1e2ea2ed1182e171aad0ae3807ef409c.png](https://i-blog.csdnimg.cn/blog_migrate/f8c870879caae7bf0049ab8bbf289f0f.jpeg)
第17章服务网关(Zuul),阐述和示范如何通过Zuul实现智能路由,提供API网关。
![41146f2a9d803c7d260eb05d58bb53c3.png](https://i-blog.csdnimg.cn/blog_migrate/7503dee87f2d82a65f054a9aaaebd234.jpeg)
第18章链路追踪(Sleuth.Zipkin)讲解如何集成Sleuth 和 ZipKin 进行服务调用的链路追踪。
![f49bc7369709df8725f4e96fa7199128.png](https://i-blog.csdnimg.cn/blog_migrate/0481254ced7d68068f3fe11a0d327fc1.jpeg)
第19章配置中心(Config.Bus),讲解如何通过Spring cloud Config 实现分布式配置中心。
![595a7a0be249d97990e6b992dcab67e8.png](https://i-blog.csdnimg.cn/blog_migrate/0287a9fa947bab32a7a5e4eb8d9b3ede.jpeg)
第三篇为前端实现篇,本篇内容为前端实现篇,全面细致地讲解Mango权限管理系统的前端实现全过程。从零开始,逐步扩展,逐渐完善,手把手地教你如何利用Vue.js 和Element构建功能丰富,风格优雅的权限管理系统。
第20章搭建开发环境,完整地阐述和示范前端开发环境的搭建和安装。
![56f63a654fe2869f46c165a1ef708f4f.png](https://i-blog.csdnimg.cn/blog_migrate/f9360a9d2ab775677f443e9d81ff6f67.jpeg)
第21章前端项目案例,讲解基于Vue+Element实现的第一个案例。
![50cc8d5f60b464f5c25f01773f54abfd.png](https://i-blog.csdnimg.cn/blog_migrate/7c646ab062287773ce3bf2de36bca3be.jpeg)
第22章工具模块封装,对常用的axios和Mock模块进行集中封装。
![697aff6c6e9ca4ed2f5ddef4461e59f7.png](https://i-blog.csdnimg.cn/blog_migrate/a51e45a3f2f32e180a9f85f4e4ef11ac.jpeg)
第23章第三方图标库,介绍第三方图标库 Font Awesome的使用方法。
![d80f67abf7e93ca51e97a7815865c3d0.png](https://i-blog.csdnimg.cn/blog_migrate/b9b2105f51877cdfe3031c6ae94e178f.jpeg)
第24章多语言国际化,讲解如何通过Vue组件实现多语言国际化。
![878539dfccfecce16f4c71dfccfa92a2.png](https://i-blog.csdnimg.cn/blog_migrate/eb17747b05a6afc4728420d7d31b73fc.jpeg)
第25章登录流程完善,丰富登录功能,美化登录界面,优化登录逻辑。
![28fe17dcd8a0b2154e5e20a530cb133a.png](https://i-blog.csdnimg.cn/blog_migrate/55ad666035e53affe0e2adc4b03f2c0e.jpeg)
第26章管理应用状态,在很多应用场景下,我们需要在组件之间共享状态,比如我们的左侧导航栏需要收缩和展开的功能,收缩状态时宽度很小,只显示菜单图标,因为导航菜单栏收缩之后宽度变了,所以右侧的主内容区域要占用导航栏收缩的空间,主内容区域宽度也要根据导航栏的收缩状态做变更,而导航栏和主内容区域是两个不同的组件,而非父子组件之间不支持状态传递,所以组件之间的状态共享问题发生了。vuex是一个专为 vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本章将通过实现左侧导航栏的收缩展开功能来讲解怎样使用vuex来管理应用状态。
![1882cc28d8515807839e50e58c220c68.png](https://i-blog.csdnimg.cn/blog_migrate/f5e8d347cf471c7cdc9584517c011cae.jpeg)
第27章头部功能组件,本章我们来介绍头部区域一些常用功能的实现方案,比如动态主题切换器、国际化语言切换器、用户信息弹出面板等。
![3515fa3cb5cca71b576e08f9b691d0f7.png](https://i-blog.csdnimg.cn/blog_migrate/5f21d6d26b9fa9b109ca20b526a66440.jpeg)
第28章动态加载菜单,本章我们将讲解如何动态加载数据库的菜单数据并显示到导航栏。
![cb1d1745f68fd64ef5a529c94cba58a6.png](https://i-blog.csdnimg.cn/blog_migrate/2edc9beb096be39c54ec3a4d2a21850e.jpeg)
第29章页面权限控制,讲解页面和按钮权限控制的实现思路和方案。
![be9258dd67b39a67909f2d4f26fcd077.png](https://i-blog.csdnimg.cn/blog_migrate/eb6b55cb4fb0edefc7dbb81aa81fd586.jpeg)
第30章功能管理模块,就目前来看,功能管理页面大多类似,如用户管理、功能管理模块中的字典管理、系统配置、登录日志和操作日志等都是以表格管理数据为主,机构管理和菜单管理则以表格树的数据管理为主,所以这里在每个类型中挑选一个作为讲解案例,其他页面不再复述,读者用到的时候查阅相关代码即可。
![0912648ccd286333cd77e888033c7464.png](https://i-blog.csdnimg.cn/blog_migrate/6e44da053265582b0b048ae76db1e326.jpeg)
第31章嵌套外部网页,讲解使用IFram嵌套外部网页的实现思路和方案。
![452ab7eaca7c5d1cf658c9328105b9b1.png](https://i-blog.csdnimg.cn/blog_migrate/33949c45faebc6cacb8a12062638e637.jpeg)
第32章数据备份还原,讲解数据备份还原前端界面相关的实现方案。
![65de75c13b6af78377697bc4e95d9050.png](https://i-blog.csdnimg.cn/blog_migrate/a41d7ca8f5bff423b6d3723297311947.jpeg)
这份【Spring Boot+Spring Cloud+Vue+Element项目实战手把手教你开发权限管理系统】共有319页,需要完整版的朋友,可以转发此文关注小编,私信小编【技术】来获取!!!
总结
本文掌握主流前后端技术,架构和开发一个完整系统案例;
本文使用当前主流前后端技术,从项目实践出发,带领读者从零开始,一步一步地开发出一款界面优雅、架构优良、代码简洁、注释完善、基础功能相对完整的权限管理系统。读者可以以此为范例从中学习和汲取技术知识,也可以基于此系统开发和实现具体的生产项目。
本文适合前后端开发人员和全栈工程师阅读,希望大家能够仔细品读,理解其中的真谛,并且能够灵活运用,也希望能够得到大家的喜欢!!
加油吧!