# 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 或邮件系统与我联系。
## 三.项目设计成果
![](https://www.writebug.com/myres/static/uploads/2021/12/18/2a6a7dc4af3378fcd40dd6ee4d1eb4a8.writebug)
注册页
![](https://www.writebug.com/myres/static/uploads/2021/12/18/73463d3494d76b603f1fc8f7d7a0f95e.writebug)
注册验证
![](https://www.writebug.com/myres/static/uploads/2021/12/18/e12f2ca7144484b1a1892b023edb7a04.writebug)
注册成功
![](https://www.writebug.com/myres/static/uploads/2021/12/18/8d6f39260342e98728d87ad999daf3d1.writebug)
登录
![](https://www.writebug.com/myres/static/uploads/2021/12/18/a170258e3daa4f3d6184262a69b3fd57.writebug)
登录验证
![](https://www.writebug.com/myres/static/uploads/2021/12/18/28c59d24cf415aa671579af7afd2ac9f.writebug)
登陆失败
![](https://www.writebug.com/myres/static/uploads/2021/12/18/2888fc8c4d42bca57ca9e3c56d02c74d.writebug)
登录成功
![](https://www.writebug.com/myres/static/uploads/2021/12/18/b0a8a6e9e80b7e30b1b2248c86fdc09f.writebug)
主页
![](https://www.writebug.com/myres/static/uploads/2021/12/18/04c5be6d596f3580fb4ebc0abb8cbbe8.writebug)
添加
![](https://www.writebug.com/myres/static/uploads/2021/12/18/223085437f16a7b1335bb5666499ae33.writebug)
![](https://www.writebug.com/myres/static/uploads/2021/12/18/d4bb050c79c88bc826904ca622afa03b.writebug)
添加的验证
![](https://www.writebug.com/myres/static/uploads/2021/12/18/acdbc6d28cfbad4ecded84c9665ac92b.writebug)
添加成功
![](https://www.writebug.com/myres/static/uploads/2021/12/18/780d4f0055a5a52906a5c13096717b8b.writebug)
搜索
![](https://www.writebug.com/myres/static/uploads/2021/12/18/7003cb2606854537f0f5ae901191da67.writebug)
联系我的邮箱
![](https://www.writebug.com/myres/static/uploads/2021/12/18/c0976e94bd1207a3e3f4b6dd9ac5b3e6.writebug)
点击 QQ 联系我
## 四.项目创新性
1. 注册和登录页可以在页面局部展现跳转的效果,在页面跳转的时候添加定时器。
2. 添加进表格的信息可以增加到表格最下方。
## 五.改进及展望
1. 应该增加对图书价格的检验。
2.刷新后新增的图书信息就没了,应该将新增数据写入 JSON 数据中。
## 六.项目成员
1、 **小组成员(列出小组全部成员信息,纵向排列)**
姓名 刘玲俊,学号 15150400529
## 附录一
register.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书管理系统注册页</title>
<script type="text/javascript" src="jquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
#kuang {
background-color: #fafafa;
height: 600px;
margin-top: 15%;
padding-left: 0;
}
img {
margin-top: -8%;
margin-left: 3%;
}
h2 {
margin-top: 30%;
padding-left: 10px;
}
.shu {
color: #888;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 40px;
display: inline-block;
line-height: 25px;
margin-bottom: 5%;
padding-bottom: 5px;
}
#shu1 {
margin-top: 5%;
}
#shu4 {
margin-top: 5%;
}
p {
display: inline-block;
}
.kuai {
margin-left: 5%;
}
#p2 {
margin-top: 3%;
}
#p1 {
margin-top: 7%;
}
button {
height: 40px;
}
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: #58bdff;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
margin-top: 5%;
}
.loader span:nth-of-type(1) {
margin-left: 2%;
}
.loader span:nth-of-type(2) {
-webkit-animation-del
没有合适的资源?快使用搜索试试~ 我知道了~
基于 JS 图书管理系统【100012082】
共22个文件
png:8个
html:3个
jpg:3个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 171 浏览量
2023-04-28
14:02:27
上传
评论 1
收藏 10.12MB ZIP 举报
温馨提示
本项目是用 HTML,CSS,js 语言编写的图书管理系统,用 jQuery 进行页面的加工,AJAX 异步读取信息,JSON 数据存储相关信息。【一定要用brackets打开,或开启虚拟服务器才能读取到json数据】 打开register页面,进入注册页,输入信息后跳转到登录页面, 登录的用户名和密码是 hello 123456 登录成功后跳转到主页面。
资源推荐
资源详情
资源评论
收起资源包目录
100012082-基于 JS 图书管理系统.zip (22个子文件)
jslibrary
截图_
登录.png 175KB
注册页.png 176KB
主页.png 1.62MB
LICENSE 1KB
三级项目报告15150400529刘玲俊.doc 7.53MB
register(注册页,请从这里进入系统).html 9KB
gi.jpg 255KB
使用说明.txt 176B
user.json 218B
books.json 697B
jquery.js 262KB
sucai
success.png 9KB
address test.txt 34B
效果图.jpg 26KB
效果图2.jpg 111KB
email.png 4KB
jq_ajax_test.html 1KB
libr.png 279KB
qq.png 3KB
ds.png 9KB
manager.html 10KB
README.md 15KB
共 22 条
- 1
资源评论
神仙别闹
- 粉丝: 2704
- 资源: 7645
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- nginx配置文件,注意其中需要对应宿主机的路径
- 自用数据集自用数据集自用数据集
- HTML5小游戏【堆雪人-优秀H5小游戏合集】游戏源码分享下载 - epicsnowman.zip
- SNMP Client 是SNMP测试工具
- Android Camera内存统计脚本
- AD9220高速数据芯片硬件参考设计原理图+STM32F103单片机驱动程序代码+芯片技术手册资料.zip
- 常用爆破用户名字典top500
- meta-llama-3-8b-instruct 的 model-00003-of-00004.safetensors 的2/3
- bootstrap-select.js bootstrap-select.css
- EasyPoi Excel和 Word简易工具类
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功