iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

30天Vue出Google SSO系列 第 15

Day 15. B2E-API連線DB

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200904/20118686W6hXJmhPwA.jpg

上一篇安裝的 Compass 工具真的很好玩,後來我又自己玩了一下xD
不過很可惜今天用不到它了~

今天進度目標是要把後端API連線資料庫,做真實資料的判斷!!


#環境建置

今天的建置環境是安裝驅動,Nodejs必須透過驅動才能對MongoDB做連線
順帶一提,無論什麼DB都是需要裝驅動才有辦法連線,包含MySQL、Oracle等等

#Step 1

輸入安裝指令:

npm install mongodb

#Step 2

安裝完成後,開啟 /modules/users.module.js 引用 mongodb 套件

const MongoClient = require('mongodb').MongoClient;

#Step 3

準備連線資料庫的連線字串
MongoDB的連線字串格式為: mongodb://HOST:PORT

  • HOST: 伺服端的HOST值
  • PORT: 伺服端的PORT值

而這些設定並不會全部放在module檔上,日後維護會不方便

所以我通常會建立一個 /config 資料夾,內容放這些設定檔,再到module引用它,結構會是:

└── config
    └── index.js

index.js 檔案內容就放這樣:

const mongodb = {
    HOST: 'localhost',
    PORT: 27017,
    DATABASE: 'Ironman12'
};

module.exports = {
    mongodb
};

#Step 4

回到 /modules/users.module.js 引用設定檔:

const config = require('../config');

再利用設定檔組合出連線字串:

const mongoDBConnectionUrl = `mongodb://${config.mongodb.HOST}:${config.mongodb.PORT}`;

雖然看起來是多做了很多工,但日後維護時,就可以馬上知道要去config找DB設定,而不是一行一行查程式碼

另一個好處是,假設今天做的是一個大專案,裡面有一堆module,每一個module都有連線到相同的資料庫,而原本放資料庫的伺服器好死不死突然掛掉了,這時候所有連線要改成另一台伺服器,這時候就不用去每個module改,只要改config就好

以上情境是有藏怨念的...


#API連線DB

環境建置完成後就可以實際操作對DB存取囉~

#Step 1

建立連線:

MongoClient.connect(mongoDBConnectionUrl, { 
    useUnifiedTopology: true
}).then((client) => {
    // dosomething...
}).catch(error => {
    reject({ message: error });
});

建立連線失敗時,直接 reject 掉,然後把錯誤訊息回傳

註: useUnifiedTopology 這項設定,目前估狗到的相關解釋都有點難理解,什麼拓樸之類的...
請大神開示QQ

#Step 2

連線成功時,設定要存取的DB:

const dbIronMan12 = client.db(`${config.mongodb.DATABASE}`);

建立對Collection存取的連線:

dbIronMan12.collection("users", function (error, collection) {
    if (error) {
        reject({ message: error });
    } else {
        // dosomething...
    }
});

一樣連線失敗時 reject 掉~

#Step 3

下條件抓取對應的帳號資料,collection方法可參考Collection Methods
這裡用的是 findOne() 方法來取得對應的 accountId 內容,有抓到內容會回傳物件,沒有的話回傳 null

collection.findOne({ accountId: values.accountId }).then((user) => {
    //user=回傳的結果,有內容則往下判斷,沒有內容就reject
    if (user) {
        // dosomething...
    } else {
        reject({ message: '無此帳號' });
    }
    client.close();
});

#Step 4

有抓到內容的話,要來判斷密碼是否正確:

if (user.password === values.password) {
    resolve({ message: '登入成功' });
} else {
    reject({ message: '密碼錯誤' });
}

到這邊就完成進度目標囉!!

完整的 users.module.js 代碼長這樣:

const e = require("express");
const MongoClient = require('mongodb').MongoClient;
const config = require('../config');

const mongoDBConnectionUrl = `mongodb://${config.mongodb.HOST}:${config.mongodb.PORT}`;

const userModuleSignin = (values) => {
    return new Promise((resolve, reject) => {
        MongoClient.connect(mongoDBConnectionUrl, {
            useUnifiedTopology: true
        }).then((client) => {
            client.db(`${config.mongodb.DATABASE}`).collection("users", (error, collection) => {
                if (error) {
                    reject({ message: error });
                } else {
                    collection.findOne({ accountId: values.accountId }).then((user) => {
                        if (user) {
                            if (user.password === values.password) {
                                resolve({ message: '登入成功' });
                            } else {
                                reject({ message: '密碼錯誤' });
                            }
                        } else {
                            reject({ message: '無此帳號' });
                        }
                        client.close();
                    });
                }
            });
        }).catch(error => {
            reject({ message: error });
        });
    });
};

module.exports = {
    userModuleSignin
};

#結果

用POSTMAN測試的畫面
gif已死QQ


今日重點:

  • DB連線設定檔放在 /config 資料夾,方便日後維護
  • MongoDB連線字串組合: mongodb://HOST:PORT
  • collection方法參考Collection Methods

今天成功完成了第一支API
並且達到鐵人賽完成一半的里程碑了/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif
(雖然第9天就中斷了QQ)

有需要改進或是任何意見建議歡迎下面留言~


上一篇
Day 14. B2E-MongoDB安裝
下一篇
Day 16. F2E-Axios呼叫API
系列文
30天Vue出Google SSO30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
餅乾
iT邦新手 4 級 ‧ 2020-10-02 09:54:22

第9天中斷之後,本來想還是要每日一發,殊不知忙到翻了...,今天趁著連假有點時間來把進度補足!!/images/emoticon/emoticon08.gif

我要留言

立即登入留言