springboot + VUE实现后台管理系统(集成JWT接口权限验证)

源码地址：https://codechina.csdn.net/wwwzhouzy/vuespringboot

前端项目:smart-admin-web

后台项目:bootAdmin

一、用到的技术

1、前端

Vue + Vue-Router + Vuex + ViewUI + vue-enum +Axios

View UI 即为原先的 iView，从 2019 年 10 月起正式更名为 View UI,官网地址:https://www.iviewui.com/

不过也可以使用VUE+elementUI 官网地址:https://element.eleme.cn/#/zh-CN

前端特点
- 高质量的代码、代码结构、和代码注释
- 漂亮的UI，菜单栏、标签页，体验、交互更好用的员工、部门、角色、菜单管理等等
- 优化基于Keepalive的标签页，做到标签页该缓存的时候缓存，比如左右切换等，不该缓存的时候不缓存，比如新建，表单提交结束等
- 前端常量维护: vue-enum，拒绝出现魔法数字，代码不可维护的现象
- 全新的基于前端的权限设计（忘掉传统的权限设计吧，已经不适合这个前端时代）
- 基于websocket的在线人数
- 支持一级、二级、三级菜单，四级菜单以及搜索功能
- 其他功能：邮件、富文本、消息、系统配置等等

2、后台

SpringBoot2 + Mybatis-plus + jwt + druid + mysql

后端特点

- 高质量的Java代码、分包结构、和代码注释
- 业内独创的请求返回码维护，非常值得一看
- 基于一个注解和controller的权限设计放弃更复杂的shiro，以及一套数据权限支持
- 四层架构（controller, service, manager, dao）
- 代码阅读性强、扩展性极高的员工、部门、角色、菜单管理
- 基于LRU策略的内存级权限缓存
- 配合前端vue-enum的swagger文档注解
- 心跳服务，让你发现有哪些机器再跑，哪些人在偷偷的跑你的Job
- 自定义的quartz job添加和修改，方便测试人员测试
- smart-reload，为系统预留钩子，动态加载，在不重启程序前提下执行一些代码，你懂的
- 以上只是一些举例，更多灿若繁星的惊喜和细节，等待着你的发现！

二、效果图

 

 

 

 

三、需要注意的地方 

1、mysql版本,我的是5.1.41

版本不一样需要换成对应的版本驱动

2、需要安装lombok

3、redis地址需要替换成自己的

4、JDK版本1.8或以上

5、前端需要安装node.js

6、npm*

四、快速部署

1、启动后端

Sql脚本：`/bootAdmin/smart-admin-api/src/main/resources/sql`
先执行 `smart-admin.sql`
再执行 `quartz_mysql_2.3.0.sql`

如果有redis环境，可以直接忽略，如果没有，请安装：
Linux版本：[https://redis.io/download](https://redis.io/download)
Windows版本：[https://github.com/microsoftarchive/redis/releases](https://github.com/microsoftarchive/redis/releases)

进入 `smart-admin-api` 项目，打开`src/main/resources/dev/application.properties`文件

修改成自己的jdbc地址，redis地址

运行SmartAdminApplication

2、启动前端

启动前，确保nodejs版本和npm版本支持 vue2.x

命令行 进入`/smart-admin-web`，执行`npm install`命令，安装依赖

安装依赖后，在`/smart-admin-web`目录，命令行执行 `npm run local`

访问 [http://localhost:8080](http://localhost:8080)  ， 账号：sa/123456