惠风书吧图书借阅系统技术文档

本系统由东风小学AI社团开发，旨在为学校提供一个简单易用的图书借阅管理解决方案。系统分为用户界面(3.html)和管理员界面(admin3.html)两部分。

版本信息： 当前文档适用于系统3.0版本，最后更新于2025年5月。

系统特点

简洁的用户界面

学生可以轻松浏览图书、借阅和归还，界面友好直观，适合小学生使用。

安全的借阅码系统

每位学生借阅时会生成唯一的4位借阅码，防止误操作归还他人借阅的书籍。

完善的管理功能

管理员可以查看所有借阅记录、重置系统数据，并监控图书借阅状态。

本地数据存储

使用浏览器的localStorage存储数据，无需服务器支持，简单易部署。

技术架构

系统采用纯前端技术实现，主要技术栈包括：

HTML5 - 页面结构和内容
CSS3 - 页面样式和布局
JavaScript - 交互逻辑和数据处理
localStorage - 本地数据存储

用户使用指南 (3.html)

用户界面是学生借阅图书的主要入口，提供图书浏览、搜索、借阅和归还功能。

主页面

主要功能

1. 图书浏览与搜索

首页展示所有图书列表，可以通过搜索框按书名或编号快速查找图书。

                // 搜索功能示例代码
                function searchBooks() {
                    const keyword = searchInput.value.trim().toLowerCase();
                    const filteredBooks = books.filter(book => 
                        book.title.toLowerCase().includes(keyword) || 
                        book.id.toString().includes(keyword)
                    );
                    renderBooks(filteredBooks);
                }
            

2. 借阅图书

点击"我要借书"按钮或图书卡片上的借阅按钮，填写个人信息后完成借阅。

系统会生成4位借阅码，请务必记住此码，还书时需要提供。

注意： 借阅前有5秒的借阅须知阅读时间，确保学生了解借阅规则。

3. 归还图书

点击"我要还书"按钮，选择要归还的图书记录，输入正确的借阅码完成归还。

提示： 如果忘记借阅码，可以联系图书管理员在管理员系统中查询。

使用流程

打开3.html文件
浏览或搜索图书
点击"我要借书"按钮
阅读借阅须知后填写个人信息
记录系统生成的借阅码
还书时点击"我要还书"按钮
选择借阅记录并输入借阅码
确认归还

管理员使用指南 (admin3.html)

管理员界面提供图书借阅管理功能，需要密码(默认:123456)才能登录。

管理员登录界面

管理员主界面

主要功能

1. 数据统计

首页展示图书总数、可借阅图书数、已借出图书数和总借阅记录数。

2. 借阅记录管理

表格形式展示所有当前借阅记录，包括：

图书编号
书名
借阅人姓名
班级
借阅日期
借阅码

3. 系统重置

"重置所有借阅数据"按钮可以将所有图书状态恢复为可借阅，并清空借阅记录。

警告： 重置操作不可逆，请谨慎使用！

使用流程

打开admin3.html文件
输入管理员密码(默认:123456)
查看数据统计和借阅记录
需要时点击"重置所有借阅数据"按钮
点击"退出登录"结束管理会话

修改管理员密码

要修改管理员密码，需要编辑admin3.html文件，找到以下代码：

                // 初始密码
                const ADMIN_PASSWORD = "123456";
            

将"123456"改为您想要的新密码即可。

常见问题解答

1. 如何部署系统？

只需将3.html和admin3.html文件放在同一目录下，通过浏览器打开3.html即可使用。所有数据存储在浏览器的localStorage中。

2. 数据会丢失吗？

数据存储在浏览器的localStorage中，一般情况下不会丢失。但清除浏览器缓存或使用隐私模式可能会导致数据丢失，建议定期备份。

3. 如何备份数据？

可以通过以下步骤备份：

打开浏览器开发者工具(F12)
切换到"Application"选项卡
在左侧选择"Local Storage"
找到对应的域名，复制"books"和"borrowRecords"项的值

4. 如何恢复数据？

可以通过以下步骤恢复：

打开浏览器开发者工具(F12)
切换到"Application"选项卡
在左侧选择"Local Storage"
找到对应的域名，添加"books"和"borrowRecords"项并粘贴之前备份的值

5. 如何添加更多图书？

需要编辑3.html文件，在JavaScript部分的books数组中添加新的图书对象：

{ id: 1030, title: "新书名称", author: "作者", status: "available" }

id需要保持唯一，status初始应为"available"。

6. 系统支持多少用户同时使用？

由于系统基于本地存储，没有用户数量限制，但同一时间只能在一台设备上操作，否则可能导致数据冲突。

测试程序

前往用户界面前往管理员界面