」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > CRUD 操作:它們是什麼以及如何使用它們?

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

發佈於2024-11-07
瀏覽:260

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 發送 DELETE 請求。

結論

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

版本聲明 本文轉載於:https://dev.to/wendyver/crud-operations-what-are-they-and-how-can-i-use-them-589i?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何找到一個資料幀中存在但另一個資料幀中不存在的行(比較 df1 和 df2)?
    如何找到一個資料幀中存在但另一個資料幀中不存在的行(比較 df1 和 df2)?
    比較資料幀:尋找中存在但另一個中不存在的行比較資料幀以識別差異對於資料品質保證和合併至關重要營運。在本例中,我們有兩個具有特定結構的資料幀(df1 和 df2),需要確定 df2 中存在但 df1 中不存在的行。 最初,嘗試使用 df1 != df2 比較資料幀,結果是錯誤。此方法僅適用於具有相同行...
    程式設計 發佈於2024-11-07
  • 如何處理 MySQL 預存程序中的「錯誤 1329:無資料 - 取得零行」?
    如何處理 MySQL 預存程序中的「錯誤 1329:無資料 - 取得零行」?
    在預存程序中無資料警告:「錯誤1329:取得、選擇或處理零行」在資料庫程式設計中,預存程序通常用於封裝複雜的操作並確保資料完整性。然而,有時這些過程可能會遇到錯誤或產生意外的警告。一個常見問題是「錯誤 1329:無資料 - 提取、選擇或處理零行」訊息。 當預存程序未明確處理沒有傳回資料的情況時,通常...
    程式設計 發佈於2024-11-07
  • 你真的了解Git嗎?
    你真的了解Git嗎?
    本部落格中的圖片來自 Scott Chacon、Ben Straub 的「Pro Git」 在本部落格中,您將了解有關您在程式設計中使用的 Git 中的一些日常功能的各種精彩事實! 開發人員很容易盲目使用工具而不知道它們在幕後是如何工作的。雖然這種抽像是為了更好,但了解事物如何運作有時可能是經驗...
    程式設計 發佈於2024-11-07
  • 濃縮咖啡;出發時間到了
    濃縮咖啡;出發時間到了
    在過去的兩周里,我用 Go 重寫了我的基於 Rust 的 Java 構建工具,事情進展得更快。 Espresso 運作速度更快且更便攜。 Espresso 最近也能夠編譯和打包它的第一個項目,即我的另一個項目 Kindling。 我希望能得到任何關於 Espresso 的回饋。有很多功能缺失,例如...
    程式設計 發佈於2024-11-07
  • 為什麼我的 JSFiddle 無法運作?
    為什麼我的 JSFiddle 無法運作?
    調試無功能的 JSFiddle嘗試在 JSFiddle 中執行簡約程式碼片段時,使用者可能會遇到意外的功能缺失。此問題通常是由於 JavaScript 設定中的疏忽而引起的。若要解決此問題,請依照下列步驟操作:在 JavaScript 設定中找到「載入類型」下拉清單。 選擇「無換行 - 底部」。 ...
    程式設計 發佈於2024-11-07
  • GenAI Git 提交
    GenAI Git 提交
    產生 git 提交訊息很快就成為開發人員的經典 GenAI 應用程式。 為了解決這個問題,我們將製作一個 GenAIScript 腳本。 此腳本可作為常規 Node.js 自動化腳本並使用 runPrompt 向 LLM 發出呼叫並要求使用者確認產生的文字。 ? 解釋腳本 腳本...
    程式設計 發佈於2024-11-07
  • 什麼是 Webhook 以及如何有效使用它們
    什麼是 Webhook 以及如何有效使用它們
    Webhooks 是集成不同系统并实时发送通知的强大工具。它们允许一个应用程序在事件发生时自动通知另一个应用程序,而无需像传统 API 那样不断发出请求来检查是否有新内容。在这篇文章中,我们将了解它们的工作原理、如何配置它们,并且我们将探索使用 Webhook.site 工具的实际示例,该工具有助...
    程式設計 發佈於2024-11-07
  • 建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    const trim = (string) => { let strArr = string.split(""); let trimedStr = []; strArr.forEach((item) => { if (item !== " ") { ...
    程式設計 發佈於2024-11-07
  • GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    ErrorBoundary 是一個出色的工具,可以捕捉 React 元件拋出的錯誤。您可以根據錯誤本身的性質和位置提供自訂錯誤訊息。但並非所有拋出的錯誤都由 ErrorBoundary 處理!你用這些做什麼? 當考慮非同步錯誤和從 React 外部拋出的錯誤時,ErrorBoundary 不夠。為...
    程式設計 發佈於2024-11-07
  • 如何在Visual Studio 2008中設定可執行檔圖示?
    如何在Visual Studio 2008中設定可執行檔圖示?
    在Visual Studio 2008 中設定可執行檔圖示雖然提供的參考主要針對Visual Studio 2010,但在Visual Studio 中設定可執行檔圖示的原則Studio 2008 基本上都適用。但是,需要記住一些具體的注意事項:使用.ico 檔案您必須為可執行圖示使用.ico 檔案...
    程式設計 發佈於2024-11-07
  • 導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    在 phpMyAdmin 中匯入大型 SQL 檔案:另一種方法嘗試直接透過 phpMyAdmin 匯入大量 SQL 檔案可能會遇到限制。不過,有一個可靠的替代方法,就是利用 MySQL 控制台。 根據提供的建議,透​​過 MySQL 控制台匯入 SQL 檔案可以繞過 phpMyAdmin 中遇到的問...
    程式設計 發佈於2024-11-07
  • 使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    Introduction A few years ago in 2022, I attended SCaLE 19x. For those who are not aware, SCaLE is an acronym which stands for Southern Califo...
    程式設計 發佈於2024-11-07
  • create-next-app 使用此套件驗證您的應用程式名稱
    create-next-app 使用此套件驗證您的應用程式名稱
    在本文中,我們分析 create-next-app 如何驗證您的專案名稱。 validate: (name) => { const validation = validateNpmName(basename(resolve(name))) if (validation.valid) { ...
    程式設計 發佈於2024-11-07
  • 幕後反應:到底發生了什麼事?
    幕後反應:到底發生了什麼事?
    React 長期以來一直是首選的 JavaScript 函式庫,並且很容易成為世界上最受歡迎的函式庫之一。此外,隨著 Next.js 和 Remix 等流行框架建立在 React 之上,以及使用 React-Native 進行行動開發的能力,這個函式庫不會很快消失。然而,這樣做的問題是,大多數初學者...
    程式設計 發佈於2024-11-07
  • 使用 Tinder Unblur 個人資料
    使用 Tinder Unblur 個人資料
    Tinder 取消模糊程式碼說明 以下 JavaScript 程式碼是一個腳本,旨在對「喜歡你」部分中的 Tinder 照片進行取消模糊處理。它的工作原理是從 Tinder 的 API 獲取預告圖像並動態更新 DOM 以用清晰的圖像替換模糊的圖像。 async function ...
    程式設計 發佈於2024-11-07

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3