项目总览
项目名称
智阅图书信息管理系统
一句话描述
一个用于图书馆馆藏、读者、借还、罚金、统计和账号权限管理的前端工作台，同时提供读者自助借阅入口。
项目目标
- 帮助馆员快速完成图书入库、上架下架、读者登记、借书、还书、罚金收缴等日常业务。
- 帮助管理员查看运营概览，并管理系统账号与权限。
- 帮助读者自主检索图书、发起借阅、查看借阅历史和结清滞纳金。
- 通过清晰的状态标签、筛选表单、分页表格和图表降低管理成本。
目标用户
- 系统管理员：管理馆藏、读者、借还业务和系统用户。
- 图书操作员：处理图书、读者、借还服务。
- 自助读者：检索馆藏，查看个人借阅与罚金记录。
网站类型
- 工具型 Web App
- 后台管理系统
- 读者自助门户
技术栈
- 前端框架：Vue 3 + TypeScript + Vite
- 状态管理：Pinia
- 路由：Vue Router Hash History
- UI 组件：Element Plus
- 图标：Element Plus Icons
- 图表：ECharts
- 请求：Axios
- 样式：全局 CSS + Vue scoped CSS
- 后端：Spring Boot 3，接口前缀
/api
主要页面
| 路由 | 页面 | 用户 | 说明 |
|---|---|---|---|
#/login |
登录页 | 全部 | 员工通道 / 读者通道分段切换 |
#/dashboard |
运营概览 | 员工 | 馆藏、读者、借阅和罚金统计 |
#/books |
图书管理 | 员工 | 图书检索、列表/卡片视图、增删改、上下架、封面上传 |
#/readers |
读者管理 | 员工 | 读者档案、借阅额度、借阅记录抽屉 |
#/borrows |
借还服务 | 员工 | 借阅柜台、在外借出记录、超期滞纳罚款 |
#/users |
账号与权限 | 管理员 | 系统用户增删改、启停、角色设置 |
#/catalog |
图书检索大厅 | 读者 | 读者自主检索和申请借书 |
#/my-borrows |
我的借阅 | 读者 | 借阅记录、还书、滞纳金模拟缴费 |
权限规则
- 未登录访问受保护页面时跳转到
#/login。 - 读者登录后默认进入
#/catalog。 - 员工登录后默认进入
#/dashboard。 - 管理员可访问
#/users；操作员不可访问账号与权限。 - 员工页面禁止读者访问，读者页面禁止员工访问。
运行与验证
cd C:\Users\12480\Desktop\web应用开发\frontend
npm install
npm run dev
npm run build
默认前端开发地址：http://127.0.0.1:3000。