How to Develop a CRUD App with Vue.js?

はじめに このガイドでは、vue jsを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を発見します。 バック4アプリの力を利用して、バックエンドを簡単に処理します。このチュートリアルでは、バック4アプリプロジェクトの設定、動的データモデルの作成、vue jsを使用したcrud操作の実装について説明します。 最初に、「 basic crud app vue 」という名前のバック4アプリプロジェクトを設定し、アプリのための堅牢な非関係データベースを提供します。コレクションとフィールドを手動で設定するか、バック4アプリのインテリジェントaiエージェントを使用してデータモデルを設計します。 次に、バック4アプリ管理アプリを使用してデータを管理します。これは、ユーザーフレンドリーなドラッグアンドドロップインターフェースで、レコードを簡単に作成、読み取り、更新、削除できます。 最後に、rest api呼び出し（axiosを使用）を介してvue jsフロントエンドをバック4アプリと統合し、安全で効率的なcrud操作を実行します。 このチュートリアルの終わりまでに、基本的なcrud機能と安全なユーザー認証およびデータ管理を備えた、プロダクション準備が整ったvue jsアプリケーションを作成できるようになります。 主なポイント スケーラブルなバックエンドに基づいたvue jsベースのcrudアプリを構築する方法を学びます。 柔軟なバックエンドを構築し、それをvue jsプロジェクトに接続する方法を理解します。 back4appの直感的な管理アプリを使用して、シームレスなcrud操作を行う方法を発見します。 dockerコンテナ化を含むデプロイメント技術を探求し、vue jsアプリケーションを展開します。 前提条件 始める前に、次のものを用意してください 新しいプロジェクトが設定されたback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 vue jsの開発環境。 vue cliまたはvscodeなどのお気に入りのideを使用してください。 vue js、モダンjavascript、およびrest apiの基本的な知識。 必要に応じて、 vue jsのドキュメント https //vuejs org/guide/introduction html を復習してください。 ステップ 1 – プロジェクトのセットアップ 新しい back4app プロジェクトの作成 back4app アカウントにログインします。 ダッシュボードから「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます： basic crud app vue そして、セットアップを完了するための指示に従います。 新しいプロジェクトを作成 プロジェクトを作成した後、ダッシュボードに表示され、バックエンドの基盤を築きます。 ステップ 2 – データモデルの設計 データの構造化 この crud アプリケーションでは、back4app プロジェクト内に複数のコレクションを定義します。以下の例は、crud 機能に必要なコアコレクションとそのフィールドを示しています。 1\ アイテムコレクション このコレクションは、各アイテムの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成されたユニークid。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 アイテム作成のタイムスタンプ。 更新日時 日付 最後の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報と認証データを処理します。 フィールド データ型 説明 id オブジェクトid 自動生成されたユニークid。 ユーザー名 文字列 ユーザーのためのユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 ログイン用の暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新タイムスタンプ。 back4appダッシュボードでこれらのコレクションとフィールドを手動で追加できます。 新しいクラスを作成 データタイプを選択し、フィールド名を提供し、デフォルト値を設定し、必要に応じて必須としてマークすることでフィールドを追加できます。 カラムを作成 スキーマ設定のためのback4app aiエージェントの活用 統合されたback4app aiエージェントは、あなたの説明に基づいてデータスキーマを自動的に生成できます。このツールは設定を迅速化し、あなたのモデルがcrud要件を満たすことを保証します。 aiエージェントの使用方法 aiエージェントを開く back4appダッシュボードにログインし、プロジェクト設定のaiエージェントに移動します。 データモデルを説明する 必要なコレクションとフィールドを詳しく説明するプロンプトを入力します。 レビューと確認 aiエージェントが提案されたスキーマを生成したら、それをレビューし、設定を実装することを確認します。 例のプロンプト create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) このai駆動のアプローチは時間を節約し、最適化された一貫したデータモデルを確保します。 ステップ3 – 管理アプリの有効化とcrud操作の管理 管理アプリの概要 back4app管理アプリは、バックエンド管理のためのノーコードインターフェースを提供します。ドラッグアンドドロップ機能を使用して、レコードの作成、読み取り、更新、削除などのcrud操作を簡単に実行できます。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックします 「管理アプリを有効にする」。 管理者の資格情報を設定 最初の管理者アカウントを作成することによって。このプロセスは、役割（例えば、 b4aadminuser ) とシステムコレクションも確立します。 管理アプリを有効にする 有効化後、管理アプリにログインしてデータの管理を開始します。 管理アプリダッシュボード 管理アプリを通じたcrud操作の管理 管理アプリ内で、あなたは 新しいレコードを作成 新しいデータを挿入するには、任意のコレクション（例：アイテム）で「レコードを追加」をクリックします。 レコードを編集または表示 レコードを選択してその詳細を表示するか、フィールドを変更します。 レコードを削除 もはや必要のないレコードを削除します。 このインターフェースはデータ処理を簡素化し、全体的なユーザー体験を向上させます。 ステップ 4 – vue js アプリケーションを back4app に接続する バックエンドの準備が整ったら、vue js アプリを back4app にリンクする時です。 axios を使用した rest api コール crud 操作を実行するために、axios を介して rest api コールを使用します。 axios をインストールする プロジェクトディレクトリで次のコマンドを実行します npm install axios axios を設定する ファイルに axios インスタンスを作成します (例 api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; vue コンポーネントに crud メソッドを実装する アイテムを取得して作成する方法の例は次のとおりです // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('アイテムの取得中にエラーが発生しました ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('アイテムの追加中にエラーが発生しました ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('アイテムの更新中にエラーが発生しました ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('アイテムの削除中にエラーが発生しました ', error)); } }; これらの api メソッドを vue コンポーネントに統合して、アプリのデータを管理します。 ステップ 5 – バックエンドのセキュリティ アクセス制御リスト (acl) の設定 aclを設定してデータを保護します。たとえば、所有者のみが表示または変更できるアイテムを作成するには import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } クラスレベルの権限 (clp) の設定 back4appダッシュボードを使用してclpを設定し、認証されたユーザーのみが特定のコレクションにアクセスできるようにします。これにより、バックエンドがデフォルトで安全に保たれます。 ステップ 6 – ユーザー認証の実装 ユーザー登録とログインの設定 back4appは、認証のために組み込みのユーザーコレクションを活用します。vue jsアプリでは、rest api呼び出しを使用してユーザーのサインアップとログインを管理できます。方法は次のとおりです // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; このセットアップでは、セッション管理、パスワードリセット、および追加の認証機能を処理することもできます。 ステップ 7 – vue js アプリケーションのデプロイ back4app はデプロイプロセスを簡素化します。docker コンテナ化を含むさまざまな方法を使用して、vue js アプリケーションをデプロイできます。 7 1 vue js アプリケーションのビルド コンパイルとバンドル vue cli を使用してアプリをコンパイルします npm run build ビルドの確認 出力フォルダー（通常は dist/ ) に必要なすべてのファイルが含まれていることを確認します。 7 2 プロジェクト構造の概要 一般的な vue js プロジェクト構造は次のようになります basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 vue js アプリの docker 化 コンテナ化されたデプロイを好む場合は、プロジェクトのルートに dockerfile を含めてください \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 back4appウェブデプロイメントによるデプロイ githubリポジトリを接続する あなたのvue jsプロジェクトがgithubにホストされていることを確認してください。 デプロイメントを設定する back4appダッシュボードで、「 web deployment 」オプションを選択し、リポジトリ（例 basic crud app vue ）をリンクし、希望のブランチを選択します。 ビルドコマンドを設定する ビルドコマンド（例 npm run build )を指定し、出力フォルダ（例 dist )を示します。 デプロイする 「 deploy 」をクリックし、アプリがライブになるまでログを監視します。 ステップ8 – 最終的な考えと次のステップ おめでとうございます！あなたはback4appと統合されたvue jsベースのcrudアプリケーションを構築しました。 「 basic crud app vue 」という名前のプロジェクトを設定し、アイテムとユーザーのコレクションを作成し、データ管理のためにback4app admin appを使用しました。 さらに、rest api呼び出しを介してvue jsフロントエンドを接続し、セキュリティ対策を確立しました。 次のステップ： アプリケーションを拡張する： 高度なフィルタリング、詳細なアイテムビュー、またはライブ更新などの機能を組み込みます。 バックエンド機能を強化する： クラウド機能を探求し、外部apiを統合するか、役割ベースのアクセス制御を実装します。 学び続ける： 「 back4appのドキュメント https //www back4app com/docs 」や追加のリソースを参照して、アプリをさらに洗練させます。 コーディングを楽しんで、vue js crudアプリケーションの構築を楽しんでください！