目 錄
一．項目設(shè)計方案 4
二．實施過程分析 4
三．項目設(shè)計成果 4
四．項目創(chuàng)新性 4
五．改進(jìn)及展望 4
六．項目成員 4
附錄一 5
一．項目設(shè)計方案
本項目是用html，css，js語言編寫的圖書管理系統(tǒng)，用jquery進(jìn)行頁面的加工，ajax異步讀取信息，json數(shù)據(jù)存儲相關(guān)信息。
1.項目界面設(shè)計
（1）注冊界面：主要包含3個輸入框，分別是用戶名，密碼和郵箱。下方一個注冊按鈕和css制作的小球波浪動畫。以賀卡的布局展現(xiàn)整個頁面。
（2）登錄界面：主要包含2個輸入框，分別是用戶名，密碼。下方一個登錄按鈕。以賀卡的布局展現(xiàn)整個頁面。
（3）主界面：主要包含一個圖書信息的表格，添加圖書的輸入框，搜索框，管理系統(tǒng)的標(biāo)題，頁腳。背景圖是一個圖書館的實景圖。
2.項目交互設(shè)計
本應(yīng)用涉及到的交互有：
（1）點擊注冊按鈕，如果有輸入框內(nèi)容為空，彈出警告。點擊確定重新注冊，注冊成功后，跳轉(zhuǎn)出注冊成功的提示，提示后自動跳轉(zhuǎn)到登錄頁面。
（2）點擊登錄按鈕，如果如果有輸入框內(nèi)容為空，彈出警告。如果登錄的用戶名或密碼與json數(shù)據(jù)中存儲的不一致，則彈出警告。點擊確定重新登錄。點擊登錄按鈕，用戶名和密碼與存儲的一致則跳轉(zhuǎn)出現(xiàn)登錄成功，本文轉(zhuǎn)載自http://www.biyezuopin.vip/onews.asp?id=15031再自動跳轉(zhuǎn)到主頁面。
（3）輸入需要增加的圖書信息，如果有輸入框中內(nèi)容為空，則出現(xiàn)警告。如果書的數(shù)目為負(fù)，則出現(xiàn)警告。點擊添加圖書按鈕，圖書信息被增加到表格上。
（4）輸入需要搜索的圖書/作者/出版社信息，點擊搜索按鈕，彈出圖書詳細(xì)信息。
（5）點擊圖書列表中的刪除按鈕，刪除單條信息。
3.項目功能設(shè)計
（1）注冊
用戶輸入用戶名，密碼和郵箱進(jìn)行注冊，如果輸入框內(nèi)容為空則報出警告。
（2）登錄
用戶輸入用戶名，密碼，與已存儲的json數(shù)據(jù)進(jìn)行驗證，驗證成功進(jìn)入主界面，不成功彈出警告。
（3）瀏覽圖書
進(jìn)入主界面后，可以查看表格中的圖書信息，鼠標(biāo)移動到圖書信息上會有一定的效果變化。
（4）增加圖書
設(shè)置五個輸入框，分別是：書名，作者名，數(shù)量，出版社，單價。
用戶輸入信息后點擊添加按鈕添加到表格上。
如果有輸入框為空則彈出警告。
如果書籍?dāng)?shù)量為負(fù)也彈出警告。
（5）刪除圖書
點擊圖書表格上每條圖書后的刪除按鈕，刪除單條圖書信息，新添加后的圖書信息也可以刪除。
（6）搜索圖書
用戶在搜索框輸入書名/作者/出版社信息，點擊搜索按鈕，彈出該圖書的詳細(xì)信息，如果沒有搜索到，就彈出提示。新增加的信息也可以被搜索到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖書管理系統(tǒng)</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<style>
table {
width: 500px;
height: 100px;
background-color: white;
opacity:0.9;
text-align: center;
}
.but{
background-color: transparent;
border: none;
color: blue;
}
.but:hover{
text-decoration: underline;
color: red;
}
#tab {
margin-top: 2%
}
#find {
margin-top: 5%;
padding-right: 0;
}
#name,
#au,
pub {
width: 16%;
}
#num,
#money {
width: 10%;
}
.add {
margin-left: 10px;
}
#header {
margin-top: 20%;
}
.icon{
width: 5%;
margin-right: 10px;
}
.conticon{
margin-top: -8%;
margin-left: 1%;
}
</style>
</head>
<body>
<div id="box">
<div class="container">
<h1 style="position: absolute;top: 10%;left: 45%;">圖書管理系統(tǒng)</h1>
<div id="header">
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">書名：</label>
<input type="text" id="name" / class="form-control">
<label for="exampleInputName2">作者:</label>
<input type="text" id="au" / class="form-control">
<label for="exampleInputName2">數(shù)量：</label>
<input type="number" id="num" / class="form-control">
<label for="exampleInputName2">出版社:</label>
<input type="text" id="pub" / class="form-control">
<label for="exampleInputName2">單價：</label>
<input type="number" id="money" / class="form-control">
<input type="button" id="addBook" class="add btn btn-primary" value="添加圖書" />
</div>
</form>
</div>
</div>
<div id="find" class="col-md-4 col-md-offset-8">
<div class="col-md-10" style="margin-left: -7px;">
<input type="text" class="txtx form-control" id="tex" placeholder="請輸入想要查找的書名/作者名/出版社">
</div>
<input type="button" value="搜索" class="butt btn btn-primary" >
</div>
<div class="col-md-12">
<div class="table-responsive">
<table border="1" cellspacing="0" cellpadding="0" id="tab" class="tabb table table-hover ">
<tr id="clone">
<td>書名</td>
<td>作者</td>
<td>數(shù)量</td>
<td>出版社</td>
<td>單價</td>
<td> </td>
</tr>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row text-center">
<div class="col-md-10 col-md-offset-1" style="padding-bottom: 10%;padding-top: 10%;">
<h4 style="color:#6e6969;">Wechat : hictoo / QQ : 2947873981 / 2947873981@qq.com / Tel : 18742527701 </h4>
<h4 style="color:#6e6969;">點擊下方圖標(biāo)與我聯(lián)系</h4>
</div>
</div>
</div>
<div class="conticon col-md-12 text-center">
<a href="tencent://message/?uin=2947873981&Site=qq&Menu=yes"><img src="./sucai/qq.png" alt="" class="icon"></a>
<a href="mailto:2947873981@qq.com"><img src="./sucai/email.png" alt="" class="icon"></a>
</div>
</div>
</div>
</div>
<script>
$.ajax({
url: "books.json",
dataType: "json",
success: function(data) {
//data -- 請求成功的相應(yīng)數(shù)據(jù) responseText
console.log(data);
$.each(data.result.list, function(index, item) {
console.log(item.bookname);
var bookname = item.bookname;
var author = item.author;
var count = item.count;
var publish = item.publish;
var price = item.price;
var txt = "<tr><td>" + bookname + "</td><td>" + author + "</td><td>" + count + "</td><td>" + publish + "</td><td>" + price + '' + "</td><td>" + '<button id="deleteB" class="but">刪除</button>' + "</td></tr>";
$(".tabb").append(txt);
})
var obj = data.result.list;
console.log(obj);
$(document).ready(function() {
//搜索圖書信息
$("#find").on("click", ".butt", ser);
function ser() {
console.log("find");
var text = $("#tex").val();
console.log(text);
var text2 = $("#tex2").val();
var text3 = $("#tex3").val();
var len = data.result.list.length;
console.log(len);
// console.log(data.result.list[1].bookname);
var a = 0;
for (var i = 0; i < len; i++) {
if (text == data.result.list[i].bookname) {
alert("書名: " + data.result.list[i].bookname + "\n作者: " + data.result.list[i].author + "\n數(shù)量: " + data.result.list[i].count + "\n出版社: " + data.result.list[i].publish + "\n價格: " + data.result.list[i].price);
$("#tex").val("");
a++;
}
if (text == data.result.list[i].author) {
alert("書名: " + data.result.list[i].bookname + "\n作者: " + data.result.list[i].author + "\n數(shù)量: " + data.result.list[i].count + "\n出版社: " + data.result.list[i].publish + "\n價格: " + data.result.list[i].price);
$("#tex").val("");
a++;
}
if (text == data.result.list[i].publish) {
alert("書名: " + data.result.list[i].bookname + "\n作者: " + data.result.list[i].author + "\n數(shù)量: " + data.result.list[i].count + "\n出版社: " + data.result.list[i].publish + "\n價格: " + data.result.list[i].price);
$("#tex").val("");
a++;
}
}
if (a == 0) {
alert("沒有找到相關(guān)信息");
$("#tex").val("");
}
}
//刪除圖書信息
$("#tab").on("click", ".but", de);
function de() {
console.log("eeeee");
$(this).parent().parent().remove();
}
//添加圖書信息
$("#header").on("click", ".add", ad);
function ad() {
var bookname = $("#name").val();
var author = $("#au").val();
var count = $("#num").val();
var publish = $("#pub").val();
var price = $("#money").val();
if(bookname==""||author==""||count==""||publish==""||price==""){
alert("請完善圖書信息，任何信息不得為空");
console.log("afaf");
}
else{
if(parseInt(count)<0){
alert("圖書數(shù)量不能為負(fù)");
}
else{
var txt2 = "<tr><td>" + bookname + "</td><td>" + author + "</td><td>" + count + "</td><td>" + publish + "</td><td>" + price + '' + "</td><td>" + '<button id="deleteB" class="but">刪除</button>' + "</td></tr>";
$(".tabb").append(txt2);
data.result.list.push({
bookname,
author,
count,
publish,
price
});
console.log(data.result.list);
$("#name").val("");
$("#au").val("");
$("#num").val("");
$("#pub").val("");
$("#money").val("");
}
}
}
});
},
error: function(jqxhr, textStatus, err) {
console.log(jqxhr, textStatus, err)
}
})
var hei = $(window).height();
// console.log(wid);
console.log(hei);
$("#box").css({
"background-image":"url(gi.jpg)",
"background-size":"100%",
//"width": wid,
"height": hei
});
</script>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-449883.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-449883.html
到了這里，關(guān)于基于html+css+js的圖書管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![云借閱圖書管理系統(tǒng)[基于SSM框架的項目]](https://imgs.yssmx.com/Uploads/2024/02/446799-1.png)
