全端勇士之路 Node.js 基礎學習-結合 Firebase + Express 做一個小應用(3)

前言

前一篇已經講了如何新增資料並渲染到畫面上,所以這一篇主要就會講如何刪除 firebase 上的資料並重新渲染畫面

範例程式碼

首先先附上目前完整的 route 程式碼與 all.js

route 內容

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
var express = require('express');
var router = express.Router();
var firebaseAdmin = require('../connection/firebase-admin');

/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('user');
});

router.post('/create', function(req, res, next) {
var fireRef = firebaseAdmin.ref('todo').push(); // 設定路徑,並使用 push() 確保唯一值
var fireGetRef = firebaseAdmin.ref('todo');
var data = {
content: req.body.content
}
fireRef.set(data).then(function () {
fireGetRef.once('value', function (snapshot) {
res.send({
success: true,
result: snapshot.val(),
massage: '新增資料成功'
});
})
})
});

module.exports = router;

all.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
var content = document.getElementById('content');
var btn = document.getElementById('btn');
var list = document.getElementById('list');

function XHRAJAX () {
var xhr = new XMLHttpRequest();
xhr.open('POST','/users/create')
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var test = 'content=' + content.value;
xhr.send(test);
xhr.onload = function () {
var _data = xhr.responseText;
showTodo(JSON.parse(_data));
}
}

function showTodo (data) {
if(data.success) {
var listAjax = data.result
var str = '';
for(item in listAjax) {
str += '<li>'+ listAjax[item].content + '</li>'
}
list.innerHTML = str;
} else {
return
}
}

btn.addEventListener('click', XHRAJAX)

顯示畫面

由於我們要增加一個刪除按鈕,所以要先調整一下 get route 渲染畫面

1
2
3
4
5
6
7
8
router.get('/', function(req, res, next) {
var fireGetRef = firebaseAdmin.ref('todo');
fireGetRef.once('value', function(snapshot) {
res.render('user', {
data: snapshot.val()
});
})
});

接下來是 EJS 方面要做一下調整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="content" name="content">
<input type="button" id="btn" value="送出">
<ul id="list">
<% for (item in data) {%>
<li><%= data[item].content %></li>
<% } %>
</ul>
<script src="../javascripts/all.js"></script>
</body>
</html>

如果沒問題的話,正常一打開畫面就會看到資料被渲染出來哩

資料被渲染

刪除資料

由於我們一開始並沒有規劃到刪除功能,所以就必須來做一下調整,舉凡 get route 等等,都要調整

EJS 方面我直接給程式碼不然會太長

1
2
3
4
5
<ul id="list">
<% for (item in data) {%>
<li><%= data[item].content %> - <a href="#" data-id="<%= item %>">刪除</a></li>
<% } %>
</ul>

然後 all.js 新增一個刪除的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function deleteAjax (e) {
e.preventDefault();
if(e.target.nodeName !== 'A') return;
var xhr = new XMLHttpRequest();
xhr.open('DELETE','/users/delete')
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var test = 'id=' + e.target.dataset.id;
xhr.send(test);
xhr.onload = function () {
var _data = xhr.responseText;
showTodo(JSON.parse(_data));
}
}

list.addEventListener('click', deleteAjax)

接下來也新增一個 DELETE route

1
2
3
4
5
6
7
8
9
10
11
12
13
router.delete('/delete', function(req, res, next) {
var fireDelRef = firebaseAdmin.ref('todo');
var fireGetRef = firebaseAdmin.ref('todo');
fireDelRef.child(req.body.id).remove().then(function () {
fireGetRef.once('value', function (snapshot) {
res.send({
success: true,
result: snapshot.val(),
massage: '刪除成功'
});
})
})
});

這樣就可以做到查詢、新增、刪除等功能哩~
而且都是透過 AJAX 完成。

補充

最後補充修改一個地方 all.js 裡面的 showTodo 方法要改成這樣才對

1
2
3
4
5
6
7
8
9
10
11
12
function showTodo (data) {
if(data.success) {
var listAjax = data.result
var str = '';
for(item in listAjax) {
str += '<li>'+ listAjax[item].content + '-'+ '<a href="#" data-id="'+ item + '">刪除</a>' + '</li>'
}
list.innerHTML = str;
} else {
return
}
}
0%