小程序做的图书借阅管理系统(纯前端实现)

16 阅读4分钟

图书借阅微信小程序 (纯前端版)

1. 项目简介

这是一个纯前端实现的图书借阅微信小程序。旨在演示小程序的基本功能和如何在不依赖后端数据库的情况下,使用本地存储进行数据管理。所有数据(如图书类别、图书信息、借阅记录等)均存储于微信小程序的本地缓存中。

2. 功能介绍

管理员模块 (预设账号: admin, 密码: admin)

  • 登录:
    • 管理员使用预设账号密码 (admin/admin) 进行登录。
  • 图书类别管理:
    • 查看所有图书类别列表。
    • 添加新的图书类别。
    • 编辑已有的图书类别名称。
    • 删除图书类别 (若该类别下没有关联图书,则可删除)。
  • 图书管理:
    • 查看所有图书信息列表。
    • 添加新的图书,包括书名、作者、ISBN、出版社、选择所属类别、总库存量、封面图片URL(可选)。
    • 编辑已有的图书信息。
    • 删除图书。
  • 借阅审核:
    • 查看用户的图书借阅申请列表。
    • 批准用户的借阅申请,批准后对应图书的可用库存将减少。
    • 拒绝用户的借阅申请。
  • 归还审核:
    • 查看用户的图书归还申请列表。
    • 确认用户已归还图书,确认后对应图书的可用库存将增加。

用户模块

  • 用户注册:
    • 新用户可以注册账户(用户名和密码)。
  • 用户登录:
    • 已注册用户可以使用用户名和密码登录。
  • 用户登出:
    • 用户可以退出登录状态。
  • 浏览图书:
    • 查看所有可借阅的图书列表。
    • 可以按图书类别筛选图书。
    • 查看图书的详细信息(如作者、出版社、ISBN、当前可用库存)。
  • 借阅图书:
    • 用户选择心仪的图书并发起借阅请求。请求将提交给管理员审核。
  • 我的借阅:
    • 查看当前用户已借阅且未归还的图书列表。
    • 用户可以对已借阅的图书发起归还请求。请求将提交给管理员审核。

3. 技术实现

  • 前端框架: 微信小程序原生开发 (WXML, WXSS, JavaScript)。
  • 数据存储: 使用微信小程序的 wx.setStorageSyncwx.getStorageSync API 将所有应用数据(如类别、图书、借阅记录)保存在用户设备的本地缓存中。
  • 状态管理: 主要通过页面间传递参数以及从本地缓存中读取和更新数据来管理应用状态。页面数据在 onShow 生命周期函数中重新加载以反映更新。
  • ID生成: 为确保记录的唯一性,新的类别、图书和借阅记录将使用基于时间戳的简单唯一ID生成方法。
  • 纯前端: 本项目不涉及任何后端服务器或数据库交互,所有逻辑均在小程序客户端完成。

4. 项目结构 (主要文件和目录)

├── app.js # 小程序逻辑,全局数据初始化入口 ├── app.json # 小程序公共设置,页面路径、窗口表现等配置 ├── app.wxss # 全局公共样式表 ├── readme.md # 项目说明文件 ├── utils/ │ ├── storage.js # 封装本地存储的读取和写入操作 │ └── util.js # 工具函数 (如日期格式化、ID生成器) ├── images/ # 存放一些本地图片资源 │ ├── default_cover.png # 默认图书封面 │ ├── book.png │ ├── book_sel.png │ ├── my.png │ ├── my_sel.png │ ├── manage.png │ └── manage_sel.png ├── pages/ │ ├── login/ # 管理员登录页面 (pages/login/login) │ │ ├── login.js │ │ ├── login.json │ │ ├── login.wxml │ │ └── login.wxss │ ├── admin/ │ │ ├── dashboard/ # 管理员主操作面板 │ │ ├── categoryManage/ # 图书类别管理页面 │ │ ├── bookManage/ # 图书信息管理页面 │ │ ├── bookForm/ # 图书添加/编辑表单页面 │ │ ├── borrowApprove/ # 借阅申请审批页面 │ │ └── returnApprove/ # 图书归还审批页面 │ └── user/ │ ├── loginUser/ # 用户登录页面 (新增) │ │ ├── loginUser.js │ │ ├── loginUser.json │ │ ├── loginUser.wxml │ │ └── loginUser.wxss │ ├── registerUser/ # 用户注册页面 (新增) │ │ ├── registerUser.js │ │ ├── registerUser.json │ │ ├── registerUser.wxml │ │ └── registerUser.wxss │ ├── bookList/ # 用户浏览图书列表及发起借阅页面 │ └── myBorrows/ # 用户查看"我的借阅"及发起归还页面

5. 运行与使用步骤

  1. 管理员操作流程:
    • 小程序启动后,默认进入用户浏览图书列表页面。
    • 点击底部 TabBar "管理员"进入管理员登录页面 (pages/login/login)。
  2. 用户操作流程:
    • 首次使用时,可以通过"我的借阅"Tab 页引导或直接导航到用户登录/注册页面 (pages/user/loginUser/loginUserpages/user/registerUser/registerUser)。
    • 注册并登录后,可以浏览图书、发起借阅。
    • 在"我的借阅"页面查看借阅状态、发起归还、退出登录。

6. 注意事项

  • 数据持久性: ...
  • 用户系统简化: 用户账户信息(包括密码)以明文形式存储在本地缓存中,这在实际生产环境中是不安全的。本项目仅为演示目的。
  • 管理员账户: 管理员账户仍为硬编码 (admin/admin)。

管理员登录.png

管理员-借阅归还审核.png

管理员-借阅申请审核.png

管理员首页.png

管理员图书信息编辑.png

管理员图书信息列表.png

可借阅图书.png

图书类别管理.png

我的借阅记录.png

我的借阅记录2.png

学生登录.png

注册.png