首頁 > web前端 > js教程 > CRUD 操作:它們是什麼以及如何使用它們?

CRUD 操作:它們是什麼以及如何使用它們?

DDD
發布: 2024-10-07 16:22:02
原創
424 人瀏覽過

CRUD Operations: What Are They, and How Can I Use Them?

CRUD 操作:它們是什麼以及如何使用它們?

CRUD 操作(建立、讀取、更新和刪除)是任何需要資料管理的應用程式的基礎。對於開發人員來說,了解這些操作非常重要,因為它們提供了我們有效與資料庫互動所需的基本功能。在這篇文章中,我將透過展示如何將 CRUD 操作整合到我的 Yoga Pose Library 應用程式中來解釋什麼是 CRUD 操作以及如何使用 MERN 堆疊(MongoDB、Express、React 和 Node.js)來實現它們。

什麼是 CRUD 操作?

CRUD 是縮寫詞,代表:

  • 建立: 將新資料加入資料庫。
  • 讀取:從資料庫檢索資料。
  • 更新:修改資料庫中的現有資料。
  • 刪除:從資料庫中刪除資料。

這些操作構成了大多數涉及資料操作的 Web 應用程式的骨幹。實施 CRUD 操作使用戶能夠有效地與資料互動和管理資料。

為 CRUD 操作設定 MERN 堆疊

1. 設定 MongoDB

為了開始實作 CRUD 操作,我設定了一個 MongoDB 資料庫來儲存我的瑜珈姿勢。以下是您可以執行相同操作的方法:

  • 安裝MongoDB:從官網下載並安裝MongoDB
  • 啟動 MongoDB 伺服器: 在終端機中執行 mongod 來啟動伺服器。

2. 連接到MongoDB

為了連接到 MongoDB,我使用了 Mongoose,這是一個用於 MongoDB 和 Node.js 的物件資料建模 (ODM) 函式庫。以下是我在 server.js 檔案中建立連線的方法:



const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/yogaPoseLibrary')
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.error('Error connecting to MongoDB', err));


登入後複製

3. 建立 Mongoose 模型

接下來,我創建了一個 Mongoose 模型來代表我的瑜珈姿勢。該模型允許與 MongoDB 集合輕鬆互動。在 models/Pose.js 檔案中,我定義了架構如下:



const mongoose = require('mongoose');

const poseSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
});

module.exports = mongoose.model('Pose', poseSchema);


登入後複製

實施CRUD操作

設定 MongoDB 連線和模型後,我在 Express 伺服器中實作了 CRUD 操作。

1. 創建(發布)

為了允許使用者添加新的瑜珈姿勢,我創建了一條接受 POST 請求的路線:



app.post('/api/poses', async (req, res) => {
  try {
    const newPose = new Pose(req.body);
    const savedPose = await newPose.save();
    res.status(201).json(savedPose);
  } catch (err) {
    res.status(500).json({ error: 'Failed to create pose' });
  }
});


登入後複製

在此路線中,使用請求正文中發送的資料建立新姿勢並將其儲存到資料庫中。

2. 讀取(取得)

對於讀取操作,我建立了一條檢索所有姿勢的路線:



app.get('/api/poses', async (req, res) => {
  try {
    const poses = await Pose.find();
    res.json(poses);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch poses' });
  }
});


登入後複製

此路由從資料庫中檢索所有瑜珈姿勢並將它們作為 JSON 回應傳回。

3. 更新(放置)

為了讓使用者更新現有姿勢,我實現了一條 PUT 路線:


app.put('/api/poses/:id', async (req, res) => {
  try {
    const updatedPose = await Pose.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.json(updatedPose);
  } catch (err) {
    res.status(500).json({ error: 'Failed to update pose' });
  }
});


登入後複製

該路由根據提供的 ID 更新特定姿勢並返回更新後的姿勢。

4. 刪除(DELETE)

最後,我實作了刪除操作:


app.delete('/api/poses/:id', async (req, res) => {
  try {
    await Pose.findByIdAndRemove(req.params.id);
    res.json({ message: 'Pose deleted' });
  } catch (err) {
    res.status(500).json({ error: 'Failed to delete pose' });
  }
});


登入後複製

此路線使用 ID 從資料庫中刪除姿勢。

測試 CRUD 操作

實作 CRUD 操作後,我使用 Postman 測試每個端點。此測試可確保我的路線正常運作並且資料按預期進行管理。

測試範例

  • 建立新姿勢

使用以下正文向 /api/poses 發送 POST 請求:


{
"name": "戰士 I",
"description": "一種增強腿部和核心力量的站立姿勢。"
}

  • 閱讀所有姿勢

發送 GET 請求到 /api/poses。

  • 更新現有姿勢

使用更新後的資料向 /api/poses/:id 發送 PUT 請求。

  • 刪除姿勢

發送刪除請求到 /api/poses/:id。

結論

CRUD 操作對於任何涉及資料管理的應用程式都是必不可少的。透過使用 MERN 堆疊將這些操作整合到我的瑜珈姿勢庫應用程式中,我創建了一個強大的應用程序,允許使用者有效地與瑜珈姿勢互動。了解和實施 CRUD 操作將顯著提高您的開發技能,並使您能夠建立動態 Web 應用程式。隨著我不斷改進我的應用程序,我期待探索更多功能並增強用戶體驗。

以上是CRUD 操作:它們是什麼以及如何使用它們?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板