2. 程式人生 > 實用技巧 >老外寫的 不用JavaScript框架的個人圖書管理系統

老外寫的 不用JavaScript框架的個人圖書管理系統

阿新 • • 發佈：2020-09-03 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/bootstrap.min.css">
    <link rel="stylesheet" href="./js/font-awesome-4.7.0\css\font-awesome.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1 class="display-4 text-center">
          <i class="fas fa-book-open text-primary"></i> 我的<span class="text-primary">書籍</span>列表</h1>
          <form id="book-form">
            <div class="form-group">
              <label for
 
="title">書籍名稱</label>
              <input type="text" id="title" class="form-control">
            </div>
            <div class="form-group">
              <label for="author">作者</label>
              <input type="text" id="author" class="form-control">
            </div>
            <div class="form-group">
              <label for
 
="isbn">ISBN#</label>
              <input type="text" id="isbn" class="form-control">
            </div>
            <input type="submit" value="Add Book" class="btn btn-primary btn-block">
          </form>
          <table class="table table-striped mt-5">
            <thead>
              <tr>
                <th>書籍名稱</th>
                <th>作者</th>
                <th>ISBN#</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="book-list"></tbody>
          </table>
      </div>
</body>
<script>
    //
 
 Book Class: Represents a Book
class Book {
  constructor(title, author, isbn) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
  }
}
// UI Class: Handle UI Tasks
class UI {
  static displayBooks() {
    const books = Store.getBooks();
    books.forEach((book) => UI.addBookToList(book));
  }
  static addBookToList(book) {
    const list = document.querySelector('#book-list');
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.isbn}</td>
      <td><a href="#" class="btn btn-danger btn-sm delete">X</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 alert-${className}`;
    div.appendChild(document.createTextNode(message));
    const container = document.querySelector('.container');
    const form = document.querySelector('#book-form');
    container.insertBefore(div, form);

    // Vanish in 3 seconds
    setTimeout(() => document.querySelector('.alert').remove(), 3000);
  }

  static clearFields() {
    document.querySelector('#title').value = '';
    document.querySelector('#author').value = '';
    document.querySelector('#isbn').value = '';
  }
}

// Store Class: Handles Storage
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(isbn) {
    const books = Store.getBooks();

    books.forEach((book, index) => {
      if(book.isbn === isbn) {
        books.splice(index, 1);
      }
    });

    localStorage.setItem('books', JSON.stringify(books));
  }
}

// Event: Display Books
document.addEventListener('DOMContentLoaded', UI.displayBooks);

// Event: Add a Book
document.querySelector('#book-form').addEventListener('submit', (e) => {
  // Prevent actual submit
  e.preventDefault();

  // Get form values
  const title = document.querySelector('#title').value;
  const author = document.querySelector('#author').value;
  const isbn = document.querySelector('#isbn').value;

  // Validate
  if(title === '' || author === '' || isbn === '') {
    UI.showAlert('請完整填寫資訊', 'danger');
  } else {
    // Instatiate book
    const book = new Book(title, author, isbn);

    // Add Book to UI
    UI.addBookToList(book);

    // Add book to store
    Store.addBook(book);

    // Show success message
    UI.showAlert('書籍 新增', 'success');

    // Clear fields
    UI.clearFields();
  }
});

// Event: Remove a Book
document.querySelector('#book-list').addEventListener('click', (e) => {
  // Remove book from UI
  UI.deleteBook(e.target);

  // Remove book from store
  Store.removeBook(e.target.parentElement.previousElementSibling.textContent);

  // Show success message
  UI.showAlert('書籍 移除', 'success');
});
</script>
</html>

相關推薦

老外寫的 不用JavaScript框架的個人圖書管理系統

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

我用Python幫學校寫了一款圖書管理系統！教導員居然請我吃飯

話不多說，直接正文開始，話說才吃個飯是不是虧了，是不是又獎金沒給我! 很多人學習python，不知道從何學起。很多人學習python，掌握了基本語法過後，不知道在哪裡尋找案例上手。很多已經做案例的人，卻不知道如何去

用view檢視不含序列化寫圖書管理系統

圖書管理系統 圖書管理系統後端介面 1 books/models.py 中設定表 from django.db import models

圖書管理系統(ssm框架) —— 01環境搭建

資料庫搭建 books表--存放書籍資訊 CREATE DATABASE ssmframework; USE ssmframework; CREATE TABLE `books`(

C語言實現個人通訊錄管理系統

如何用c語言製作簡易的個人通訊錄管理系統？想必這是每一位初步學習c語言的同學需要解決的一個大問題。如何將這些資料型別不完全相同的資料元素儲存並訪問呢？採用結構體便能輕鬆解決這個問題！

C++實現圖書管理系統

閒來無事，用C++做了一個圖書管理系統，主要有借書、還書、圖書管理、使用者管理等功能，主要用到的技術有容器和檔案，以及類的封裝

python+mysql實現個人論文管理系統

本文例項為大家分享了python mysql個人論文管理系統的具體程式碼，供大家參考，具體內容如下

python實現簡單圖書管理系統

用python實現一個簡單的圖書管理系統 ，供大家參考，具體內容如下 1、工具：PyCharm3.6 社群版

Android小程式實現個人資訊管理系統

本文例項為大家分享了Android實現個人資訊管理系統的具體程式碼，供大家參考，具體內容如下

mybatis實現圖書管理系統

本文例項為大家分享了mybatis實現圖書管理系統的具體程式碼，供大家參考，具體內容如下

spring+mybatis實現圖書管理系統

一、流程 jsp頁面發起請求-->控制器-->控制器通過一個service物件呼叫service方法-->service中通過xxxMapper物件呼叫dao中的方法-->查詢資料庫

JAVA初級專案——實現圖書管理系統

　　今天博主再給大家分享一個小專案：MiNi圖書管理系統。用的是Java語言開發的，程式碼不多，大概260行左右吧，系統是實現圖書的新增圖書、刪除圖書、借閱圖書、歸還圖書、檢視圖書等簡單的功能（後附原始碼）！

圖書管理系統設計與實現—看這篇就夠了

圖書管理系統設計與實現 圖書館人員結構複雜，人員數量有限，涉及方面很廣，如果還使用手工操作處理圖書借閱問題，工作將非常繁瑣，需要大量的人力、物理、財力，極大的浪費了資源，對於圖書管理人員來說，圖書館管

基於C語言實現個人通訊錄管理系統

之前利用C語言完成了一個關於個人通訊錄管理系統的課題，主要是關於聯絡人的新增、查詢、刪除、修改、輸出以及檔案的寫入與讀出，還有一個甜點功能—模擬通話，它的實現原理也很容易理解，文章末尾會介紹到。

23.Django（form元件 自定製校驗規則、鉤子、更改圖書管理系統）

自定製校驗規則 之前form表單給我們提供了一些校驗功能： 這些基本你的校驗功能，不足以滿足我們日常的需要，使用者名稱不允許出現敏感字元，電話號碼的驗證，等等。

基於web的圖書管理系統設計與實現

原文連結：基於web的圖書管理系統設計與實現 系統演示連結：點選這裡檢視演示

02 圖書管理系統（SSM+LayUi）

資料庫表設計 1、圖書分類表 drop table if exists class_info; /* ================================================= */

03 圖書管理系統（SSM+LayUi）

建立ssm專案工程 3.1 建立maven工程 1、開啟IDEA->file->new->project 2、選擇Maven，勾選Create from archetype，

11 圖書管理系統（SSM+LayUi）

1、DAO層介面和實現 在classInfoDao.java裡寫增刪改介面 package com.gychen.dao; import com.gychen.po.ClassInfo;

10-2 圖書管理系統（SSM+LayUi）

返回響應資訊工具類 在com.gychen.util裡新建Constants和RestRespond Constants package com.gychen.util;