校园图书借阅系统

📋 文档信息

• 版本：v2.0.0（纯前端版本）
• 更新日期：2024-12-09
• 架构类型：纯前端静态小程序
• 运行方式：完全离线，无需后端服务器

---

🎯 核心特性

✨ 架构升级

• ✅ 无后端依赖：从 Express 后端改为纯前端 Mock API
• ✅ 完全离线：无需网络连接即可运行
• ✅ 数据持久化：使用 uni.storage 本地存储
• ✅ 快速部署：无需配置服务器，直接运行

🚀 技术亮点

• Vue 3 Composition API
• Pinia 状态管理
• Mock API 数据模拟
• 本地存储持久化
• 跨平台兼容

---

📖 目录

1. 系统概述
2. 技术架构
3. 目录结构
4. Mock API 设计
5. 数据持久化
6. 核心功能
7. 页面设计
8. 组件设计
9. 图片配置
10. 运行指南

---

1. 系统概述

1.1 项目简介

校园图书借阅系统是一个基于 uni-app 开发的纯前端静态小程序，为学校师生提供便捷的图书借阅服务。

核心价值：

• 📱 跨平台运行（H5、小程序、App）
• 🚀 无需后端服务器
• 💾 数据本地持久化
• ⚡ 快速响应，流畅体验

1.2 功能清单

模块	功能	说明
用户模块	登录、用户信息	支持学生角色登录
首页	热门图书、快捷入口	展示热门图书和功能入口
图书列表	分类、排序、分页	支持6个分类，4种排序
图书详情	详细信息、借阅	显示图书信息和借阅状态
搜索	关键词搜索、历史	支持书名和作者搜索
借阅记录	记录查看、归还	支持筛选和归还操作
收藏	收藏管理	本地存储收藏列表
个人中心	统计、设置	显示借阅统计数据

1.3 技术特点

前端技术：

• Vue 3 Composition API
• Pinia 状态管理
• uni-app 跨平台框架
• uni-ui 组件库
• Sass 样式预处理

数据方案：

• Mock API 模拟后端接口
• uni.storage 本地存储
• 内存数据 + 持久化存储
• 自动数据同步

---

2. 技术架构

2.1 架构对比

旧架构（前后端分离）

Vue页面 → Store → request.js → uni.request → Express服务器 → 数据库

新架构（纯前端）

Vue页面 → Store → request.js → mock/index.js → 本地数据 → uni.storage

2.2 核心技术栈

技术	版本	用途
uni-app	最新版	跨平台框架
Vue	3.4.0	前端框架
Pinia	3.0.4	状态管理
Vite	6.4.1	构建工具
uni-ui	最新版	UI 组件库
Sass	1.94.2	样式预处理

2.3 数据流设计

┌─────────────┐
│  Vue 页面   │
└──────┬──────┘
       │
       ↓
┌─────────────┐
│ Pinia Store │
└──────┬──────┘
       │
       ↓
┌─────────────┐
│ request.js  │
└──────┬──────┘
       │
       ↓
┌─────────────┐
│ mock/index  │ ← Mock API 层
└──────┬──────┘
       │
       ↓
┌─────────────┐
│ 本地数据    │ ← mockBooks.js
│             │   mockUsers.js
│             │   mockBorrowRecords.js
└──────┬──────┘
       │
       ↓
┌─────────────┐
│ uni.storage │ ← 数据持久化
└─────────────┘

---

3. 目录结构

3.1 完整目录

项目根目录/
├── pages/                        # 页面目录
│   ├── index/                   # 首页
│   │   └── index.vue
│   ├── book/                    # 图书相关
│   │   ├── list/               # 图书列表
│   │   │   └── list.vue
│   │   └── detail/             # 图书详情
│   │       └── detail.vue
│   ├── search/                  # 搜索页面
│   │   └── search.vue
│   ├── borrow/                  # 借阅记录
│   │   └── borrow.vue
│   ├── collect/                 # 收藏列表
│   │   └── collect.vue
│   ├── my/                      # 个人中心
│   │   └── my.vue
│   └── login/                   # 登录页面
│       └── login.vue
├── components/                   # 组件目录
│   ├── nav-bar/                # 导航栏组件
│   │   └── nav-bar.vue
│   ├── book-card/              # 图书卡片组件
│   │   └── book-card.vue
│   └── empty/                  # 空状态组件
│       └── empty.vue
├── stores/                       # 状态管理
│   ├── user.js                 # 用户状态
│   └── book.js                 # 图书状态
├── utils/                        # 工具函数
│   ├── config.js               # 配置文件
│   ├── request.js              # 请求封装（调用Mock API）
│   └── util.js                 # 工具函数
├── mock/                         # Mock 数据 ⭐ 核心
│   ├── index.js                # Mock API 实现
│   ├── mockBooks.js            # 图书数据
│   ├── mockUsers.js            # 用户数据
│   ├── mockBorrowRecords.js    # 借阅记录
│   └── README.md               # Mock API 说明
├── styles/                       # 全局样式
│   └── main.scss
├── static/                       # 静态资源
│   └── images/                 # 图片资源
│       ├── default-cover.png   # 默认封面
│       ├── avatar-default.png  # 默认头像
│       └── 平凡的世界.png      # 图书封面
├── App.vue                       # 应用入口
├── main.js                       # 主入口文件
├── pages.json                    # 页面配置
├── manifest.json                 # 应用配置
├── uni.scss                      # uni-app 样式变量
├── vite.config.js               # Vite 配置
└── package.json                  # 项目依赖

3.2 核心文件说明

文件	说明	重要性
mock/index.js	Mock API 核心实现	⭐⭐⭐⭐⭐
utils/request.js	请求封装，调用 Mock API	⭐⭐⭐⭐⭐
stores/book.js	图书状态管理	⭐⭐⭐⭐
stores/user.js	用户状态管理	⭐⭐⭐⭐
mock/mockBooks.js	图书数据（20本）	⭐⭐⭐
mock/mockUsers.js	用户数据	⭐⭐⭐
mock/mockBorrowRecords.js	借阅记录	⭐⭐⭐

---

4. Mock API 设计

4.1 Mock API 概述

mock/index.js 是整个系统的核心，模拟了所有后端 API 接口。

核心特性：

• ✅ 模拟网络延迟（300ms）
• ✅ 统一响应格式
• ✅ 完整业务逻辑
• ✅ 数据持久化
• ✅ 错误处理

4.2 API 接口列表

4.2.1 图书相关（4个接口）

接口	方法	说明
getHotBooks()	GET	获取热门图书
getBookList(params)	GET	获取图书列表（分页、筛选、排序）
getBookDetail(id)	GET	获取图书详情
searchBook(keyword)	GET	搜索图书（书名或作者）

4.2.2 借阅相关（3个接口）

接口	方法	说明
borrowBook(bookId)	POST	借阅图书（减少库存）
getBorrowList(params)	GET	获取借阅记录（支持筛选）
returnBook(borrowId)	POST	归还图书（增加库存）

4.2.3 用户相关（2个接口）

接口	方法	说明
login(form)	POST	用户登录
getUserInfo()	GET	获取用户信息

4.3 核心实现示例

4.3.1 获取图书列表

async getBookList(params = {}) {
  await delay()  // 模拟网络延迟
  const { page = 1, pageSize = 10, categoryId = 0, sort = 'default' } = params

  // 筛选分类
  let filteredBooks = categoryId === 0
    ? [...books]
    : books.filter(book => book.categoryId === categoryId)

  // 排序
  switch (sort) {
    case 'hot':
      filteredBooks.sort((a, b) => (b.hot ? 1 : 0) - (a.hot ? 1 : 0))
      break
    case 'stock':
      filteredBooks.sort((a, b) => b.stock - a.stock)
      break
    case 'new':
      filteredBooks.sort((a, b) => b.id - a.id)
      break
  }

  // 分页
  const total = filteredBooks.length
  const start = (page - 1) * pageSize
  const end = start + pageSize
  const list = filteredBooks.slice(start, end)

  return {
    code: 200,
    data: { list, total, page, pageSize },
    msg: 'success'
  }
}

4.3.2 借阅图书

async borrowBook(bookId) {
  await delay()

  const userId = getCurrentUserId()
  const book = books.find(b => b.id === parseInt(bookId))

  // 检查图书是否存在
  if (!book) {
    return { code: 404, data: null, msg: '图书不存在' }
  }

  // 检查库存
  if (book.stock <= 0) {
    return { code: 400, data: null, msg: '库存不足' }
  }

  // 检查是否已借阅
  const existingBorrow = borrowRecords.find(
    record => record.userId === userId &&
              record.bookId === bookId &&
              !record.returnTime
  )

  if (existingBorrow) {
    return { code: 400, data: null, msg: '您已借阅该图书' }
  }

  // 创建借阅记录
  const borrowTime = formatDate(new Date())
  const newBorrow = {
    id: ++borrowIdCounter,
    userId,
    bookId: parseInt(bookId),
    bookName: book.name,
    borrowTime,
    returnDate: getReturnDate(borrowTime),  // 14天后
    returnTime: null,
    status: 'borrowing'
  }

  borrowRecords.push(newBorrow)
  book.stock--  // 减少库存

  // 持久化到本地存储
  uni.setStorageSync('borrowRecords', borrowRecords)
  uni.setStorageSync('books', books)

  return { code: 200, data: newBorrow, msg: '借阅成功' }
}

4.4 统一响应格式

{
  code: 200,        // 状态码：200成功，其他失败
  data: {},         // 返回数据
  msg: 'success'    // 提示信息
}

状态码说明：

• 200 - 成功
• 400 - 业务错误（如库存不足）
• 401 - 未登录
• 404 - 资源不存在

---

5. 数据持久化

5.1 存储方案

使用 uni.storage 实现数据本地持久化。

存储键值对：

键名	数据类型	说明
borrowRecords	Array	借阅记录列表
books	Array	图书数据（含库存）
userInfo	Object	用户信息
token	String	登录令牌
collectList	Array	收藏列表
searchHistory	Array	搜索历史（最多10条）

5.2 Storage 工具封装

// utils/util.js
export const storage = {
  // 存储数据
  set(key, value) {
    if (typeof value === "string") {
      uni.setStorageSync(key, value);
    } else {
      uni.setStorageSync(key, JSON.stringify(value));
    }
  },

  // 获取数据
  get(key) {
    const data = uni.getStorageSync(key);
    if (!data) return null;

    try {
      return JSON.parse(data);
    } catch (e) {
      return data;
    }
  },

  // 删除数据
  remove(key) {
    uni.removeStorageSync(key);
  },

  // 清空所有数据
  clear() {
    uni.clearStorageSync();
  },
};

5.3 数据同步策略

读取策略：

1. 优先从本地存储读取
2. 如果不存在，使用默认值
3. 同步到内存中

写入策略：

1. 更新内存数据
2. 立即写入本地存储
3. 确保数据一致性

示例：

// 借阅图书后的数据同步
borrowRecords.push(newBorrow); // 更新内存
book.stock--; // 更新内存

// 持久化到本地
uni.setStorageSync("borrowRecords", borrowRecords);
uni.setStorageSync("books", books);

---

6. 核心功能

6.1 用户登录

流程：

1. 输入用户名、密码
2. 调用 mockApi.login()
3. 验证用户信息
4. 生成 token
5. 存储用户信息和 token
6. 跳转到首页

测试账号：

• 用户名：student001
• 密码：123456

6.2 图书浏览

功能：

• 热门图书展示
• 分类筛选（6个分类）
• 排序功能（默认、热门、新书、库存）
• 分页加载
• 图书详情查看

分类列表：

1. 全部
2. 文学小说
3. 计算机技术
4. 历史传记
5. 人文社科
6. 少儿读物

6.3 图书搜索

功能：

• 关键词搜索（书名或作者）
• 搜索历史记录（最多10条）
• 点击历史快速搜索
• 清空搜索历史

实现：

const results = books.filter(
  (book) =>
    book.name.toLowerCase().includes(keyword.toLowerCase()) ||
    book.author.toLowerCase().includes(keyword.toLowerCase()),
);

6.4 借阅管理

借阅流程：

1. 查看图书详情
2. 点击"立即借阅"
3. 二次确认
4. 检查库存和借阅状态
5. 创建借阅记录
6. 减少图书库存
7. 持久化数据

归还流程：

1. 进入借阅记录页面
2. 找到要归还的图书
3. 点击"归还"按钮
4. 二次确认
5. 更新借阅记录
6. 增加图书库存
7. 持久化数据

状态判断：

• 借阅中：未归还且未逾期
• 已逾期：未归还且超过归还日期
• 已归还：已完成归还

6.5 收藏功能

功能：

• 收藏图书
• 取消收藏
• 查看收藏列表
• 本地存储持久化

实现：

// 添加收藏
addCollect(book) {
  const isExist = this.collectList.some(item => item.id === book.id)
  if (!isExist) {
    this.collectList.push(book)
    storage.set('collectList', this.collectList)
    uni.showToast({ title: '收藏成功' })
  }
}

// 取消收藏
removeCollect(bookId) {
  this.collectList = this.collectList.filter(item => item.id !== bookId)
  storage.set('collectList', this.collectList)
  uni.showToast({ title: '取消收藏' })
}

---