iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

30天Vue出Google SSO系列 第 13

Day 13. B2E-還是第一支API

https://ithelp.ithome.com.tw/upload/images/20200903/20118686XeupTOaCoW.jpg

API沒寫完睡不著...半夜爬起來繼續寫/images/emoticon/emoticon02.gif


#Step 8

昨天做好了 controller ,接著來做對應的 module !!
複習一下:

  • controller: 負責做資料傳遞及回覆
    • 接收 request
    • 將資料傳入 module
    • response 處理結果
  • module: 負責處理資料
    • 資料處理,連線DB等等的動作
    • 回傳處理結果

有人會問說,為什麼不要全部做在controller就好?
程式沒有絕對的寫法,只要結果一樣,過程中就是簡單易懂日後方便維護就好!!

#Step 9

建立資料夾以及 users 對應的 users.module.js 檔,結構長這樣:

modules
└── users.module.js

內容的部份,建立一個 module ,接收參數並使用 Promise 回傳處理結果:

const userModuleSignin = (values) => {
    return new Promise((resolve, reject) => {
        
    });
};

Promise 中使用

  • resolve成功 時回傳
  • reject異常 時回傳

先用假資料的判斷吧~

const userModuleSignin = (values) => {
    return new Promise((resolve, reject) => {
        if (values.accountId === "aa1234") {
            if (values.password === "aa9876") {
                resolve({ message: '登入成功' });
            } else {
                reject({ message: '密碼錯誤' });
            }
        } else {
            reject({ message: '無此帳號' });
        }
    });
};

最後 exports 出去:

module.exports = {
    userModuleSignin
};

#Step 10

開啟 /controllers/users.controller.js 引用 module:

var userModule = require('../modules/users.module');

原本的 controller 內容可以加上呼叫module:

const userCtrlSignin = (req, res) => {
    //res.send('signin頁');
    userModule.userModuleSignin(req.body)
      .then((moduleResult) => {
        res.send(Object.assign({ success: true }, moduleResult));
      })
      .catch((error) => {
        res.send(Object.assign({ success: false }, error));
      })
};
  • module用 resolve 回傳就會跑 then 區塊,代表處理成功
    並回覆(res) success: true 及module處理結果
  • module用 reject 回傳就會跑 catch 區塊,代表處理失敗
    並回覆(res) success: false 及錯誤內容

註: 在回覆時有用到一個方法 Object.assign,作用是將多個物件合併

#結果

POSTMAN來測試看看吧!!
gif已死QQ


今日重點:

  • Promiseresolve 在處理成功時使用,reject 在處理失敗時使用
  • resolve 對應 then 區塊,reject 對應 catch 區塊

回覆結果是需要前後端互相溝通,如果後端自己爽回什麼就回什麼,前端就接不起來
相反的,前端傳入的參數也必須和後端溝通,否則後端也不知道怎麼去接

終於做完了第一支API/images/emoticon/emoticon01.gif
雖然是用假資料判斷xD

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


上一篇
Day 12. B2E-第一支API
下一篇
Day 14. B2E-MongoDB安裝
系列文
30天Vue出Google SSO30

尚未有邦友留言

立即登入留言