iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 18

DAY18-Mongo db atlas realm

前言:

昨天我們介紹了如何使用Mongodb atlas的一些最基本的功能,今天我們要更進一步介紹怎麼使用realm、怎麼寫出簡單的api,以及將架在Realm的後端和我們的前端做連線。

後端操作:

今天我們要設計一個可以讓瀏覽者留下email資料的textarea,並且在按下按鈕後能把這筆資料送到我們的後端資料誤,也就是Realm中。

首先我們要先在Mongodb atlas建立一個Database和Collection:

截圖 2021-09-28 下午10.36.05.png

這裡我建立一個database叫test,然後新增一個collection叫mailtests,接下來我們到昨天的testPost頁面:

截圖 2021-09-28 下午10.39.44.png

先把Function Editor中的code改成這樣:

exports = async function( payload, response ) {
  if(payload.body) {
    const body = EJSON.parse(payload.body.text());
    const mails = context.services.get("mongodb-atlas").db("test").collection("mailtests");
    
    const mail = {
      email: body.email,
      date: new Date()
    };
    
    return await mails.insertOne(mail);
  }
  
  return {};
};

可以看到這個function有兩個傳入參數,也就是payload跟response,我們會專注在payload的部分,因為要insert進資料庫的資料就是放在payload裡。

所以我們先透過EJSON.parse把payload裡的資料抓出來,放到body裡,至於這個payload本身的JSON結構我們等等會提到。

再來我們建立和資料庫的連線透過這串code:

const mails = context.services.get("mongodb-atlas").db("test").collection("mailtests");

應該很好理解,就是先抓資料庫再抓collection。

然後這串負責建立我們真正要寫入collection中的JSON格式:

const mail = {
      email: body.email,
      date: new Date()
    };

會有我們從網頁傳入的email和當下的日期,當然這裡只是做一個簡單的示範,要insert更多資料的話只需要依此類推。

最後透過

return await mails.insertOne(mail);

來把資料傳入。

到這裡一個簡單的Post api就完成了。

前端操作:

再來是怎麼讓React連接上Mongodb atlas。

我們先建立一個textarea type的component:

<ContactArea 
                type="text"
                id = "text"
                value={email}
                onChange={handleInputChange}
                name="text"
            />

再來我們建立一個確認按鈕:

<ContactButton onClick={saveEmail} >Subscribe</ContactButton>

而這兩個onChange和onClick中的函數是照下面這樣寫的:

import EmailData from '../../apiController'

let initialEmailState = "";

    const [email, setEmail] = useState(initialEmailState);

    const handleInputChange = event => {
        setEmail(event.target.value);
    }

const saveEmail = () => {

        if(email.indexOf('@') < 0){
            alert("Please enter a real email adress.")
            setEmail("")
        }else{

        var data = {
            "email": email
        }

        EmailData.createEmail(data).then(response => {
            console.log(response.data)
            alert("We've received your email!")
            setEmail("")
        })}
    }

handleInputChange是隨時讀取對方輸入的內容,作紀錄以便之後傳送;saveEmail則是負責做一個簡單的檢查,看裡面是否有郵件的@符號存在,確認之後將email包入data裡的"email"中,呼叫api並進行上傳。上傳成功後會alert說我們收到了,然後把email清空。

而這個EmailData的結構是這樣的:

import http from "./http-common"

class EmailData {
    createEmail(data) {
        return http.post("testPost", data);
    }
}

export default new EmailData();

寫在另一個apiController.js裡。

而他import的http-common.js則是這樣的:

import axios from "axios"

export default axios.create({
    baseURL: "https://...",
    headers: {
        "Content-type" : "application/json"
    }
})

axios是需要用npm install下載的一個插件,使用api時通常都會用到。

而baseURL的部分我們需要打開剛剛testPost的setting選項:

截圖 2021-09-28 下午11.04.39.png

把這個webHook URL複製並貼上,然後把最後面的testPost刪掉,因為這部分我們已經在apiController.js裡加上去了。

到這裡大概就可以輸入並且上傳到資料庫了!

截圖 2021-09-28 下午11.13.04.png

我們的畫面是長這樣,而database收到後的格式會這樣:

截圖 2021-09-28 下午11.13.58.png

小結:

今天阿森補完了最簡單的MERN實作方法,雖然只介紹了POST,其他還有像是GET, PUT, DELETE等等,但我想操作起來應該都大同小異,而且網路上相關的教學也很多,只要會最基本的剩下的應該都不難。

而比較需要注意的是今天示範的都是最最最最基本的功能而已,使用起來方便,但相對的也極度不安全,如果真的要實作可能還是要注意一下,不然一遭受攻擊所有資料可能就都毀了。

那今天就先這樣,我們明天見!


上一篇
DAY17-MERN
下一篇
DAY19-網站構思之figma(一)
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言