Node.js 的 30 天學習日記--第二十六天

Node.js 學習第二十六天

因為 18 號跟 19 號人會在外面，所以在 19 號的可能會晚一天發送。

如果在看的過程中有任何錯誤歡迎寫 E-MAIL： pp840405@gmail.com 提醒我錯誤。

EJS 整合 Firebase

在連到 127.0.0.1:3000 的時後就會去跑在路由指定首頁的function

  1. 在首頁路由那邊去設定

    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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    var express = require('express');
    var app = express();
    var engine = require('ejs-locals');
    var bodyParser = require('body-parser');
    //firbase 設定
    var admin = require("firebase-admin");
    var serviceAccount = require("./expresssdemo-firebase-adminsdk-9pn15-8407d41fa7");

    admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
      databaseURL: "https://expresssdemo.firebaseio.com"
    });
    //連到 firebase 的 data
    var firdata = admin.database();

    app.engine('ejs',engine);
    app.set('views','./views');
    app.set('view engine','ejs');
    //增加靜態檔案的路徑
    app.use(express.static('public'))

    // 增加 body 解析
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:false}))

    //首頁路由
    app.get('/',function(req,res){
        //連到 firebase data 
        firdata.ref('todos').once('value',function(snapshot){
            //把資料庫裡面的值取出來並指定到 list
            var data = snapshot.val();
            var list = data.title;
            //取出來後執行 render 並帶入title有list值
            res.render('index',{"title":list});
        })    
    })

    // 監聽 port
    var port = process.env.PORT || 3000;
    app.listen(port);

  2. 完成後去更改 index.ejs 資料

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!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>
        <h1><%- title %></h1>
    </body>
    </html>

RESTful API todolist - EJS 版型設計

修改 index.ejs 檔案，修改完後在 public 資料夾內新增 js 資料夾與底下的　all.js 檔案並在檔案內下 console 或者 alert 去測是有沒有讀取到檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
    <h1><%- title %></h1>
    <input type="text" name="content" id="content">
    <input type="submit" id="send" value="儲存">
    <ul>
        <li>測試顯示<input type="button" value="刪除"></li>
    </ul>
    <script src="/js/all.js"></script>
</body>
</html>

結語

前面都有學過的內容，不太熟悉的話去翻一下前面學的就可以了，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。