《揭秘：基于html+css+js构建图书管理系统》

2023-01-19 21:51:11

如何使用 HTML、CSS 和 JavaScript 构建一个图书管理系统

在当今信息爆炸的时代，图书管理系统越来越受到重视。传统的图书管理方法通常采用纸质记录或电子表格，存在效率低下且易出错的弊端。为了提高图书管理的效率和便捷性，本文将介绍如何使用 HTML、CSS 和 JavaScript 构建一个图书管理系统。

系统架构

该图书管理系统由以下几个主要部分组成：

用户界面： 用户界面是系统与用户交互的窗口，负责数据的输入和输出。
业务逻辑层： 业务逻辑层是系统的核心，负责处理业务逻辑，如添加、删除、修改和搜索图书等。
数据访问层： 数据访问层负责与数据库进行交互，实现数据的读写操作。

系统功能

该图书管理系统具有以下核心功能：

用户登录： 用户需要输入用户名和密码进行登录，验证通过后方可访问系统。
图书管理： 支持图书的添加、删除、修改和搜索等操作。
数据存储： 采用 JSON 格式存储图书数据，便于数据的管理和维护。
异步操作： 使用 Ajax 技术实现异步读取信息，提高系统响应速度和用户体验。

系统界面

系统的用户界面简洁友好，如下图所示：

图书管理系统界面

系统源码

为了方便理解和使用，下面提供了该图书管理系统的完整源码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <form id="login-form">
      <label for="username">用户名:</label>
      <input type="text" id="username">
      <br>
      <label for="password">密码:</label>
      <input type="password" id="password">
      <br>
      <input type="submit" value="登录">
    </form>
    <div id="main-content">
      <h1>图书管理</h1>
      <div id="book-list">
        <table id="book-table">
          <thead>
            <tr>
              <th>书名</th>
              <th>作者</th>
              <th>出版社</th>
              <th>价格</th>
              <th>库存</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 动态加载图书信息 -->
          </tbody>
        </table>
      </div>
      <div id="book-form">
        <h2>添加图书</h2>
        <form id="add-book-form">
          <label for="book-name">书名:</label>
          <input type="text" id="book-name">
          <br>
          <label for="author">作者:</label>
          <input type="text" id="author">
          <br>
          <label for="publisher">出版社:</label>
          <input type="text" id="publisher">
          <br>
          <label for="price">价格:</label>
          <input type="number" id="price">
          <br>
          <label for="stock">库存:</label>
          <input type="number" id="stock">
          <br>
          <input type="submit" value="添加">
        </form>
      </div>
      <div id="search-form">
        <h2>搜索图书</h2>
        <form id="search-book-form">
          <label for="search-text">书名/作者/出版社:</label>
          <input type="text" id="search-text">
          <input type="submit" value="搜索">
        </form>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

/* CSS 样式 */
body {
  font-family: Arial, sans-serif;
}

.container {
  width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
}

label {
  display: inline-block;
  width: 80px;
  text-align: right;
}

input[type="text"], input[type="password"], input[type="number"] {
  width: 200px;
}

input[type="submit"] {
  margin-left: 10px;
}

#main-content {
  display: none;
}

#book-table {
  width: 100%;
  border-collapse: collapse;
}

#book-table th, #book-table td {
  padding: 5px;
  border: 1px solid #ddd;
}

#add-book-form, #search-book-form {
  display: inline-block;
}

/* JavaScript 脚本 */
const loginForm = document.getElementById("login-form");
const mainContent = document.getElementById("main-content");
const bookList = document.getElementById("book-list");
const bookForm = document.getElementById("book-form");
const addBookForm = document.getElementById("add-book-form");
const searchForm = document.getElementById("search-form");
const searchBookForm = document.getElementById("search-book-form");

// 登录表单提交事件
loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // 获取用户名和密码
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // 验证用户名和密码
  if (username === "admin" && password === "123456") {
    // 登录成功，显示主界面
    mainContent.style.display = "block";
    loginForm.style.display = "none";

    // 加载图书信息
    loadBooks();
  } else {
    // 登录失败，弹出警告
    alert("用户名或密码错误！");
  }
});

// 添加图书表单提交事件
addBookForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // 获取图书信息
  const bookName = document.getElementById("book-name").value;
  const author = document.getElementById("author").value;
  const publisher = document.getElementById("publisher").value;
  const price = document.getElementById("price").value;
  const stock = document.getElementById("stock").value;

  // 创建图书对象
  const book = {
    bookName,
    author,
    publisher,
    price,
    stock,
  };

  // 添加图书
  addBook(book);

  // 清空表单
  addBookForm.reset();
});

// 搜索图书表单提交事件
searchBookForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // 获取搜索条件
  const searchText = document.getElementById("search-text").value;

  // 搜索图书
  searchBooks(searchText);
});

// 加载图书信息
function loadBooks() {
  // 模拟从数据库获取图书数据
  const books = [
    {
      bookName: "JavaScript高级编程",
      author: "高德纳",
      publisher: "人民邮电出版社",
      price: 89.00,
      stock: 100,
    },
    {
      bookName: "深入理解计算机系统",
      author: "安德鲁·S·塔能鲍姆",
      publisher: "机械工业出版社",
      price: 128.00,
      stock: 50,
    },
    {
      bookName: "算法导论",
      author: "托马斯·H·科尔门",
      publisher: "机械工业出版社",
      price: 198.00,
      stock: 20,
    },
  ];

  // 动态生成图书列表
  books.forEach((book) => {
    const tr = document.createElement("tr");
    const tdBookName = document.createElement("td");
    const tdAuthor = document.createElement("td");
    const tdPublisher = document.createElement("td");
    const tdPrice = document.createElement("td");
    const tdStock = document.createElement("td");
    const tdOperation = document.createElement("td");
    const btnDelete = document.createElement("button");

    tdBookName.textContent = book.bookName;
    tdAuthor.textContent = book.author;
    tdPublisher.textContent = book.publisher;
    tdPrice.textContent = book.price;
    tdStock.textContent = book.stock;
    btnDelete.textContent = "删除";
    btnDelete.addEventListener("click", ()