CRUD オペレーション: それは何ですか? どのように使用できますか?

DDD
リリース: 2024-10-07 16:22:02
オリジナル
417 人が閲覧しました

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

CRUD オペレーション: それは何ですか? どのように使用できますか?

CRUD 操作 (作成、読み取り、更新、削除) は、データ管理を必要とするアプリケーションの基本です。これらの操作はデータベースと効果的に対話するために必要な基本機能を提供するため、開発者がこれらの操作を理解することは重要です。このブログ投稿では、CRUD オペレーションとは何か、また MERN スタック (MongoDB、Express、React、Node.js) を使用して CRUD オペレーションを実装する方法について、ヨガ ポーズ ライブラリ アプリに CRUD オペレーションを統合した方法を紹介しながら説明します。

CRUD オペレーションとは何ですか?

CRUD は、

を表す頭字語です。
  • 作成: 新しいデータをデータベースに追加します。
  • 読み取り: データベースからデータを取得します。
  • 更新: データベース内の既存のデータを変更します。
  • 削除: データベースからデータを削除します。

これらの操作は、データ操作を伴うほとんどの Web アプリケーションのバックボーンを形成します。 CRUD 操作を実装すると、ユーザーはデータを効果的に操作および管理できるようになります。

CRUD 操作用の MERN スタックのセットアップ

1.MongoDBのセットアップ

CRUD 操作の実装を開始するために、ヨガのポーズを保存するための MongoDB データベースをセットアップしました。同じことを行う方法は次のとおりです:

  • MongoDB をインストールします: 公式 Web サイトから MongoDB をダウンロードしてインストールします
  • MongoDB サーバーを起動します: ターミナルで mongod を実行してサーバーを起動します。

2.MongoDBに接続する

MongoDB に接続するために、MongoDB と Node.js のオブジェクト データ モデリング (ODM) ライブラリである Mongoose を使用しました。ここでは、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. マングースモデルの作成

次に、ヨガのポーズを表すマングース モデルを作成しました。このモデルにより、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)

ユーザーが新しいヨガのポーズを追加できるようにするために、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. 読み取り(GET)

読み取り操作のために、すべてのポーズを取得するルートを作成しました:



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)

ユーザーが既存のポーズを更新できるようにするために、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 を使用して各エンドポイントをテストしました。このテストにより、ルートが正しく機能し、データが期待どおりに管理されていることを確認できました。

テスト例

  • 新しいポーズを作成します:

次の本文を使用して POST リクエストを /api/poses に送信します:


{
"name": "戦士 I",
"description": "脚と体幹を強化する立ちポーズ。"
}

  • すべてのポーズを読む:

GET リクエストを /api/poses に送信します。

  • 既存のポーズを更新します:

更新されたデータを使用して PUT リクエストを /api/poses/:id に送信します。

  • ポーズを削除します:

DELETE リクエストを /api/poses/:id に送信します。

結論

CRUD 操作は、データ管理を伴うあらゆるアプリケーションにとって不可欠です。 MERN スタックを使用してこれらの操作をヨガ ポーズ ライブラリ アプリに統合することで、ユーザーがヨガのポーズを効果的に操作できる堅牢なアプリケーションを作成しました。 CRUD 操作を理解して実装すると、開発スキルが大幅に向上し、動的な Web アプリケーションを作成できるようになります。アプリの改善を続けるにつれて、より多くの機能を探索し、ユーザー エクスペリエンスを向上させることを楽しみにしています。

以上がCRUD オペレーション: それは何ですか? どのように使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート