前言 前一篇已經講了如何新增資料並渲染到畫面上,所以這一篇主要就會講如何刪除 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' );router.get('/' , function (req, res, next ) { res.render('user' ); }); router.post('/create' , function (req, res, next ) { var fireRef = firebaseAdmin.ref('todo' ).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 } }