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

發表於 2019-07-03 更新於 2020-12-27 分類於 Nodejs

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

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

前言

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

範例程式碼

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

route 內容

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 內容

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 渲染畫面

router.get('/', function(req, res, next) {
  var fireGetRef = firebaseAdmin.ref('todo');
  fireGetRef.once('value', function(snapshot) {
    res.render('user', {
      data: snapshot.val()
    });
  })
});

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

<!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 方面我直接給程式碼不然會太長

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

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

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

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 方法要改成這樣才對

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
  }
}