From 827cab1d87cb6b05f3dac58485c82b298dbc97c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AD=8F=E7=81=BF=E6=96=8C?= <15815221751@163.com> Date: Fri, 21 Nov 2025 16:36:53 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20README.md=EF=BC=8C?= =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=AD=A6=E7=94=9F=E7=AE=A1=E7=90=86=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E5=8A=9F=E8=83=BD=E7=BC=96=E5=86=99=E5=AE=8C=E6=95=B4?= =?UTF-8?q?=E7=9A=84=E9=A1=B9=E7=9B=AE=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 344 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 238 insertions(+), 106 deletions(-) diff --git a/README.md b/README.md index ab94ab3..8b0ed15 100644 --- a/README.md +++ b/README.md @@ -1,148 +1,280 @@ -


+


-[![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) +

学生管理系统

-

vue-element-plus-admin

-
- -**English** | [中文](./README.zh-CN.md) - -## 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-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. +基于 Vue3 + Element Plus + TypeScript + Vite 的现代化学生管理系统 -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 - -- **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 - -## 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 +## 项目简介 -account: **admin/admin** +本项目是一个基于 Vue3、Element Plus、TypeScript 和 Vite 等现代化技术栈开发的**学生管理系统**。系统提供了完整的学生、班级、专业、教师等信息管理功能，具有用户友好的界面和强大的后端集成能力。 -Online examples do not apply to menu filtering by default, but directly use Static routing +该系统已完全对接后端 API，实现了完整的学生管理业务流程，包括数据的增删改查、导入导出、状态管理等功能。 -## Documentation +## 核心功能 -[Document Github](https://element-plus-admin-doc.cn/) +- **学生管理**：支持学生信息的增删改查、启用/禁用、导入导出等操作 +- **班级管理**：班级信息维护、班级状态管理、班级关联专业等功能 +- **专业管理**：专业信息的管理和维护 +- **教师管理**：教师信息管理、教师状态管理等功能 +- **权限管理**：基于角色的权限控制系统（RBAC） +- **动态菜单**：基于权限的动态路由和菜单系统 +- **主题切换**：支持多种主题切换 +- **国际化支持**：内置完整的国际化解决方案 +- **数据导入**：支持 Excel 文件导入功能 +- **响应式设计**：完全响应式布局，支持各种设备 -[Document Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc) +## 技术栈 -## Preparation +- **前端框架**：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 等 -- [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 +``` +src/ +├── api/ # API 接口定义 +│ ├── student/ # 学生管理接口 +│ ├── class/ # 班级管理接口 +│ ├── teacher/ # 教师管理接口 +│ └── major/ # 专业管理接口 +├── views/ # 页面视图 +│ ├── Student/ # 学生管理页面 +│ ├── Class/ # 班级管理页面 +│ ├── Teacher/ # 教师管理页面 +│ ├── Major/ # 专业管理页面 +│ └── Authorization/ # 权限管理 +├── components/ # 可复用组件 +├── hooks/ # 组合式函数钩子 +├── store/ # Pinia 状态管理 +├── router/ # 路由配置 +└── assets/ # 静态资源 +``` -- Get the project code +## 主要模块功能 + +### 学生管理（Student） +- 查看学生列表（分页、搜索、排序） +- 新增学生 +- 编辑学生信息 +- 查看学生详情 +- 删除学生 +- 启用/禁用学生 +- Excel 批量导入学生 + +### 班级管理（Class） +- 查看班级列表 +- 新增班级 +- 编辑班级信息 +- 查看班级详情 +- 删除班级 +- 启用/禁用班级 +- Excel 批量导入班级 + +### 教师管理（Teacher） +- 查看教师列表 +- 新增教师 +- 编辑教师信息 +- 查看教师详情 +- 删除教师 +- 启用/禁用教师 +- Excel 批量导入教师 + +### 专业管理（Major） +- 查看专业列表 +- 新增专业 +- 编辑专业信息 +- 删除专业 + +## 前置要求 + +- **Node.js** >= 18.0.0 （[下载](http://nodejs.org/)） +- **pnpm** >= 8.1.0 （推荐使用 pnpm 作为包管理器） +- **Git** （[下载](https://git-scm.com/)） + +## 快速开始 + +### 1. 克隆项目 ```bash -git clone https://github.com/kailong321200875/vue-element-plus-admin.git +git clone https://github.com/yuxingshi/vue-element-plus-admin.git +cd vue-element-plus-admin ``` -- Installation dependencies +### 2. 安装依赖 ```bash -cd vue-element-plus-admin - pnpm install - ``` -- run +### 3. 启动开发服务器 ```bash pnpm run dev ``` -- build +访问 [http://localhost:5173](http://localhost:5173) + +### 4. 构建生产版本 ```bash +# 生产环境构建 pnpm run build:pro -``` - -## Change Log -[CHANGELOG](./CHANGELOG.md) - -## How to contribute - - - - - -You can [Raise an issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) Or submit a Pull Request. - -**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` - -## Git Contribution submission specification - -- `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 +# 开发环境构建 +pnpm run build:dev -The `Chrome 80+` browser is recommended for local development - -Support modern browsers, not IE +# 测试环境构建 +pnpm run build:test +``` -| [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | -| :-: | :-: | :-: | :-: | :-: | -| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +### 5. 预览生产构建 -## Donate +```bash +pnpm run serve:pro +``` -If you find this project helpful, welcome sponsorship to show your support~ +## 可用的脚本命令 -[Paypal Me](https://www.paypal.com/paypalme/ckl94) +```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 +- `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` - 导入班级数据 + +### 教师管理 API +- `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` - 导入教师数据 + +### 专业管理 API +- `GET /api/major/list` - 获取专业列表 +- `GET /api/major/:id` - 获取专业详情 +- `POST /api/major/create` - 创建专业 +- `PUT /api/major/update` - 更新专业信息 +- `DELETE /api/major/:id` - 删除专业 + +## 浏览器支持 + +本项目支持所有现代浏览器，不支持 IE 浏览器。 + +| 浏览器 | 版本要求 | +| :-: | :-: | +| Chrome | 最新 2 个版本 | +| Firefox | 最新 2 个版本 | +| Safari | 最新 2 个版本 | +| Edge | 最新 2 个版本 | + +## 贡献指南 + +我们欢迎所有的贡献！请按照以下步骤进行： + +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 + +### Git 提交规范 + +遵循以下提交信息规范： + +- `feat` - 新功能 +- `fix` - 修复 bug +- `docs` - 文档更新 +- `style` - 代码格式调整（不影响功能） +- `refactor` - 代码重构 +- `perf` - 性能优化 +- `test` - 添加测试 +- `build` - 构建或依赖变更 +- `ci` - CI/CD 配置变更 +- `chore` - 其他杂项变更 +- `revert` - 回滚提交 + +## 常见问题 + +### Q: 项目如何配置后端 API 地址？ +A: 修改 `src/api` 目录下的环境配置文件，或者在 `.env` 文件中配置 `VITE_API_BASE_URL`。 + +### Q: 如何自定义主题色？ +A: 通过 Element Plus 的主题配置系统进行自定义，详见项目的主题配置文件。 + +### Q: 支持哪些数据导入格式？ +A: 目前支持 Excel 文件（.xlsx, .xls）的导入功能。 + +## 项目成员 + +- **开发者**：yuxingshi +- **框架基础**：[vue-element-plus-admin](https://github.com/kailong321200875/vue-element-plus-admin) + +## 更新日志 -### My QR code +[CHANGELOG](./CHANGELOG.md) -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. +## 许可证 - +[MIT](./LICENSE) -## License +--- -[MIT](./LICENSE) +**如有任何问题或建议，欢迎提出 Issue 或 Pull Request！**