前端老白-javascript 图书管理系统

随着互联网的发展，数字化的书籍管理系统已经越来越普遍了。而JavaScript技术的发展也让它变得更加便利和实用。在这篇文章中，我们将介绍如何使用JavaScript创建一款图书管理系统，实现方便、高效地管理书店的书籍销售和库存情况。

首先，我们需要创建一个图书库存管理的功能，大体上分为两部分，一是展示图书列表，二是添加新书籍。

var bookList = [
{ name: "《JavaScript权威指南》", price: 108.0, author: "（美）David Flanagan", date: "2019-09-01" },
{ name: "《Node.js in Action》", price: 81.2, author: "（美）Mike Cantelon", date: "2019-01-01" },
{ name: "《CSS世界》", price: 61.8, author: "张鑫旭", date: "2018-05-01" },
{ name: "《HTML5与CSS3基础教程》", price: 35.7, author: "李靖峰", date: "2019-08-01" },
{ name: "《JavaScript数据结构与算法》", price: 98.3, author: "（美）Loiane Groner", date: "2019-10-01" }
];
// 展示图书列表
function showBookList() {
var html = "

"; for (var i = 0; i< bookList.length; i++) { html += ""; } html += "

书名	价格	作者	日期
" + bookList[i].name + "	" + bookList[i].price + "元	" + bookList[i].author + "	" + bookList[i].date + "

"; document.getElementById("book_list").innerHTML = html; } // 添加新书籍 function addNewBook() { var bookName = document.getElementById("book_name").value; var bookPrice = document.getElementById("book_price").value; var bookAuthor = document.getElementById("book_author").value; var bookDate = document.getElementById("book_date").value; var newBook = { name: bookName, price: parseFloat(bookPrice), author: bookAuthor, date: bookDate }; bookList.push(newBook); showBookList(); } showBookList();

上述代码创建了一个名为bookList的数组，用来储存所有的书籍信息。在showBookList函数中，我们使用循环生成一张图书列表表格，将书籍的各项信息填充进去，并通过innerHTML方法将表格插入到HTML页面中。

而在addNewBook函数中，我们使用getElementById方法获取到表单中的书籍信息，并将其存储在一个名为newBook的对象中，然后将其推送（push）到bookList数组中，最后再调用showBookList函数来更新图书列表。

接下来，我们需要实现售出书籍的功能。当书籍售出后，图书列表中的库存数量需要相应减少。这里我们可以为每本书籍添加一个counts属性来储存其库存数量。

var bookList = [
{ name: "《JavaScript权威指南》", price: 108.0, author: "（美）David Flanagan", date: "2019-09-01", counts: 10 },
{ name: "《Node.js in Action》", price: 81.2, author: "（美）Mike Cantelon", date: "2019-01-01", counts: 8 },
{ name: "《CSS世界》", price: 61.8, author: "张鑫旭", date: "2018-05-01", counts: 12 },
{ name: "《HTML5与CSS3基础教程》", price: 35.7, author: "李靖峰", date: "2019-08-01", counts: 5 },
{ name: "《JavaScript数据结构与算法》", price: 98.3, author: "（美）Loiane Groner", date: "2019-10-01", counts: 3 }
];
// 售出书籍
function sellBook(bookName) {
for (var i = 0; i< bookList.length; i++) {
if (bookList[i].name === bookName) {
if (bookList[i].counts === 0) {
alert("此书已售罄！");
} else {
bookList[i].counts--;
showBookList();
}
break;
}
}
}

在上面的代码中，我们首先为每个书籍添加了一个counts属性，表示其库存数量。在售出书籍时，我们使用for循环遍历bookList数组，当找到对应的书籍后，判断其库存数量是否为0，若为0则弹出提示框，若不为0则将其库存数量减1，并重新调用showBookList函数来更新图书列表。

最后，我们还可以添加一个搜索书籍的功能。用法如下：

// 搜索书籍
function searchBook() {
var searchName = document.getElementById("search_name").value;
var searchResults = [];
for (var i = 0; i< bookList.length; i++) {
if (bookList[i].name.indexOf(searchName) !== -1) {
searchResults.push(bookList[i]);
}
}
var html = "

" + searchResults[j].name + "

"; document.getElementById("book_search").innerHTML = html; }

在上面的代码中，我们首先通过getElementById方法获取到搜索框中的关键词，并将其储存在一个名为searchName的变量中。然后，我们创建了一个名为searchResults的数组，用于存储搜索结果。使用for循环遍历bookList数组，并通过indexOf方法判断每本书籍是否包含关键词，若包含，则将其推入searchResults数组中。最后，我们通过循环生成一个无序列表，并将其插入到HTML页面中。

以上就是使用JavaScript创建图书管理系统的详细教程，希望对您有所帮助。当然，在实际应用中还有很多细节需要注意，希望读者在学习的过程中做好记录和总结。