js图书管理系统代码
时间: 2024-06-16 07:00:40 浏览: 20
JS图书管理系统代码是一个基于JavaScript编写的图书管理系统,它可以实现对图书的添加、删除、查询、修改等基本功能。具体代码实现包括前端UI界面设计以及后台数据的处理。
以下是一个简单的JS图书管理系统代码示例:
HTML代码:
```html
<div class="container">
<h1>图书管理系统</h1>
<form id="addBookForm">
<input type="text" id="bookTitle" placeholder="书名">
<input type="text" id="bookAuthor" placeholder="作者">
<input type="number" id="bookYear" placeholder="出版年份">
<button type="submit">添加</button>
</form>
<table id="bookTable">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版年份</th>
<th></th>
</tr>
</thead>
<tbody id="bookList"></tbody>
</table>
</div>
```
JavaScript代码:
```javascript
// 定义Book类
class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}
// 定义UI类
class UI {
static displayBooks() {
const books = Store.getBooks();
books.forEach((book) => UI.addBookToList(book));
}
static addBookToList(book) {
const list = document.querySelector("#bookList");
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.year}</td>
<td><a href="#" class="delete">删除</a></td>
`;
list.appendChild(row);
}
static deleteBook(el) {
if (el.classList.contains("delete")) {
el.parentElement.parentElement.remove();
}
}
static showAlert(message, className) {
const div = document.createElement("div");
div.className = `alert ${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector(".container");
const form = document.querySelector("#addBookForm");
container.insertBefore(div, form);
setTimeout(() => document.querySelector(".alert").remove(), 3000);
}
static clearFields() {
document.querySelector("#bookTitle").value = "";
document.querySelector("#bookAuthor").value = "";
document.querySelector("#bookYear").value = "";
}
}
// 定义Store类
class Store {
static getBooks() {
let books;
if (localStorage.getItem("books") === null) {
books = [];
} else {
books = JSON.parse(localStorage.getItem("books"));
}
return books;
}
static addBook(book) {
const books = Store.getBooks();
books.push(book);
localStorage.setItem("books", JSON.stringify(books));
}
static removeBook(year) {
const books = Store.getBooks();
books.forEach((book, index) => {
if (book.year === year) {
books.splice(index, 1);
}
});
localStorage.setItem("books", JSON.stringify(books));
}
}
// 显示书籍列表
document.addEventListener("DOMContentLoaded", UI.displayBooks);
// 添加书籍
document.querySelector("#addBookForm").addEventListener("submit", (e) => {
e.preventDefault();
const title = document.querySelector("#bookTitle").value;
const author = document.querySelector("#bookAuthor").value;
const year = document.querySelector("#bookYear").value;
if (title === "" || author === "" || year === "") {
UI.showAlert("请填写完整信息!", "error");
} else {
const book = new Book(title, author, year);
UI.addBookToList(book);
Store.addBook(book);
UI.showAlert("添加成功!", "success");
UI.clearFields();
}
});
// 删除书籍
document.querySelector("#bookList").addEventListener("click", (e) => {
UI.deleteBook(e.target);
Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
UI.showAlert("删除成功!", "success");
});
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)