pyx_gitkeshe/前端文档.md

图书馆管理系统 - 前端与后端交互文档

1.技术栈说明

• 核心框架：Vue 3（使用<script setup>语法糖）
• 构建工具：Vite
• UI 组件库：Element Plus
• 网络请求：Axios
• 状态管理：Vuex
• 路由管理：Vue Router
• 日期处理：自定义formatDate工具函数

2.项目文件结构说明

src/
├── views/                 # 页面视图组件
│   ├── Books/             # 图书相关页面
│   │   ├── BookDetail.vue # 图书详情页
│   │   ├── BookList.vue   # 图书列表页
│   │   ├── AddBook.vue    # 添加图书页
│   │   └── EditBook.vue   # 编辑图书页
│   ├── Admin/             # 管理员页面
│   │   ├── BookManagement.vue # 图书管理页
│   │   └── AllBorrowRecords.vue # 所有借阅记录页
│   ├── Borrow/            # 借阅相关页面
│   │   ├── BorrowBook.vue # 借阅图书页
│   │   └── ReturnBook.vue # 归还图书页
│   ├── User/              # 用户相关页面
│   │   ├── Profile.vue    # 个人中心页
│   │   ├── BorrowRecords.vue # 借阅记录页
│   │   └── Recharge.vue   # 账户充值页
│   ├── Auth/              # 认证相关页面
│   │   ├── Login.vue      # 登录页
│   │   └── Register.vue   # 注册页
│   ├── Ranking/           # 排行榜页面
│   │   ├── WeeklyRank.vue # 本周热租榜
│   │   └── MonthlyRank.vue # 本月热租榜
│   └── Home.vue           # 首页
├── components/            # 通用组件
│   ├── HeaderBar.vue      # 顶部导航栏
│   └── BookCard.vue       # 图书卡片组件
├── router/                # 路由配置
│   └── index.js           # 路由规则及守卫配置
├── store/                 # Vuex状态管理
│   ├── index.js           # store入口
│   ├── modules/
│   │   ├── book.js        # 图书相关状态
│   │   ├── borrow.js      # 借阅相关状态
│   │   └── user.js        # 用户相关状态
└── App.vue                # 根组件

3.预设数据标注

1. BookDetail.vue - fetchBook 失败时：

   book.value = {
     id: bookId,
     title: '示例书籍',
     url: 'https://picsum.photos/id/24/300/400',
     money: 5.00,
     number: 8,
     content: '这是一本示例书籍，用于展示书籍详情页面的效果。',
     state: '维护中'
   }
   

2. BookList.vue - fetchBooks 失败时：

   books.value = [
     { id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, state: '可借', content: '科幻' },
     // ...共12条示例数据
   ]
   total.value = books.value.length
   

3. BorrowBook.vue - fetchBooks 失败时：

   books.value = [
     { id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12, state: '可借', content: '科幻' },
     // ...共12条示例数据（同BookList）
   ]
   total.value = books.value.length
   

4. ReturnBook.vue - fetchBorrowedBooks 失败时：

   store.commit('setBorrowedBooks', [
     { 
       id: 1, 
       title: '三体', 
       url: 'https://picsum.photos/id/24/200/300', 
       borrow_time: '2023-10-01T10:30:00' 
     },
     { 
       id: 4, 
       title: '活着', 
       url: 'https://picsum.photos/id/27/200/300', 
       borrow_time: '2023-10-05T14:20:00' 
     }
   ])
   

5. Home.vue - 获取排行榜失败时：

   // 本周热门预设
   weeklyRank.value = [
     { id: 1, title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12 },
     // ...共6条示例数据
   ]
   // 本月热门预设
   monthlyRank.value = [
     { id: 7, title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
     // ...共6条示例数据
   ]
   

4.额外说明

1. 权限控制：
   • 管理员权限：通过store.getters.isAdmin判断，对应路由 meta.requiresAdmin
   • 用户登录态：通过store.getters.isAuthenticated判断，对应路由 meta.requiresAuth
2. 状态管理：
   • 图书相关状态：store/modules/book.js
   • 借阅相关状态：store/modules/borrow.js
   • 用户相关状态：store/modules/user.js（包含用户信息、权限标识等）
3. 错误处理：
   • 所有接口调用均包含 try/catch 处理
   • 失败时通过ElMessage.error提示用户
   • 关键接口失败时使用预设数据降级展示
4. 路由配置：
   • 已在router/index.js中配置所有页面路由
   • 包含路由守卫，控制权限访问
5. UI 组件：
   • 使用 Element Plus 组件库
   • 主要组件：el-card、el-table、el-form、el-button、el-pagination 等

---

测试用例（网页控制台复制代码回车即可）

//用户
store.commit('setUser',{ 
 username: 'testuser', 
 pic: 'https://picsum.photos/id/64/100/100', // 头像地址 
 admin: false, // 普通用户 
 create_time: '2023-01-01T00:00:00', 
 update_time: '2023-10-01T00:00:00' }) // 同时设置余额和VIP信息 
 store.commit('setBalanceAndVip', 
{ balance: 100.50, vip: 2 }) 

// 管理员 
store.commit('setUser',{
 username: 'admin',
 pic: 'https://picsum.photos/id/91/100/100', 
 admin: true, // 管理员 
 create_time: '2023-01-01T00:00:00',
 update_time: '2023-10-01T00:00:00' })