# admin-damo-web

**Repository Path**: strivezhangp/admin-damo-web

## Basic Information

- **Project Name**: admin-damo-web
- **Description**: Vue通用后台权限分配系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-28
- **Last Updated**: 2024-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, Axios, Vuex, elementPlus

## README

# Admin-Vue通用后台权限管理系统

## 项目介绍

​	vue项目练手，构建了一个通用后台管理系统的前端项目，可以再次基础上实现二次后天管理系统的快速开发，本系统主要实现了以下功能：

- 用户登录
- 系统管理
  - 菜单管理
  - 角色管理
  - 用户管理	

## 技术栈

​	本系统的开发主要用到技术栈如下，使用`Vue.js` 前端开发常用框架，`Vue Cil` 快速创建和管理项，编程语言使用的 `TypeScript`。

|    依赖名    |   版本    |                             作用                             |
| :----------: | :-------: | :----------------------------------------------------------: |
|    axios     | `^1.6.5`  | 基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求和处理响应。  |
|   core-js    | `^3.8.3`  | 模块化的 JavaScript 标准库，用于补充 JavaScript 原生对象和方法，或提供新特性。 |
| element-plus | `^2.5.2`  |          基于 Vue 3 的组件库，提供丰富的 UI 组件。           |
|    mockjs    | `^1.1.0`  | 生成随机数据并模拟 HTTP 请求的库，用于前端开发时模拟后端接口。 |
|      qs      | `^6.11.2` | 解析和序列化 URL 参数的库，用于处理 HTTP 请求中的复杂参数。  |
|     vue      | `^3.2.13` |     前端 JavaScript 框架，用于构建用户界面和单页面应用。     |
|  vue-router  | `^4.0.3`  |   Vue.js 官方的路由管理器，用于构建单页面应用的路由系统。    |
|     vuex     | `^4.0.0`  |       Vue.js 的状态管理模式，用于集中管理应用的状态。        |

## 开发环境

- Node.js -- 20.11.0
- Pnpm 包管理工具 -- 8.14.1

## 项目结构

![image-20240414151514011](./src/assets/image-20240414151514011.png)

## 安装与启动

### 安装依赖与运行项目

```
// 拉取项目
git clone https://gitee.com/strivezhangp/admin-damo-web.git

// 安装依赖
pnpm install

// 运行项目
pnpm run serve
```

## 功能说明

### 登录页面

用户登录、图片验证码校验实现。

![image-20240414152233103](./src/assets/image-20240414152233103.png)

### 用户管理

实现了用户的增删改查，以及权限分配、重置密码、批量删除、按照用户名搜索等功能。

![image-20240415123557454](./src/assets/image-20240415123557454.png)

### 角色管理

实现角色的分配、增删改查等操作。

![image-20240415123931390](./src/assets/image-20240415123931390.png)

### 菜单管理

实现了菜单的树形展示、新增菜单等操作。

![image-20240415123950297](./src/assets/image-20240415123950297.png)

### Tag标签

结合Vuex状态管理，实现了动态标签页的功能。

![image-20240415124008359](./src/assets/image-20240415124008359.png)

### 用户信息及登出

Header部分，展示了用户头像以及个人中心、用户登出等功能。

![image-20240415124035850](./src/assets/image-20240415124035850.png)

## 贡献指南

教程贡献：https://gitee.com/markerhub/VueAdmin.git

前端项目的开发，参照原作者项目，使用了额Vue3+Ts重构，达到了同样的效果。

## 联系信息

后端项目采用Java编程语言，仓库如下：https://gitee.com/strivezhangp/admin-damo-java.git