json数组实现图书管理系统——图书管理、查询、前台分页功能

分手后的思念是犯贱 2022-08-21 05:45 192阅读 0赞

第一部分——

此部分是我个人实现的功能，经过检测，但是布局方面欠妥

1.实现了前台分页，根据json数组的长度，和每页的容量，自动确定页数，生成导航button

2.根据书名精确搜索书籍（根据作者和书价来搜索，原理是一样的，因为比较懒，此处没有做）

3.当输入书籍信息为空或者不存在时，会有提示信息提醒，用户重新输入

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container{ position: absolute; width: 700px; height: 450px; margin-top: 60px; margin-left: 300px; border: solid 1px blue; } #id_book{ position: absolute; width: 700px; height: 400px; border: solid 1px red; bottom: 0px; } #id_search{ position: absolute; width: 300px; height: 30px; border: solid 1px #428BCA; top: 0px; left: 180px; } #btn_location{ position: absolute; width: 300px; height: 30px; margin-left: 550px; margin-top: 550px; } #nameBook{ width: 80%; height: 80%; } p{ text-align: center; line-height: 50px; font-size: 24px; } label{ line-height: 30px; } [type=button]{ width: 10%; margin-left: 3px; } </style> <script language="JavaScript"> var book = [ { 'bookName':'人间','bookPrice':'50','author':'蔡骏'}, { 'bookName':'病毒','bookPrice':'20','author':'蔡骏'}, { 'bookName':'诅咒','bookPrice':'16','author':'蔡骏'}, { 'bookName':'猫眼','bookPrice':'18','author':'蔡骏'}, { 'bookName':'看着','bookPrice':'23','author':'蔡骏'}, { 'bookName':'笛声','bookPrice':'24','author':'蔡骏'}, { 'bookName':'客栈','bookPrice':'15','author':'蔡骏'}, { 'bookName':'公寓','bookPrice':'27','author':'蔡骏'}, { 'bookName':'地狱','bookPrice':'18','author':'蔡骏'}, { 'bookName':'归来','bookPrice':'25','author':'蔡骏'}, { 'bookName':'秘密','bookPrice':'14','author':'蔡骏'}, { 'bookName':'旋转','bookPrice':'13','author':'蔡骏'}, { 'bookName':'蝴蝶','bookPrice':'16','author':'蔡骏'}, { 'bookName':'天机','bookPrice':'49','author':'蔡骏'}, { 'bookName':'谋杀','bookPrice':'24','author':'蔡骏'}, { 'bookName':'地狱','bookPrice':'32','author':'蔡骏'}, { 'bookName':'生死','bookPrice':'12','author':'蔡骏'}, { 'bookName':'一夜','bookPrice':'19','author':'蔡骏'}, { 'bookName':'偷窥','bookPrice':'21','author':'蔡骏'}, { 'bookName':'爱人','bookPrice':'34','author':'蔡骏'}, { 'bookName':'圣婴','bookPrice':'17','author':'蔡骏'}, { 'bookName':'迷城','bookPrice':'14','author':'蔡骏'}, { 'bookName':'陷落','bookPrice':'15','author':'蔡骏'}, { 'bookName':'绑架','bookPrice':'13','author':'蔡骏'}, { 'bookName':'肉香','bookPrice':'15','author':'蔡骏'}, { 'bookName':'遗骸','bookPrice':'17','author':'蔡骏'}, { 'bookName':'疫 ','bookPrice':'15','author':'蔡骏'}, { 'bookName':'卷人','bookPrice':'18','author':'蔡骏'}, { 'bookName':'家书','bookPrice':'20','author':'蔡骏'}, { 'bookName':'赤兔','bookPrice':'17','author':'蔡骏'} ]; var pageNum; window.οnlοad=function(){ var btn_loca=document.getElementById('btn_location'); pageNum=Math.ceil(book.length/6); book_show(1); for(var i=1;i<=pageNum;i++){ var btn=document.createElement('input'); btn.setAttribute('type','button'); btn.setAttribute('value',i); btn.setAttribute('onclick','book_show('+i+')'); btn_loca.appendChild(btn); } } function book_show(page){ var bs=document.getElementById('id_book'); bs.innerHTML=""; for(var i=(page-1)*6;i<page*6-1;i++){ var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author); bs.innerHTML=document.getElementById('id_book').innerHTML+bookMessage.display()+'</br>'; } bs.innerHTML='<p>'+bs.innerHTML+'</p>'; } function bookInformation(bookName,bookPrice,author) { this.bookName = bookName; this.bookPrice = bookPrice; this.author = author; this.display = function () { return 'bookName' + bookName + ' ' + 'bookPrice' + bookPrice + ' ' + 'author' + author; } } function searchBook(){ var search = document.getElementById('nameBook').value; var i=0; var count = 0; document.getElementById('id_book').innerHTML=""; for(i;i<book.length+1;i++){ var index =book[i].bookName.indexOf(search); if(index == -1 || search==""){ count++;/*当搜索的书名不存在时，count值会一直增加*/ if(count >= book.length){ document.getElementById('id_book').innerHTML = '<p>' + '没有找到您需要的书籍，请重新输入相关书籍的信息' + '</p>'; } continue; } if( search == book[i].bookName){ var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author); document.getElementById('id_book').innerHTML='<p>'+ bookMessage.display()+'</p>'; return; }else if(index != -1){ var bookMessage = new bookInformation(book[i].bookName,book[i].bookPrice,book[i].author); document.getElementById('id_book').innerHTML=document.getElementById('id_book').innerHTML+'<p>'+ bookMessage.display()+'</p>'; if( i >= book.length){ break; } } } alert(count); } </script> </head> <body> <div id="container"> <label for="id_search">请输入需要查找的书名：</label> <div id="id_search"> <input type="text" id="nameBook"/> <input type="button" value="OK" οnclick="searchBook()"/> </div> <div id="id_book"></div> </div> <div id="btn_location"></div> </body> </html>

第二部分，布局

这个是个还较为合适的图书管理布局，有几处不错的地方

<html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例</title> <style type="text/css"> #container{ width: 80%; height: 800px; margin: auto; border: solid 1px gray; } #top{ width: 100%; height: 200px; border: solid 1px gray; display: flex; justify-content: flex-end; align-items: flex-end; } #main{ width: 100%; height: 600px; border: solid 1px gray; } #main_top{ width: 100%; border: solid 1px gray; background-color: white; } #main_bottom{ width: 100%; height: 100px; border: solid 1px gray; text-align: center; } #txt_search{ width:20em; height: 2em; font-size: 1.2em; outline: none; border: solid 1px gainsboro; } #btn_search{ width:10em; height: 2em; font-size: 1.2em; outline: none; border: solid 1px gainsboro; } #tab_book{ width: 100%; } #head_book{ width: 100%; height: 50px; font-size: 20px; color: black; } #tab_book tr{ width: 100%; height: 50px; } #tab_book tr td{ width: 33%; border: solid 1px gray; font-size: 1.5em; } a{ margin: 10px; text-decoration: none; color: black; font-size: 2em; } </style> <script language=javascript> //在script里边，和HTML结合，将输出结果打印成一个表格； function show_books(book_arr,index){ document.getElementById('tab_book').innerHTML=''; for(var i=(index)*6;i<((index+1)*6);i++){ var tr='<tr>'+ '<td>'+book_arr[i].bookName+'</td>'+ '<td>'+book_arr[i].bookPrice+'</td>'+ '<td>'+book_arr[i].author+'</td>'+ '</tr>'; document.getElementById('tab_book').innerHTML+=tr; } } </script> </head> <body> <div id="container"> <div id="top"> <div div_search> <input type="text" id="txt_search"/> <input type="button" id="btn_search" value="Search" οnclick="book_search()"/> </div> </div> <div id="main"> <div id="main_top"> <table id="head_book"> <tr> <th>bookname</th> <th>bookprice</th> <th>author</th> </tr> </table> <table id="tab_book"> </table> </div> <div id="main_bottom"> </div> </div> </div> </body> </html>