這篇將開始做一個 todoList 的小應用，且結合 express + firebase 在本地端開 API
並在前端去戳 API 執行新增和移除資料
Express 整合 Firebase
首先我們需要先將 firebase 整合到 express，並非使用前面的 CDN 的方式
先到 firebase 的控制台/專案設定/服務帳戶，選擇 node 的 SDK 片段
1
2
3
4
5
6
7
8
| var admin = require("firebase-admin");
var serviceAccount = require("path/to/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://nodeclass-8c812-default-rtdb.firebaseio.com"
});
|
並引入到自己的 app.js
產生新的私密金鑰(為一個 json 檔)，複製下來放在根目錄
並在上面的 serviceAccount 改成引入自己的金鑰路徑
同時別忘記 npm install firebase-admin --save
創建新增資料的 API
接下來要在 app.js 創建新增資料的 API，因為有資料需要帶入到 firebase 所以是採用 post
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
app.post('/addTodo', function(req, res) {
fireData.ref('todos').push({
content: req.body.content
})
.then(function() {
fireData.ref('todos').once('value', function(snapshot) {
res.send({
'success': true,
'result': snapshot.val(),
'msg': '資料讀取成功'
});
})
})
})
|
這裡就結合到前面所講的 firebase 語法
當 API 創建好了之後，可以用 postman 自己打打看，看看 response 是不是符合預期
創建刪除資料 API
刪除資料跟新增資料，其實大同小異，新增資料是帶文字內容新增到 firebase
而刪除資料，只要找到當筆資料的 key 值，就可以做移除了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
app.post('/removeTodo', function(req, res) {
const id = req.body.id;
fireData.ref('todos').child(id).remove()
.then(function() {
fireData.ref('todos').once('value', function(snapshot) {
res.send({
'success': true,
'result': snapshot.val(),
'msg': '資料刪除成功'
});
})
})
})
|
上面就是刪除資料的 API，一樣創建完之後，可以用 postman 先試打
渲染畫面
當 firebase 有資料時，當進到頁面時需要先渲染出來，這時候就可以在頁面 render 時，把資料帶進去
1
2
3
4
5
6
7
8
9
10
| app.get('/', function (req, res) {
fireData.ref('todos').once('value', function(snapshot) {
const data = snapshot.val();
res.render('index', {
todoList: data
});
})
})
|
接著就可以在 ejs 去做渲染了
1
2
3
4
5
6
7
8
|
<ul id="list">
<% for(item in todoList) { %>
<li><%- todoList[item].content %>
<button type="button" data-key="<%- item %>">刪除</button>
</li>
<% } %>
</ul>
|
這個時候就會把資料全部渲染到畫面上了~