CRUD 操作 (作成、読み取り、更新、削除) は、データ管理を必要とするアプリケーションの基本です。これらの操作はデータベースと効果的に対話するために必要な基本機能を提供するため、開発者にとってこれらの操作を理解することは重要です。このブログ投稿では、CRUD オペレーションとは何か、また MERN スタック (MongoDB、Express、React、Node.js) を使用して CRUD オペレーションを実装する方法について、ヨガ ポーズ ライブラリ アプリに CRUD オペレーションを統合した方法を紹介しながら説明します。
CRUD は、
の頭字語です。これらの操作は、データ操作を伴うほとんどの Web アプリケーションのバックボーンを形成します。 CRUD 操作を実装すると、ユーザーはデータを効果的に操作および管理できるようになります。
CRUD 操作の実装を開始するために、ヨガのポーズを保存するための 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));
次に、ヨガのポーズを表すマングース モデルを作成しました。このモデルにより、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);
MongoDB 接続とモデルをセットアップしたら、Express サーバーに CRUD 操作を実装しました。
ユーザーが新しいヨガのポーズを追加できるようにするために、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' }); } });
このルートでは、リクエストボディで送信されたデータを使用して新しいポーズが作成され、データベースに保存されます。
読み取り操作のために、すべてのポーズを取得するルートを作成しました:
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 応答として送り返します。
ユーザーが既存のポーズを更新できるようにするために、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 に基づいて特定のポーズを更新し、更新されたポーズを返します。
最後に、削除操作を実装しました:
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 操作を実装したら、Postman を使用して各エンドポイントをテストしました。このテストにより、ルートが正しく機能し、データが期待どおりに管理されていることを確認できました。
次の本文を使用して POST リクエストを /api/poses に送信します:
{
"name": "戦士I",
"description": "脚と体幹を強化する立ちポーズ。"
}
GET リクエストを /api/poses に送信します。
更新されたデータを含む PUT リクエストを /api/poses/:id に送信します。
DELETE リクエストを /api/poses/:id に送信します。
CRUD 操作は、データ管理を伴うあらゆるアプリケーションにとって不可欠です。 MERN スタックを使用してこれらの操作をヨガ ポーズ ライブラリ アプリに統合することで、ユーザーがヨガのポーズを効果的に操作できる堅牢なアプリケーションを作成しました。 CRUD 操作を理解して実装すると、開発スキルが大幅に向上し、動的な Web アプリケーションを作成できるようになります。アプリの改善を続けるにつれて、より多くの機能を探索し、ユーザー エクスペリエンスを向上させることを楽しみにしています。
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3