基于html+css+js的图书管理系统

2023-07-31 21:53| 来源: 网络整理| 查看: 265

资源下载地址：https://download.csdn.net/download/sheziqiong/86771863 资源下载地址：https://download.csdn.net/download/sheziqiong/86771863 目录一．项目设计方案 4 二．实施过程分析 4 三．项目设计成果 4 四．项目创新性 4 五．改进及展望 4 六．项目成员 4 附录一 5 一．项目设计方案本项目是用html，css，js语言编写的图书管理系统，用jquery进行页面的加工，ajax异步读取信息，json数据存储相关信息。 1.项目界面设计（1）注册界面：主要包含3个输入框，分别是用户名，密码和邮箱。下方一个注册按钮和css制作的小球波浪动画。以贺卡的布局展现整个页面。（2）登录界面：主要包含2个输入框，分别是用户名，密码。下方一个登录按钮。以贺卡的布局展现整个页面。（3）主界面：主要包含一个图书信息的表格，添加图书的输入框，搜索框，管理系统的标题，页脚。背景图是一个图书馆的实景图。 2.项目交互设计本应用涉及到的交互有：（1）点击注册按钮，如果有输入框内容为空，弹出警告。点击确定重新注册，注册成功后，跳转出注册成功的提示，提示后自动跳转到登录页面。（2）点击登录按钮，如果如果有输入框内容为空，弹出警告。如果登录的用户名或密码与json数据中存储的不一致，则弹出警告。点击确定重新登录。点击登录按钮，用户名和密码与存储的一致则跳转出现登录成功，本文转载自http://www.biyezuopin.vip/onews.asp?id=15031再自动跳转到主页面。（3）输入需要增加的图书信息，如果有输入框中内容为空，则出现警告。如果书的数目为负，则出现警告。点击添加图书按钮，图书信息被增加到表格上。（4）输入需要搜索的图书/作者/出版社信息，点击搜索按钮，弹出图书详细信息。（5）点击图书列表中的删除按钮，删除单条信息。 3.项目功能设计（1）注册用户输入用户名，密码和邮箱进行注册，如果输入框内容为空则报出警告。（2）登录用户输入用户名，密码，与已存储的json数据进行验证，验证成功进入主界面，不成功弹出警告。（3）浏览图书进入主界面后，可以查看表格中的图书信息，鼠标移动到图书信息上会有一定的效果变化。（4）增加图书设置五个输入框，分别是：书名，作者名，数量，出版社，单价。用户输入信息后点击添加按钮添加到表格上。如果有输入框为空则弹出警告。如果书籍数量为负也弹出警告。（5）删除图书点击图书表格上每条图书后的删除按钮，删除单条图书信息，新添加后的图书信息也可以删除。（6）搜索图书用户在搜索框输入书名/作者/出版社信息，点击搜索按钮，弹出该图书的详细信息，如果没有搜索到，就弹出提示。新增加的信息也可以被搜索到。

图书管理系统 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%; } 图书管理系统书名：作者: 数量：出版社: 单价：书名作者数量出版社单价 Wechat;:;hictoo / QQ;:;2947873981 / [email protected] / Tel : 18742527701 点击下方图标与我联系 $.ajax({ url: "books.json", dataType: "json", success: function(data) { //data -- 请求成功的相应数据 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 = "" + bookname + "" + author + "" + count + "" + publish + "" + price + '' + "" + '删除' + ""; $(".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 alert("书名: " + data.result.list[i].bookname + "\n作者: " + data.result.list[i].author + "\n数量: " + 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数量: " + 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数量: " + data.result.list[i].count + "\n出版社: " + data.result.list[i].publish + "\n价格: " + data.result.list[i].price); $("#tex").val(""); a++; } } if (a == 0) { alert("没有找到相关信息"); $("#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) var txt2 = "" + bookname + "" + author + "" + count + "" + publish + "" + price + '' + "" + '删除' + ""; $(".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 });

在这里插入图片描述资源下载地址：https://download.csdn.net/download/sheziqiong/86771863 资源下载地址：https://download.csdn.net/download/sheziqiong/86771863

【本文地址】

公司简介

联系我们