How to Develop a CRUD App with Vue.js?

30min
はじめに
このガイドでは、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の始め方を参照してください。
Vue.jsの開発環境。
Vue CLIまたはVSCodeなどのお気に入りのIDEを使用してください。
Vue.js、モダンJavaScript、およびREST APIの基本的な知識。
必要に応じて、Vue.jsのドキュメントを復習してください。
﻿
ステップ 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エージェントが提案されたスキーマを生成したら、それをレビューし、設定を実装することを確認します。
例のプロンプト
Text
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)
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 をインストールする:
プロジェクトディレクトリで次のコマンドを実行します:
Bash
npm install axios
npm install axios
﻿
Axios を設定する:
ファイルに axios インスタンスを作成します (例: api.js):
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;
// 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 メソッドを実装する:
アイテムを取得して作成する方法の例は次のとおりです:
JS
// 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));
  }
};
// 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を設定してデータを保護します。たとえば、所有者のみが表示または変更できるアイテムを作成するには:
JS
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));
}
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呼び出しを使用してユーザーのサインアップとログインを管理できます。方法は次のとおりです:
JS
// 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));
  }
};
// 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 を使用してアプリをコンパイルします:
Bash
npm run build
npm run build
﻿
ビルドの確認:
出力フォルダー（通常は dist/) に必要なすべてのファイルが含まれていることを確認します。
﻿
7.2 プロジェクト構造の概要
一般的な Vue.js プロジェクト構造は次のようになります:
Text
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
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 を含めてください:
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;"]
# 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のドキュメント」や追加のリソースを参照して、アプリをさらに洗練させます。
コーディングを楽しんで、Vue.js CRUDアプリケーションの構築を楽しんでください！
フィールド	データ型	説明
_id	オブジェクトID	自動生成されたユニークID。
タイトル	文字列	アイテムの名前。
説明	文字列	アイテムの簡単な要約。
作成日時	日付	アイテム作成のタイムスタンプ。
更新日時	日付	最後の更新のタイムスタンプ。
フィールド	データ型	説明
_id	オブジェクトID	自動生成されたユニークID。
ユーザー名	文字列	ユーザーのためのユニークなユーザー名。
メール	文字列	ユニークなメールアドレス。
パスワードハッシュ	文字列	ログイン用の暗号化されたパスワード。
作成日時	日付	アカウント作成のタイムスタンプ。
更新日時	日付	最後のアカウント更新タイムスタンプ。
How to Create a CRUD Application with Elm?
How to Build CRUD App with JavaScript?