# Vue3+ElementPlus+Koa2 全栈开发后台系统 前端

**Repository Path**: youwei997/vue3-admin

## Basic Information

- **Project Name**: Vue3+ElementPlus+Koa2 全栈开发后台系统 前端
- **Description**: Vue3+ElementPlus+Koa2 全栈开发后台系统 前端
https://coding.imooc.com/class/502.html
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 1
- **Created**: 2021-12-18
- **Last Updated**: 2025-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3 admin
使用vue3 + vite + typescript + element-plus + pinia + axios 搭建的后台管理系统，包含用户管理、角色管理、部门管理、菜单管理、休假申请等功能。服务端使用koa2 + mongodb + jsonwebtoken，数据库使用mongoose搭建。
### [点击预览](http://82.157.150.149:8081/)
## 功能介绍

1. 用户管理：对用户的增删改查，可以给用户分配角色，部门

    - 用户角色：用于权限限制，某些权限只能看到部分菜单和页面，只能操作部分按钮
    - 用户部门：用于提交申请休假功能，当前部门的用户提交申请，第一轮审核，只能当前部门的负责人审核

2. 角色管理：对角色的增删改查，以及分配权限，限制某些角色能查看哪些菜单页面和按钮
3. 部门管理：对部门的增删改查。设置部门负责人，主要用于流程审批
4. 菜单管理：对菜单的增删改查，设置对应页面的路由地址和前端组件的地址
5. 休假申请：用于提交休假申请，查看用户休假申请的列表
    - 休假申请的第一轮审批由用户所在的部门负责人审批
6. 审批：部门审批
    - 审批流程：用户提交->用户所在的部门负责人->人事部门->财务部门

## 默认三个用户，对应不同权限（权限限制只做了菜单管理和用户管理）

-   账号：admin 密码：
    -   查看全部权限。
-   账号：张三 密码：
    -   角色：前端。
    -   ![](./data/frontend.png)
-   账号：李四 密码：
    -   角色：产品。
    -   ![](./data/product.png)

## 一、技术栈

该项目主要使用 `Vue`搭配`element-plus`采用组件化的方式开发完成,此外项目中陆续使用有

-   VueRouter
-   VueX
-   vite
-   axios/fetch
-   ES6
-   sass

## 二、运行效果截图

#### 1 欢迎页

![dark](./data/welcome.png)

#### 2 角色管理

![dark](./data/user.png)

#### 3 部门管理

![dark](./data/dept.png)

#### 4 菜单管理

![dark](./data/menu.png)

#### 5 用户管理

![dark](./data/user.png)

#### 6 权限管理

-   权限管理按钮
    -   查看按钮：分配权限时，查看按钮如果勾上就可以查看对应的页面，如果不勾，并且其他同级按钮都没有勾上，就整个页无法查看
    -   其他按钮：其他按钮勾选，必定可以查看页面

![dark](./data/permission.png)

#### 7 申请休假

![dark](./data/leave.png)

#### 8 审批

![dark](./data/approve.png)

## bug

1. （已解决）菜单管理，搜索菜单，不包含子菜单
2. ？菜单管理，创建二级菜单时，需要分配一个按钮，否则页面无法打开！！！！！！！！！！！！！！！！！！！
3. （已解决）菜单管理，停用菜单功能失效
4. （已解决）登录后无法进入页面，需要刷新一下
5. ？警告：菜单搜索，从正常菜单查询，切换到停用菜单查询，再切换到正常查询有警告