Express + Firebase 設計 todoList API(下)

前一篇講到了在後端的部分創建新增和刪除資料的 API
那這篇就要介紹前端去戳 API 渲染畫面的部分

---

前端打新增資料的 API

在前端基本的 HTML 格式會如下:

<h2>代辦清單</h2>
<input type="text" name="content" id="content" value="">
<input type="button" name="send" id="send" value="送出">
<ul id="list">
  <% for(item in todoList) { %>
    <li><%- todoList[item].content %>
      <button type="button" data-key="<%- item %>">刪除</button>
    </li>
  <% } %>
</ul>

上面的 todoList 是預設傳進來的
接著就開始撰寫前端的 JS 部分:

// 選取 DOM
const content = document.querySelector('#content');
const send = document.querySelector('#send');
const list = document.querySelector('#list');

// 按鈕送出之後
send.addEventListener('click', function(e) {
  // 取消元素預設行為
  e.preventDefault();
  // 開始 AJAX
  const xhr = new XMLHttpRequest();
  xhr.open('post', '/addTodo');
  xhr.setRequestHeader('Content-type', 'application/json');
  // 把傳送的資料轉成字串
  const data = JSON.stringify({ content: content.value });
  xhr.send(data);
  xhr.onload = function() {
    // 把撈回來的資料轉成 JSON
    const res = JSON.parse(xhr.responseText);
    // 如果 success 為 false 就不繼續執行
    if(res.success === false) {
      alert(res.msg);
      return false
    }
    // 下面開始重組內容字串
    const todoList = res.result;
    let str = '';
    for(item in todoList) {
      str += `<li>${todoList[item].content}
        <button type="button" data-key="${item}">刪除</button>
      </li>`
    }
    // 重新渲染
    list.innerHTML = str;
  }
})

---

前端打刪除資料的 API

刪除和新增其實也是大同小異，畢竟前面我們在 button 上，有綁了 data-key 所以就很好取到當筆資料的 key 值了

// 刪除功能
list.addEventListener('click', function(e) {
  // 如果不是 button 元素，則中斷
  if(e.target.nodeName !== 'BUTTON') {
    return false
  }
  // 取得綁在 button 上的 key
  const key = e.target.dataset.key;
  // 開始 AJAX
  const xhr = new XMLHttpRequest();
  xhr.open('post', '/removeTodo');
  xhr.setRequestHeader('Content-type', 'application/json');
  const data = JSON.stringify({
    id: key
  });
  xhr.send(data);
  xhr.onload = function() {
    const res = JSON.parse(xhr.responseText);
    // 如果 success 為 false 就不繼續執行
    if(res.success === false) {
      alert(res.msg);
      return false
    }
    // 下面開始重組內容字串
    const todoList = res.result;
    let str = '';
    for(item in todoList) {
      str += `<li>${todoList[item].content}
        <button type="button" data-key="${item}">刪除</button>
      </li>`
    }
    // 重新渲染
    list.innerHTML = str;
  }
})

---

佈屬到 heroku

做到這裡也算一個小應用了，我就好奇怎麼佈屬上去 heroku，於是就研究了一下
首先

1. 註冊一個 heroku 的帳號
2. 需要有 Git 工具
3. 安裝 heroku CLI
   附上 heroku 對 node 佈屬的文件 連結

開啟終端機進到要佈屬上去的專案輸入指令 git init
把 git 初始化，且加入到索引並 commit
這裡要注意自己創建 .gitignore 不要把 node_modules 傳上去
並且注意一下 package.json 的 script 是否有 node app.js 這個指令
接著輸入 heroku create 創建專案
這時候會有一個隨機亂碼的專案被產生，heroku 的後台也可以看到
接著 git push heroku master
就佈屬上去 heroku 了
以上都是 heroku 登入的狀態，注意自己是否為登入狀態