校园图书借阅系统 文档信息版本v2.0.0纯前端版本更新日期2024-12-09架构类型纯前端静态小程序运行方式完全离线无需后端服务器 核心特性✨ 架构升级✅无后端依赖从 Express 后端改为纯前端 Mock API✅完全离线无需网络连接即可运行✅数据持久化使用uni.storage本地存储✅快速部署无需配置服务器直接运行 技术亮点Vue 3 Composition APIPinia 状态管理Mock API 数据模拟本地存储持久化跨平台兼容 目录系统概述技术架构目录结构Mock API 设计数据持久化核心功能页面设计组件设计图片配置运行指南1. 系统概述1.1 项目简介校园图书借阅系统是一个基于uni-app开发的纯前端静态小程序为学校师生提供便捷的图书借阅服务。核心价值 跨平台运行H5、小程序、App 无需后端服务器 数据本地持久化⚡ 快速响应流畅体验1.2 功能清单模块功能说明用户模块登录、用户信息支持学生角色登录首页热门图书、快捷入口展示热门图书和功能入口图书列表分类、排序、分页支持6个分类4种排序图书详情详细信息、借阅显示图书信息和借阅状态搜索关键词搜索、历史支持书名和作者搜索借阅记录记录查看、归还支持筛选和归还操作收藏收藏管理本地存储收藏列表个人中心统计、设置显示借阅统计数据1.3 技术特点前端技术Vue 3 Composition APIPinia 状态管理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.storage2.2 核心技术栈技术版本用途uni-app最新版跨平台框架Vue3.4.0前端框架Pinia3.0.4状态管理Vite6.4.1构建工具uni-ui最新版UI 组件库Sass1.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.jsMock 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 获取图书列表asyncgetBookList(params{}){awaitdelay()// 模拟网络延迟const{page1,pageSize10,categoryId0,sortdefault}params// 筛选分类letfilteredBookscategoryId0?[...books]:books.filter(bookbook.categoryIdcategoryId)// 排序switch(sort){casehot:filteredBooks.sort((a,b)(b.hot?1:0)-(a.hot?1:0))breakcasestock:filteredBooks.sort((a,b)b.stock-a.stock)breakcasenew:filteredBooks.sort((a,b)b.id-a.id)break}// 分页consttotalfilteredBooks.lengthconststart(page-1)*pageSizeconstendstartpageSizeconstlistfilteredBooks.slice(start,end)return{code:200,data:{list,total,page,pageSize},msg:success}}4.3.2 借阅图书asyncborrowBook(bookId){awaitdelay()constuserIdgetCurrentUserId()constbookbooks.find(bb.idparseInt(bookId))// 检查图书是否存在if(!book){return{code:404,data:null,msg:图书不存在}}// 检查库存if(book.stock0){return{code:400,data:null,msg:库存不足}}// 检查是否已借阅constexistingBorrowborrowRecords.find(recordrecord.userIduserIdrecord.bookIdbookId!record.returnTime)if(existingBorrow){return{code:400,data:null,msg:您已借阅该图书}}// 创建借阅记录constborrowTimeformatDate(newDate())constnewBorrow{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实现数据本地持久化。存储键值对键名数据类型说明borrowRecordsArray借阅记录列表booksArray图书数据含库存userInfoObject用户信息tokenString登录令牌collectListArray收藏列表searchHistoryArray搜索历史最多10条5.2 Storage 工具封装// utils/util.jsexportconststorage{// 存储数据set(key,value){if(typeofvaluestring){uni.setStorageSync(key,value);}else{uni.setStorageSync(key,JSON.stringify(value));}},// 获取数据get(key){constdatauni.getStorageSync(key);if(!data)returnnull;try{returnJSON.parse(data);}catch(e){returndata;}},// 删除数据remove(key){uni.removeStorageSync(key);},// 清空所有数据clear(){uni.clearStorageSync();},};5.3 数据同步策略读取策略优先从本地存储读取如果不存在使用默认值同步到内存中写入策略更新内存数据立即写入本地存储确保数据一致性示例// 借阅图书后的数据同步borrowRecords.push(newBorrow);// 更新内存book.stock--;// 更新内存// 持久化到本地uni.setStorageSync(borrowRecords,borrowRecords);uni.setStorageSync(books,books);6. 核心功能6.1 用户登录流程输入用户名、密码调用mockApi.login()验证用户信息生成 token存储用户信息和 token跳转到首页测试账号用户名student001密码1234566.2 图书浏览功能热门图书展示分类筛选6个分类排序功能默认、热门、新书、库存分页加载图书详情查看分类列表全部文学小说计算机技术历史传记人文社科少儿读物6.3 图书搜索功能关键词搜索书名或作者搜索历史记录最多10条点击历史快速搜索清空搜索历史实现constresultsbooks.filter((book)book.name.toLowerCase().includes(keyword.toLowerCase())||book.author.toLowerCase().includes(keyword.toLowerCase()),);6.4 借阅管理借阅流程查看图书详情点击立即借阅二次确认检查库存和借阅状态创建借阅记录减少图书库存持久化数据归还流程进入借阅记录页面找到要归还的图书点击归还按钮二次确认更新借阅记录增加图书库存持久化数据状态判断借阅中未归还且未逾期已逾期未归还且超过归还日期已归还已完成归还6.5 收藏功能功能收藏图书取消收藏查看收藏列表本地存储持久化实现// 添加收藏addCollect(book){constisExistthis.collectList.some(itemitem.idbook.id)if(!isExist){this.collectList.push(book)storage.set(collectList,this.collectList)uni.showToast({title:收藏成功})}}// 取消收藏removeCollect(bookId){this.collectListthis.collectList.filter(itemitem.id!bookId)storage.set(collectList,this.collectList)uni.showToast({title:取消收藏})}本项目详情https://www.aiyuanma.vip/posts/book-rent-uniapp