This article has participated in the "Newcomer Creation Ceremony" event to start the road of gold creation together.
Java + Vue has many excellent background management systems, but in order to efficiently develop the background authority management system, the author developed vue3-element-plus-admin by himself.
vue3-element-plus-admin is a multi-enterprise background authority management system based on Vue3 + Element-plus + Java, which provides a complete authority system, allowing developers to focus on specific businesses, reducing development costs and improving projects. efficiency. It can be used for website management background, SAAS, CMS, CRM, OA, ERP, etc. Both enterprises and individuals can use it for free. Welcome to submit PR (requirements). If you encounter problems during development, you can submit Issues on Github.
If you feel good, please click ⭐star to support it, this will be my greatest support and encouragement!
Built-in function
- System Administration: Basic Functions
- Role: role menu permission assignment
- Administrator: Support multi-role assignment, display different pages according to the menu permissions possessed by the role
- Menu management: support to modify the name, icon and sorting of the current enterprise menu
- Log Management: Enterprise Logs
- Login log: query the records of the current enterprise administrator's login system
- Operation log: the current enterprise administrator's record query of the normal operation of the system
- Message management: push messages and send emails
- WebSocket: current enterprise websocket enterprise push record, system push record query
- Mail Management: Mail-related configuration
- Email Template: Configure the template for sending emails: such as verification code
- Mail records: query of mail records sent within the enterprise
- Enterprise management: complete enterprise-related configuration
- Enterprise list: add, edit, delete, source of system enterprises
- Enterprise role: Add, edit, delete roles in the enterprise
- Enterprise administrator: Add, edit, delete administrators in the enterprise
- Enterprise menu: The enterprise has the configuration of menu permissions
- Data center: some configuration management of the system
- 数据字典：系统内常用且固定的数据的维护
- 配置管理：系统内第三方的配置：如 oss、邮箱
- 文件管理：管理当前系统上传的文件及图片等信息
- 备份管理：对系统数据库的备份与恢复
- 区域管理：级联区域的维护
- 系统监控：对系统的监控管理
- 在线管理员：当前登录系统的管理员
- 日志：整个系统内的日志
- 登录日志：系统内所有管理员登录系统的记录查询
- 操作日志：系统内所有管理员对系统的正常操作的记录查询
- 异常日志：系统内运行是后的异常记录查询
- 定时任务日志：系统内定时任务执行的记录查询
- 开发配置：开发过程中的相关配置操作
- 菜单权限：整个系统内的菜单权限配置，支持拖拽排序
- 定时任务：系统内的所有定时任务维护
- 代码生成器：前端（api.js、list.vue、add-edit.vue）后端单表的增删改查相关代码生成
- 接口文档：后端使用的是 apidoc 生成的接口文档
- 主题设置：整体页面主题设置，布局设置，暗黑模式
分支
- master 轻量版本：多企业后台管理，持续维护分支
- base-refactoring 精简版本：单个企业基于 RBAC 的权限功能-仅包含
菜单管理、角色管理、用户管理三个模块 - composition-api 内置__
Type Script、I18n__，已停止维护可以参考相关的配置 - class-style 使用 class 风格开发，内置__
Type Script、I18n__，已停止维护可以参考相关的配置 - single 该分支为之前单个企业版本的代码
说明:Other branches are the branches used by the author when developing. Due to the author's continuous optimization, refactoring, and version iteration, composition-api and class-style are not updated synchronously and iteratively. Therefore, these two branches are recommended for reference learning.
environmental needs
- Node => 12.0.0
- Vue-Cli => 5.0.0
- JDK = 1.8.x
- Mysql >= 8.0.0
Project structure
vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│ ├─font 字体
│ └─sass 样式
│
├─components 通用组件
│ ├─global 全局组件
│ │ ├─container 布局组件
│ │ ├─iconfont 使用阿里图库图标的组件
│ │ ├─page 分页组件
│ │ └─index 统一全局注册
│ ├─collapse 折叠组件
│ ├─container-custom 自定义布局组件
│ ├─container-sidebar 左右布局组件
│ ├─enterprise-sidebar 企业侧边栏组件
│ ├─icon-select-input 阿里图库图标选择组件
│ ├─image-upload-single 单图片上传组件
│ ├─region 区域级联选择组件
│ └─view router-view 视图组件
│
├─directive 全局自定义指令
│
├─mixins 代码复用 （vue2混入）
│ ├─dictionary 字典
│ ├─model 双向绑定
│ └─page 分页
│
├─router 动态路由
│
├─store vuex
│ ├─modules
│ │ ├─administrator 管理员登录信息模块
│ │ ├─dictionary 数据字典模块
│ │ ├─enterprise 企业模块
│ │ ├─menu 菜单模块
│ │ ├─setting 设置模块
│ │ ├─tabs 标签页模块
│ │ ├─theme 主题模块
│ │ └─websocket 消息推送模块
│ └─index 动态加载模块
│
├─utils 工具模块
│ ├─constant 常量
│ ├─dictionary 字典
│ ├─index 工具
│ ├─prompt 单次提示处理类
│ ├─regular 正则
│ ├─request axios二次封装
│ ├─storage 本地缓存工具
│ └─websocket websocket对象封装
│
├─views 视图模块
│ ├─common 通用页面
│ │ ├─401 401页面
│ │ ├─404 404页面
│ │ ├─500 500页面
│ │ └─login 登录页面
│ ├─layout
│ │ ├─components
│ │ │ ├─headbar 顶部导航
│ │ │ ├─navigation 导航布局组件
│ │ │ ├─sidebar 侧边栏
│ │ │ ├─tabsbar 标签页
│ │ │ └─websocket 消息推送组件
│ │ └─index 布局入口页面
│ └─modules 页面模块
复制代码develop
# 克隆项目
git clone https://github.com/gmingchen/vue3-element-plus-admin.git
# 进入项目目录
cd vue3-element-plus-admin
# 安装依赖
npm install
# 若执行 npm install 报错，可能由于node版本太高原因导致，可执行一下命令
npm install --legacy-peer-deps
# 启动服务
npm run dev # 开发环境
npm run prod # 正式环境
npm run test # 测试环境
# 发布
npm run build:dev # 开发环境
npm run build:prod # 正式环境
npm run build:test # 测试环境
复制代码online preview
``` General background account: demo1, demo2, demo3 Enterprise super management account: admin1, admin2, admin3 The passwords of all accounts are unified: superadmin ``` > Prevent experience users from adding dirty data, and some operation permissions are not opened for demo accounts
demo image
Other open source projects
It is a back-end code that manages the base-refactoring branch of javathe background basic functional framework , based on thespringboot
It is an instant chat system based on vue3 and element-plus . Built-in friend private chat function.
It is the back-end code of the vue3-element-plus-imjava instant chat system , springbootbased on netty and shiro .
nod-server is a back-end service framework developed based on node. As long as you know SQL, you can write interfaces, and you don't have to look at the back-end face anymore.