iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Modern Web

MERN Stack + Tailwind CSS - React 小專案實踐計畫系列 第 17

【Day 17】連接資料庫 - MongoDB

  • 分享至 

  • xImage
  •  

安裝 mongoose 套件

yarn add mongoose

新增 server/models 資料夾,並建立 postModel.js 檔案

  • 引入 mongoose
  • 建立文章的 Schema,並定義每個欄位的型別(type)、是否為必須(required)、有沒有預設值(default)…等等,官方文件還有許多可以設定的內容,有需要可以去看看~
  • 建立 Model,使用 mongoose.model() 把剛剛定義好的 Schema 放進去
  • 最後輸出建立好的 model
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true,
    },
    author: {
        type: String,
        required: true,
    },
    image: {
        type: String,
        required: true,
    },
    content: {
        type: String,
        required: true,
    },
    createdAt: {
        type: Date,
        default: Date.now(),
    },
});

const Post = mongoose.model('Post', postSchema);

module.exports = Post;

安裝 MongoDB

方式一、下載 MongoDB,使用本地端連接(以下方式使用 Homebrew 的 brew 套件管理工具)

brew tap mongodb/brew
brew update
brew install mongodb-community@6.0

https://ithelp.ithome.com.tw/upload/images/20221002/20152502ixxpyIloet.png

安裝完成後,根據官方文件設定手動執行的指令

mongod --config /usr/local/etc/mongod.conf --fork

執行

mongosh

https://ithelp.ithome.com.tw/upload/images/20221002/20152502U0UkHHIhrG.png

方式二、登入 MongoDB,使用 MongoDB Atlas 雲端方式連接

(之後會使用的方式,目前先使用 local 本地端方式)

連接 MongoDB

回到 server/index.js ,新增以下程式碼,連接目前正在電腦背景執行的 MongoDB (mongodb://localhost:27017/資料庫名稱)

mongoose.connect('mongodb://localhost:27017/bb-log');

然後修改新增文章的 api:

  • 使用 async/await、try/catch
  • req.body 傳入 Post.create() ,將前端的資料傳給資料庫
const Post = require('./models/postModel');

app.post('/api/v1/posts', async (req, res) => {
    try {
        const post = await Post.create(req.body);
        res.status(201).json({
            status: 'success',
            data: {
                data: post,
            },
        });
    } catch (err) {
        console.log(err);
        res.json({
            status: 'error',
        });
    }
});

查看結果,成功!同時在 data 中也多了 __v_id 欄位,這些是 MongoDB 在建立文件時會自動產生的~

https://ithelp.ithome.com.tw/upload/images/20221002/20152502Xty6xrynD3.png

安裝 Compass

Compass 是 MongoDB 的圖形化介面工具,能幫我們以更直覺的方式查看及管理資料庫內容,直接到官網下載即可

https://ithelp.ithome.com.tw/upload/images/20221002/20152502RpeZhYhuuq.png

打開之後,點擊連接(本地端:mongodb://localhost:27017/ )

https://ithelp.ithome.com.tw/upload/images/20221002/20152502Th57brswIG.png

進到剛剛建立的 bb-log 資料庫,就能看到我們新增的文章了!

https://ithelp.ithome.com.tw/upload/images/20221002/20152502OtIjrh4Yct.png


上一篇
【Day 16】嘗試撰寫簡單的 API
下一篇
【Day 18】從資料庫獲取資料 - Model.find()
系列文
MERN Stack + Tailwind CSS - React 小專案實踐計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言