Kitty 前端，基于 Vue + Element 实现的权限管理系统

项目介绍

• Kitty是基于Spring Boot、Spring Cloud、Vue、Element实现的Java快速开发平台。
• 目标是搭建出一套简洁易用的快速解决方案，可以帮助用户有效降低项目开发难度和成本。

功能列表

• ✔ 系统登录：系统用户登录，系统登录认证（token方式）
• ✔ 用户管理：新建用户，修改用户，删除用户，查询用户
• ✔ 机构管理：新建机构，修改机构，删除机构，查询机构
• ✔ 角色管理：新建角色，修改角色，删除角色，查询角色
• ✔ 菜单管理：新建菜单，修改菜单，删除菜单，查询菜单
• ✔ 字典管理：新建字典，修改字典，删除字典，查询字典
• ✔ 系统日志：记录用户操作日志，查看系统执行日志记录
• ✔ 数据监控：定制Druid信息，提供简洁有效的SQL监控
• ✔ 聚合文档：定制在线文档，提供简洁美观的API文档
• ✔ 备份还原：系统备份还原，一键恢复系统初始化数据
• ✔ 主题切换：支持主题切换，自定主题颜色，一键换肤
• ✔ 服务治理：集成Consul注册中心，实现服务注册和发现
• ✔ 服务监控：集成Spring Boot Admin，实现服务监控
• ✔ 服务消费：集成Ribbon、Feign，服务调用和负载均衡
• ✔ 服务熔断：集成Hystrix、Turbine，实现熔断和监控
• ✔ 服务网关：集成Spring Cloud Zuul，实现API网关
• ✔ 链路追踪：集成Sleuth、Zipkin，实现分布式链路追踪
• ✔ 配置中心：集成Config、Bus，实现分布式配置中心
• ✔ 代码生成：提供代码生成器，最大化的降低代码开发量
• ✘ 单点登录：利用 OAuth2, 提供统一的单点登录功能
• ✘ 系统登录：集成第三方登录功能（QQ、微信、微博）
• ...

代码生成器

代码生成器放在独立项目，地址如下：

https://gitee.com/liuge1988/kitty-generator

软件架构

后端架构

开发环境

• IDE : eclipse 4.x
• JDK : JDK1.8.x
• Maven : Maven 3.5.x
• MySQL: MySQL 5.7.x

技术选型

• 核心框架：Spring Boot 2.x
• 服务治理：Spring Cloud Finchley
• 安全框架：Spring Security 5.x
• 视图框架：Spring MVC 5.x
• 持久层框架：MyBatis 3.x
• 数据库连接池：Druid 1.x
• 日志管理：SLF4J、Log4j

项目结构

• kitty-common： 公共代码模块，主要放置一些工具类
• kitty-core： 核心代码模块，主要封装公共业务模块
• kitty-admin： 后台管理模块，包含用户、角色、菜单管理等
• kitty-backup： 系统数据备份备份模块，可选择独立部署
• kitty-monitor： 系统监控服务端，监控Spring Boot服务模块
• kitty-producer： 服务提供者示例，方便在此基础上搭建模块
• kitty-consumer： 服务消费者示例，方便在此基础上搭建模块
• kitty-hystrix： 服务熔断监控模块，收集汇总熔断统计信息
• kitty-zuul： API服务网关模块，统一管理和转发外部调用请求
• kitty-config： 配置中心服务端，生成GIT配置文件的访问接口
• kitty-consul： 注册中心，安装说明目录，内附安装引导说明
• kitty-zipkin： 链路追踪，安装说明目录，内附安装引导说明
• config-repo： 配置中心仓库，在GIT上统一存储系统配置文件
• kitty-pom： 聚合模块，仅为简化打包，一键执行打包所有模块

前端架构

开发环境

• IDE : VS Code 1.27
• NODE: Node 8.9.x
• NPM : NPM 6.4.x

技术选型

• 前端框架：Vue 2.x
• 页面组件：Element 2.x
• 状态管理：Vuex 2.x
• 后台交互：axios 0.18.x
• 图标使用：Font Awesome 4.x

项目结构

kitty-ui

• assets： 图标、字体、国际化信息等静态信息
• components： 组件库，对常用组件进行封装
• http： 后台交互模块，统一后台接口请求API
• i18n： 国际化模块，使用Vue i18n进行国际化
• mock： Mock模块，模拟接口调用并返回定制数据
• permission： 权限控制模块，处理权限认证逻辑
• router： 路由管理模块，负责页面各种路由配置
• store： 状态管理模块，提供组件间状态共享
• utils： 工具模块，提供一些通用的工具方法
• views： 页面模块，主要放置各种页面视图组件

项目演示

登录界面

主题切换

用户管理