是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-07-03 Nodejs

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

#Node.js #全端勇士之路 Node.js

前言

前一篇已經講了如何新增資料並渲染到畫面上，所以這一篇主要就會講如何刪除 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
  }
}

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

全端勇士之路 Node.js-OAuth 2.0 & nodemailer & Gmail

2019-12-28

全端勇士之路 Node.js 基礎學習-會員機制(4)

2019-07-08

全端勇士之路 Node.js 基礎學習-會員機制(3)

2019-07-08

全端勇士之路 Node.js 基礎學習-會員機制(2)

2019-07-07

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme