Compare commits

..

2 Commits

@ -1,148 +1,274 @@
<div align="center"> <a href="https://github.com/kailong321200875/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br> <div align="center"> <a href="https://github.com/yuxingshi/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br>
[![license](https://img.shields.io/github/license/kailong321200875/vue-element-plus-admin.svg)](LICENSE) [![repo-size](https://img.shields.io/github/repo-size/kailong321200875/vue-element-plus-admin.svg)](repo-size) [![last-commit](https://img.shields.io/github/last-commit/kailong321200875/vue-element-plus-admin.svg)](last-commit) [![stars](https://img.shields.io/github/stars/kailong321200875/vue-element-plus-admin.svg)](stars) [![forks](https://img.shields.io/github/forks/kailong321200875/vue-element-plus-admin.svg)](forks) [![release](https://img.shields.io/github/release/kailong321200875/vue-element-plus-admin.svg)](release) [![watchers](https://img.shields.io/github/watchers/kailong321200875/vue-element-plus-admin.svg)](watchers) <h1>学生管理系统</h1>
基于 Vue3 + Element Plus + TypeScript + Vite 的现代化学生管理系统
<h1>vue-element-plus-admin</h1>
</div> </div>
**English** | [中文](./README.zh-CN.md) ## 项目简介
## Introduction 本项目是一个基于 Vue3、Element Plus、TypeScript 和 Vite 等现代化技术栈开发的**学生管理系统**。系统提供了完整的学生、班级、专业、教师等信息管理功能,具有用户友好的界面和强大的后端集成能力。
vue-element-plus-admin is a free and open source middle and background template based on `element-plus`. Developed using the latest mainstream technologies such as `vue3`, `vite` and `typescript`, the out of the box middle and background front-end solution can be used as the starting template of the project and learning reference. And always pay attention to the latest technological trends and update them as soon as possible. 该系统已完全对接后端 API实现了完整的学生管理业务流程包括数据的增删改查、导入导出、状态管理等功能。
vue-element-plus-admin is positioned as a background integration scheme, which is not suitable for secondary development as a basic template. Because it integrates many functions that you may not use, it will cause a lot of code redundancy. If your project doesn't pay attention to this problem, you can also directly carry out secondary development based on it. ## 核心功能
If you need a basic template, please switch to the `mini` branch. `mini` simply integrates some common layout functions such as layout and dynamic menu, which is more suitable for developers to carry out secondary development. - **学生管理**:支持学生信息的增删改查、启用/禁用、导入导出等操作
- **班级管理**:班级信息维护、班级状态管理、班级关联专业等功能
- **专业管理**:专业信息的管理和维护
- **教师管理**:教师信息管理、教师状态管理等功能
- **权限管理**基于角色的权限控制系统RBAC
- **动态菜单**:基于权限的动态路由和菜单系统
- **主题切换**:支持多种主题切换
- **国际化支持**:内置完整的国际化解决方案
- **数据导入**:支持 Excel 文件导入功能
- **响应式设计**:完全响应式布局,支持各种设备
## Feature ## 技术栈
- **State of The Art Development**Use front-end front-end technology development such as Vue3/vite4 - **前端框架**Vue 3.5.13
- **TypeScript**: Application-level JavaScript language - **UI 组件库**Element Plus 2.9.2
- **Theming**: Configurable themes - **编程语言**TypeScript 5.7.3
- **International**Built-in complete internationalization program - **构建工具**Vite 6.0.7
- **Mock Server** Built-in mock data scheme - **包管理器**pnpm 9.15.3
- **Authority** Built-in complete dynamic routing permission generation scheme. - **路由管理**Vue Router 4.5.0
- **Component** Multiple commonly used components are encapsulated twice - **状态管理**Pinia 2.3.0
- **Examples** Built-in rich examples - **HTTP 客户端**Axios 1.7.9
- **数据可视化**ECharts 5.6.0
- **国际化**Vue i18n 11.0.1
- **工具库**lodash-es, dayjs, qrcode 等
## Preview ## 项目结构
- [vue-element-plus-admin](https://element-plus-admin.cn/) - Full version of the github site ```
- [vue-element-plus-admin](https://kailong110120130.gitee.io/vue-element-plus-admin) - Full version of the gitee site src/
├── api/ # API 接口定义
│ ├── student/ # 学生管理接口
│ ├── class/ # 班级管理接口
│ ├── teacher/ # 教师管理接口
│ └── major/ # 专业管理接口
├── views/ # 页面视图
│ ├── Student/ # 学生管理页面
│ ├── Class/ # 班级管理页面
│ ├── Teacher/ # 教师管理页面
│ ├── Major/ # 专业管理页面
│ └── Authorization/ # 权限管理
├── components/ # 可复用组件
├── hooks/ # 组合式函数钩子
├── store/ # Pinia 状态管理
├── router/ # 路由配置
└── assets/ # 静态资源
```
account: **admin/admin** ## 主要模块功能
Online examples do not apply to menu filtering by default, but directly use Static routing ### 学生管理Student
## Documentation - 查看学生列表(分页、搜索、排序)
- 新增学生
- 编辑学生信息
- 查看学生详情
- 删除学生
- 启用/禁用学生
- Excel 批量导入学生
[Document Github](https://element-plus-admin-doc.cn/) ### 班级管理Class
[Document Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc) - 查看班级列表
- 新增班级
- 编辑班级信息
- 查看班级详情
- 删除班级
- 启用/禁用班级
- Excel 批量导入班级
## Preparation ### 教师管理Teacher
- [node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment - 查看教师列表
- [Vite](https://vitejs.dev/) - Familiar with vite features - 新增教师
- [Vue3](https://v3.vuejs.org/) - Familiar with Vue basic syntax - 编辑教师信息
- [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript` - 查看教师详情
- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax - 删除教师
- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router - 启用/禁用教师
- [Element-Plus](https://element-plus.org/) - Familiar with the basic use of element-plus - Excel 批量导入教师
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
## Install and use ### 专业管理Major
- Get the project code - 查看专业列表
- 新增专业
- 编辑专业信息
- 删除专业
```bash ## 前置要求
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
``` - **Node.js** >= 18.0.0 [下载](http://nodejs.org/)
- **pnpm** >= 8.1.0 (推荐使用 pnpm 作为包管理器)
- **Git** [下载](https://git-scm.com/)
## 快速开始
- Installation dependencies ### 1. 克隆项目
```bash ```bash
git clone https://github.com/yuxingshi/vue-element-plus-admin.git
cd vue-element-plus-admin cd vue-element-plus-admin
```
pnpm install ### 2. 安装依赖
```bash
pnpm install
``` ```
- run ### 3. 启动开发服务器
```bash ```bash
pnpm run dev pnpm run dev
``` ```
- build 访问 [http://localhost:5173](http://localhost:5173)
### 4. 构建生产版本
```bash ```bash
# 生产环境构建
pnpm run build:pro pnpm run build:pro
# 开发环境构建
pnpm run build:dev
# 测试环境构建
pnpm run build:test
``` ```
## Change Log ### 5. 预览生产构建
```bash
pnpm run serve:pro
```
## 可用的脚本命令
```bash
# 开发
pnpm run dev # 启动开发服务器
# 构建
pnpm run build:pro # 生产环境构建
pnpm run build:dev # 开发环境构建
pnpm run build:test # 测试环境构建
pnpm run build:gitee # Gitee 构建
# 预览
pnpm run serve:pro # 预览生产构建
pnpm run serve:dev # 预览开发构建
pnpm run serve:test # 预览测试构建
# 代码检查和格式化
pnpm run lint:eslint # ESLint 检查和修复
pnpm run lint:format # Prettier 代码格式化
pnpm run lint:style # Stylelint 样式检查
pnpm run ts:check # TypeScript 类型检查
# 其他
pnpm run icon # 生成图标文件
pnpm run clean # 清除 node_modules
pnpm run clean:cache # 清除缓存
```
## API 文档
本项目已完全对接后端 API主要包括以下端点
### 学生管理 API
- `GET /api/student/list` - 获取学生列表
- `GET /api/student/:id` - 获取学生详情
- `POST /api/student/create` - 创建学生
- `PUT /api/student/update` - 更新学生信息
- `DELETE /api/student/:id` - 删除学生
- `POST /api/student/enable` - 启用学生
- `POST /api/student/disable` - 禁用学生
- `POST /api/student/import` - 导入学生数据
### 班级管理 API
[CHANGELOG](./CHANGELOG.md) - `GET /api/class/list` - 获取班级列表
- `GET /api/class/:id` - 获取班级详情
- `POST /api/class/create` - 创建班级
- `PUT /api/class/update` - 更新班级信息
- `DELETE /api/class/:id` - 删除班级
- `POST /api/class/enable` - 启用班级
- `POST /api/class/disable` - 禁用班级
- `POST /api/class/import` - 导入班级数据
## How to contribute ### 教师管理 API
<a href="https://github.com/kailong321200875/vue-element-plus-admin/graphs/contributors"> - `GET /api/teacher/list` - 获取教师列表
<img src="https://contrib.rocks/image?repo=kailong321200875/vue-element-plus-admin" /> - `GET /api/teacher/:id` - 获取教师详情
</a> - `POST /api/teacher/create` - 创建教师
- `PUT /api/teacher/update` - 更新教师信息
- `DELETE /api/teacher/:id` - 删除教师
- `POST /api/teacher/enable` - 启用教师
- `POST /api/teacher/disable` - 禁用教师
- `POST /api/teacher/import` - 导入教师数据
You can [Raise an issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) Or submit a Pull Request. ### 专业管理 API
**Pull Request:** - `GET /api/major/list` - 获取专业列表
- `GET /api/major/:id` - 获取专业详情
- `POST /api/major/create` - 创建专业
- `PUT /api/major/update` - 更新专业信息
- `DELETE /api/major/:id` - 删除专业
1. Fork code ## 浏览器支持
2. Create your own branch: `git checkout -b feat/xxxx`
3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
4. Push your branch: `git push origin feat/xxxx`
5. submit `pull request`
## Git Contribution submission specification 本项目支持所有现代浏览器,不支持 IE 浏览器。
- `feat` New features | 浏览器 | 版本要求 |
- `fix` Fix bugs | :-----: | :-----------: |
- `docs` document | Chrome | 最新 2 个版本 |
- `style` Format and style (changes that do not affect code operation) | Firefox | 最新 2 个版本 |
- `refactor` Refactor | Safari | 最新 2 个版本 |
- `perf` Optimize related, such as improving performance and experience | Edge | 最新 2 个版本 |
- `test` Add test
- `build` Compilation related modifications, changes to project construction or dependencies
- `ci` Continuous integration modification
- `chore` Changes in the construction process or auxiliary tools
- `revert` Rollback to previous version
- `workflow` Workflow improvement
- `mod` Uncertain modification classification
- `wip` Under development
- `types` type
## Browser support ## 贡献指南
The `Chrome 80+` browser is recommended for local development 我们欢迎所有的贡献!请按照以下步骤进行:
Support modern browsers, not IE 1. Fork 项目
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'feat: Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | ### Git 提交规范
| :-: | :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Donate 遵循以下提交信息规范:
If you find this project helpful, welcome sponsorship to show your support~ - `feat` - 新功能
- `fix` - 修复 bug
- `docs` - 文档更新
- `style` - 代码格式调整(不影响功能)
- `refactor` - 代码重构
- `perf` - 性能优化
- `test` - 添加测试
- `build` - 构建或依赖变更
- `ci` - CI/CD 配置变更
- `chore` - 其他杂项变更
- `revert` - 回滚提交
[Paypal Me](https://www.paypal.com/paypalme/ckl94) ## 常见问题
<img src="https://github.com/kailong321200875/my-image/raw/master/pay.jpg" /> ### Q: 项目如何配置后端 API 地址?
### My QR code A: 修改 `src/api` 目录下的环境配置文件,或者在 `.env` 文件中配置 `VITE_API_BASE_URL`
If you have any project cooperation or outsourcing, please scan the code to add me as a friend and leave a note of your purpose. ### Q: 如何自定义主题色?
<img src="https://github.com/kailong321200875/my-image/raw/master/me.jpg" /> A: 通过 Element Plus 的主题配置系统进行自定义,详见项目的主题配置文件。
## License ### Q: 支持哪些数据导入格式?
[MIT](./LICENSE) A: 目前支持 Excel 文件(.xlsx, .xls的导入功能。

Loading…
Cancel
Save