Compare commits

..

No commits in common. '32e370d364d363ebd073cfac72c340d414cc0b25' and '4a8cbaba6a35fbc01a5788bb83d8065c66b641a0' have entirely different histories.

@ -1,274 +1,148 @@
<div align="center"> <a href="https://github.com/yuxingshi/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br>
<div align="center"> <a href="https://github.com/kailong321200875/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br>
<h1>学生管理系统</h1>
基于 Vue3 + Element Plus + TypeScript + Vite 的现代化学生管理系统
[![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>vue-element-plus-admin</h1>
</div>
## 项目简介
本项目是一个基于 Vue3、Element Plus、TypeScript 和 Vite 等现代化技术栈开发的**学生管理系统**。系统提供了完整的学生、班级、专业、教师等信息管理功能,具有用户友好的界面和强大的后端集成能力。
该系统已完全对接后端 API实现了完整的学生管理业务流程包括数据的增删改查、导入导出、状态管理等功能。
## 核心功能
**English** | [中文](./README.zh-CN.md)
- **学生管理**:支持学生信息的增删改查、启用/禁用、导入导出等操作
- **班级管理**:班级信息维护、班级状态管理、班级关联专业等功能
- **专业管理**:专业信息的管理和维护
- **教师管理**:教师信息管理、教师状态管理等功能
- **权限管理**基于角色的权限控制系统RBAC
- **动态菜单**:基于权限的动态路由和菜单系统
- **主题切换**:支持多种主题切换
- **国际化支持**:内置完整的国际化解决方案
- **数据导入**:支持 Excel 文件导入功能
- **响应式设计**:完全响应式布局,支持各种设备
## Introduction
## 技术栈
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.
- **前端框架**Vue 3.5.13
- **UI 组件库**Element Plus 2.9.2
- **编程语言**TypeScript 5.7.3
- **构建工具**Vite 6.0.7
- **包管理器**pnpm 9.15.3
- **路由管理**Vue Router 4.5.0
- **状态管理**Pinia 2.3.0
- **HTTP 客户端**Axios 1.7.9
- **数据可视化**ECharts 5.6.0
- **国际化**Vue i18n 11.0.1
- **工具库**lodash-es, dayjs, qrcode 等
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.
## 项目结构
```
src/
├── api/ # API 接口定义
│ ├── student/ # 学生管理接口
│ ├── class/ # 班级管理接口
│ ├── teacher/ # 教师管理接口
│ └── major/ # 专业管理接口
├── views/ # 页面视图
│ ├── Student/ # 学生管理页面
│ ├── Class/ # 班级管理页面
│ ├── Teacher/ # 教师管理页面
│ ├── Major/ # 专业管理页面
│ └── Authorization/ # 权限管理
├── components/ # 可复用组件
├── hooks/ # 组合式函数钩子
├── store/ # Pinia 状态管理
├── router/ # 路由配置
└── assets/ # 静态资源
```
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.
## 主要模块功能
## Feature
### 学生管理Student
- **State of The Art Development**Use front-end front-end technology development such as Vue3/vite4
- **TypeScript**: Application-level JavaScript language
- **Theming**: Configurable themes
- **International**Built-in complete internationalization program
- **Mock Server** Built-in mock data scheme
- **Authority** Built-in complete dynamic routing permission generation scheme.
- **Component** Multiple commonly used components are encapsulated twice
- **Examples** Built-in rich examples
- 查看学生列表(分页、搜索、排序)
- 新增学生
- 编辑学生信息
- 查看学生详情
- 删除学生
- 启用/禁用学生
- Excel 批量导入学生
## Preview
### 班级管理Class
- [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
- 查看班级列表
- 新增班级
- 编辑班级信息
- 查看班级详情
- 删除班级
- 启用/禁用班级
- Excel 批量导入班级
account: **admin/admin**
### 教师管理Teacher
Online examples do not apply to menu filtering by default, but directly use Static routing
- 查看教师列表
- 新增教师
- 编辑教师信息
- 查看教师详情
- 删除教师
- 启用/禁用教师
- Excel 批量导入教师
## Documentation
### 专业管理Major
[Document Github](https://element-plus-admin-doc.cn/)
- 查看专业列表
- 新增专业
- 编辑专业信息
- 删除专业
[Document Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc)
## 前置要求
## Preparation
- **Node.js** >= 18.0.0 [下载](http://nodejs.org/)
- **pnpm** >= 8.1.0 (推荐使用 pnpm 作为包管理器)
- **Git** [下载](https://git-scm.com/)
- [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
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
## 快速开始
## Install and use
### 1. 克隆项目
- Get the project code
```bash
git clone https://github.com/yuxingshi/vue-element-plus-admin.git
cd vue-element-plus-admin
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
```
### 2. 安装依赖
- Installation dependencies
```bash
cd vue-element-plus-admin
pnpm install
```
### 3. 启动开发服务器
- run
```bash
pnpm run dev
```
访问 [http://localhost:5173](http://localhost:5173)
### 4. 构建生产版本
- build
```bash
# 生产环境构建
pnpm run build:pro
# 开发环境构建
pnpm run build:dev
# 测试环境构建
pnpm run build:test
```
### 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
## Change Log
- `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` - 导入班级数据
[CHANGELOG](./CHANGELOG.md)
### 教师管理 API
## How to contribute
- `GET /api/teacher/list` - 获取教师列表
- `GET /api/teacher/:id` - 获取教师详情
- `POST /api/teacher/create` - 创建教师
- `PUT /api/teacher/update` - 更新教师信息
- `DELETE /api/teacher/:id` - 删除教师
- `POST /api/teacher/enable` - 启用教师
- `POST /api/teacher/disable` - 禁用教师
- `POST /api/teacher/import` - 导入教师数据
<a href="https://github.com/kailong321200875/vue-element-plus-admin/graphs/contributors">
<img src="https://contrib.rocks/image?repo=kailong321200875/vue-element-plus-admin" />
</a>
### 专业管理 API
You can [Raise an issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) Or submit a Pull Request.
- `GET /api/major/list` - 获取专业列表
- `GET /api/major/:id` - 获取专业详情
- `POST /api/major/create` - 创建专业
- `PUT /api/major/update` - 更新专业信息
- `DELETE /api/major/:id` - 删除专业
**Pull Request:**
## 浏览器支持
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`
本项目支持所有现代浏览器,不支持 IE 浏览器。
## Git Contribution submission specification
| 浏览器 | 版本要求 |
| :-----: | :-----------: |
| Chrome | 最新 2 个版本 |
| Firefox | 最新 2 个版本 |
| Safari | 最新 2 个版本 |
| Edge | 最新 2 个版本 |
- `feat` New features
- `fix` Fix bugs
- `docs` document
- `style` Format and style (changes that do not affect code operation)
- `refactor` Refactor
- `perf` Optimize related, such as improving performance and experience
- `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
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
Support modern browsers, not IE
### Git 提交规范
| [<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 |
| :-: | :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
遵循以下提交信息规范:
## Donate
- `feat` - 新功能
- `fix` - 修复 bug
- `docs` - 文档更新
- `style` - 代码格式调整(不影响功能)
- `refactor` - 代码重构
- `perf` - 性能优化
- `test` - 添加测试
- `build` - 构建或依赖变更
- `ci` - CI/CD 配置变更
- `chore` - 其他杂项变更
- `revert` - 回滚提交
If you find this project helpful, welcome sponsorship to show your support~
## 常见问题
[Paypal Me](https://www.paypal.com/paypalme/ckl94)
### Q: 项目如何配置后端 API 地址?
<img src="https://github.com/kailong321200875/my-image/raw/master/pay.jpg" />
A: 修改 `src/api` 目录下的环境配置文件,或者在 `.env` 文件中配置 `VITE_API_BASE_URL`
### My QR code
### Q: 如何自定义主题色?
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.
A: 通过 Element Plus 的主题配置系统进行自定义,详见项目的主题配置文件。
<img src="https://github.com/kailong321200875/my-image/raw/master/me.jpg" />
### Q: 支持哪些数据导入格式?
## License
A: 目前支持 Excel 文件(.xlsx, .xls的导入功能。
[MIT](./LICENSE)

Loading…
Cancel
Save