接下來的兩天，

我們就依照我們先前學到的，

來實際做一個簡單的書單專案吧!

建立書單資料庫

• 與之前所新增的 booktest 資料表有點差別的地方，

  就是有新增了一個 memberId 的欄位，來存放我們登入使用者的 id，

  這樣我們每次登入首頁時，都可以取到開使用者所有書單資訊。

CREATE TABLE `book` (
  `id` int NOT NULL AUTO_INCREMENT,
  `bookName` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '',
  `createdAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `memberId` int NOT NULL,
  PRIMARY KEY (`id`),
  KEY `memberId` (`memberId`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci

調整 EJS 畫面

• 首頁 index.ejs

  • 因為我們需要將書單列表、新增和刪除書本的功能加到畫面上，

    所以需要調整我們畫面的 HTML。

  • 新增書籍

    <!-- 新增書籍的表單 -->
          <form action="/book" method="post">
            <label for="title">Book Name:</label>
            <input type="text" id="bookName" name="bookName" placeholder="Book Name" required>
            <button type="submit">Add Book</button>
            <br>
          </form>
    

  • 顯示該使用者所有書單內容

    • 注意要使用 EJS if…else 的文法，不然如果沒有查找到資料時伺服器會報錯。

    <ul>
            <% if (books && books.length > 0) { %>
              <% books.forEach(function(book) { %>
                <li><%= book.id %>.<%= book.bookName %></li>
              <% }); %>
            <% } else { %>
              <li>No books available</li>
            <% } %>
          </ul>
    

  • 刪除書籍的表單

    • 我們只有顯示已有的書籍 id

    • 需要注意一下因為 Form 本身只有支援 GET / POST 的請求方式，

      為了實現我們昨天所學到的 RESTful API 提到 DELETE 刪除資源的方法，

      需要利用套件來將方法做轉換，這部分在後面實作時詳細提到。

    <!-- 刪除書籍的表單 -->
          <form action="/book" method="delete">
            <label for="bookToDelete">Delete Book's Id:</label>
            <select id="bookToDelete" name="id">
              <% if (books && books.length > 0) { %>
                <% books.forEach(function(book) { %>
                  <option value="<%= book.id %>"><%= book.id %></option>
                <% }); %>
              <% } %>
            </select>
            <button type="submit">Delete Book</button>
          </form>
    
    

調整路由程式

• 使用者所有書單內容 GET /index

  • 原本只有顯示使用者的名字，現在要加上顯示所有書籍的名稱。

  // routes\modules\index.js
  
  router.get('/', requireLogin, async (req, res) => {
  
    try {
  
  		// 到資料庫找我們登入時依我們存在 session.userId 使用者，查找是否有書單。
      const books = await book.findAll({where:{
        memberId: req.session.userId
      },raw: true})
  
  		// 將結果回傳至畫面。
      res.render('index',{'username': req.session.user, books: books})
    } catch (error) {
      throw new Error(error)
    }
  })
  

  • 如果沒有查詢到結果就會呈現 No books available 的字樣。

    

  • 如果有資料的話就會顯示出書名的 id + 書籍的名稱。

  

  ---

  是不是會有人詢問還沒新增書籍哪來的書單列表XD

  別急~這我們明天會再繼續介紹!

  大家明天見啦~