使用JavaScript编程，完成图书管理系统

2024-12-19 07:49:37 JS 1630

创建一个图书管理系统（Library Management System）可以涉及多个功能，如添加图书、删除图书、借阅图书、归还图书等。以下是一个简单的JavaScript实现示例，包括基本的图书对象管理和用户界面交互：

功能描述：

图书对象：
- 每本书都有唯一的ID、标题、作者和状态（借出或可借）。
基本操作：
- 添加图书：向图书列表中添加新的图书对象。
- 删除图书：从图书列表中删除指定ID的图书对象。
- 借阅图书：将图书状态从可借改为借出。
- 归还图书：将图书状态从借出改为可借。
用户界面：
- 使用HTML和CSS创建基本的界面元素，如输入框、按钮和表格，用于显示和操作图书列表。

示例代码：

以下是一个简单的实现示例，包含添加图书、删除图书和显示图书列表的基本功能。

HTML代码（index.html）：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <h1>图书管理系统</h1>
  <form id="bookForm">
    <label for="title">标题：</label>
    <input type="text" id="title" required>
    <label for="author">作者：</label>
    <input type="text" id="author" required>
    <button type="button" onclick="addBook()">添加图书</button>
  </form>
  <br>
  <table id="bookTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>标题</th>
        <th>作者</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="bookList">
      <!-- 这里将显示图书列表 -->
    </tbody>
  </table>

  <script src="app.js"></script>
</body>
</html>

JavaScript代码（app.js）：

javascript
// 定义图书类
class Book {
  constructor(id, title, author, status) {
    this.id = id;
    this.title = title;
    this.author = author;
    this.status = status; // status: 'available' 可借, 'borrowed' 已借
  }
}

// 初始化图书列表
let books = [
  new Book(1, 'JavaScript权威指南', 'David Flanagan', 'available'),
  new Book(2, '深入理解ES6', 'Nicholas C. Zakas', 'available'),
];

// 添加图书
function addBook() {
  let title = document.getElementById('title').value;
  let author = document.getElementById('author').value;
  
  // 自动生成ID，实际情况应该根据情况分配唯一ID
  let id = books.length + 1;

  let newBook = new Book(id, title, author, 'available');
  books.push(newBook);

  // 清空表单输入
  document.getElementById('title').value = '';
  document.getElementById('author').value = '';

  // 更新图书列表显示
  displayBooks();
}

// 删除图书
function deleteBook(id) {
  books = books.filter(book => book.id !== id);
  displayBooks();
}

// 显示图书列表
function displayBooks() {
  let bookList = document.getElementById('bookList');
  bookList.innerHTML = '';

  books.forEach(book => {
    let row = document.createElement('tr');
    row.innerHTML = `
      <td>${book.id}</td>
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.status}</td>
      <td><button onclick="deleteBook(${book.id})">删除</button></td>
    `;
    bookList.appendChild(row);
  });
}

// 初始显示图书列表
displayBooks();

关键说明：

图书类：使用Book类来表示每本书的属性和状态。
操作函数：addBook()用于添加图书，自动生成唯一ID；deleteBook(id)用于删除指定ID的图书；displayBooks()用于显示当前的图书列表。
用户界面：使用HTML和CSS创建表单和表格，JavaScript处理交互逻辑并更新界面。

这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的图书管理系统，可以根据实际需求扩展功能，如借阅、归还等操作。