Express + Firebase 設計 todoList API(下)

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


前端打新增資料的 API

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

1
2
3
4
5
6
7
8
9
10
<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 部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 選取 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 值了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 刪除功能
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 登入的狀態,注意自己是否為登入狀態