基于JavaScript 图书管理系统

JS 图书管理系统

一．项目设计方案

本项目是用 HTML，CSS，js 语言编写的图书管理系统，用 jQuery 进行页面的加工，AJAX 异步读取信息，JSON 数据存储相关信息。

1.项目界面设计

（1）注册界面：主要包含 3 个输入框，分别是用户名，密码和邮箱。下方一个注册按钮和 CSS 制作的小球波浪动画。以贺卡的布局展现整个页面。

（2）登录界面：主要包含 2 个输入框，分别是用户名，密码。下方一个登录按钮。以贺卡的布局展现整个页面。

（3）主界面：主要包含一个图书信息的表格，添加图书的输入框，搜索框，管理系统的标题，页脚。背景图是一个图书馆的实景图。

2.项目交互设计

本应用涉及到的交互有：

（1）点击注册按钮，如果有输入框内容为空，弹出警告。点击确定重新注册，注册成功后，跳转出注册成功的提示，提示后自动跳转到登录页面。

（2）点击登录按钮，如果如果有输入框内容为空，弹出警告。如果登录的用户名或密码与 JSON 数据中存储的不一致，则弹出警告。点击确定重新登录。点击登录按钮，用户名和密码与存储的一致则跳转出现登录成功，再自动跳转到主页面。

（3）输入需要增加的图书信息，如果有输入框中内容为空，则出现警告。如果书的数目为负，则出现警告。点击添加图书按钮，图书信息被增加到表格上。

（4）输入需要搜索的图书/作者/出版社信息，点击搜索按钮，弹出图书详细信息。

（5）点击图书列表中的删除按钮，删除单条信息。

3.项目功能设计

（1）注册

用户输入用户名，密码和邮箱进行注册，如果输入框内容为空则报出警告。

（2）登录

用户输入用户名，密码，与已存储的 JSON 数据进行验证，验证成功进入主界面，不成功弹出警告。

（3）浏览图书

进入主界面后，可以查看表格中的图书信息，鼠标移动到图书信息上会有一定的效果变化。

（4）增加图书

设置五个输入框，分别是：书名，作者名，数量，出版社，单价。

用户输入信息后点击添加按钮添加到表格上。

如果有输入框为空则弹出警告。

如果书籍数量为负也弹出警告。

（5）删除图书

点击图书表格上每条图书后的删除按钮，删除单条图书信息，新添加后的图书信息也可以删除。

（6）搜索图书

用户在搜索框输入书名/作者/出版社信息，点击搜索按钮，弹出该图书的详细信息，如果没有搜索到，就弹出提示。新增加的信息也可以被搜索到。

二．实施过程分析

第一阶段：用 jQuery 的 AJAX 方法引入 JSON 数据并用 each 进行遍历，将 JSON 数据转换成 js 对象。

第二阶段：用 jQuery 给按钮绑定 click 事件，用 on 的方法（因为元素是动态添加进表格的）。

第三阶段：写函数进行逻辑判断，用 remove（）实现图书信息的删除，用 append（）实现信息的添加。遍历整个对象数组，进行查找。

第四阶段：写注册和登录页面，用 bootstrap 框架进行页面布局，在登录页面引入 JSON 数据，获取输入框中的内容，与 JSON 数据里预存的用户信息进行验证，登录成功后跳转到主界面。

第五阶段：用 bootstrap 框架对主页面进行重新布局。

第六阶段：加入与我联系的图标以及页脚，加入代码启动 QQ 或邮件系统与我联系。

三．项目设计成果

注册页

注册验证

注册成功

登录

登录验证

登陆失败

登录成功

主页

添加

添加的验证

添加成功

搜索

联系我的邮箱

点击 QQ 联系我

四．项目创新性

1. 注册和登录页可以在页面局部展现跳转的效果，在页面跳转的时候添加定时器。
2. 添加进表格的信息可以增加到表格最下方。

五．改进及展望

1. 应该增加对图书价格的检验。
2. 刷新后新增的图书信息就没了，应该将新增数据写入 JSON 数据中。