Vue 3 と Comboposition API を使用してレポート アプリケーションを作成するにはどうすればよいですか?

Vue は、開発者が Web アプリケーションを作成できるようにする JavaScript フレームワークです。主に単一ページの Web アプリケーションを構築するために使用されます。 vue を使用して Web アプリケーションを作成することには、単純な構造、軽量、コンポーネントベースのアーキテクチャなど、多くの利点があります。

このチュートリアルを始める前に、レポート アプリケーションと構成 API を見てみましょう。

レポート アプリケーションは、有用なデータを表形式などの適切な形式で表示する単一ページまたは複数ページの Web アプリケーションです。データを特定の形式で表示するレポートに使用されます。

コンポジション API を使用すると、開発者はライフサイクルではなくロジックに基づいてコードを作成できます。 vue アプリケーションでは、より保守しやすいモジュール化されたコードを作成できます。

次に、「https://jsonplaceholder.typicode.com/posts」API を使用してデータを取得し、vue アプリケーションのテーブル内のすべてのデータをフォーマットします。

ユーザーは、以下の手順に従って vue アプリケーションの作成を開始する必要があります。

• ステップ 1 - 最初のステップでは、ユーザーはローカル コンピューターに vue をインストールする必要があります。ターミナルを開き、次のコマンドを実行します。

リーリー

• ステップ 2 - 次に、ターミナルに次のコマンドを入力して、vue アプリケーションを起動します。ここで、「reporting-app」はアプリケーション名です。

リーリー

• ステップ 3 - vue アプリケーションが正常に作成されました。次に、ターミナルで次のコマンドを実行して、プロジェクト ディレクトリに入ります。

リーリー

• ステップ 4 - 次に、ターミナルで次のコマンドを実行して、必要な依存関係を vue アプリケーションにインストールする必要があります。

リーリー

API リクエストを行うために axios をインストールし、アプリケーションのルーティングを処理するために vue-router をインストールしました。

• ステップ 5 - 次に、「src」プロジェクト ディレクトリに「router.js」ファイルを作成します。その後、ファイルに次のコードを追加します。

ファイル名 – router.js

リーリー

上記のコードの HomeView コンポーネントと ReportTable コンポーネントを関連ファイルからインポートしました。その後、「/」と「/report」ルーターを作成し、エクスポートしました。

• ステップ 6 - 「main.js」ファイルでアプリケーションのルーター構成をセットアップします。次のコードを main.js ファイルに追加します。

ファイル名 – main.js

リーリー

上記のコードでは、ルーター コンポーネントをインポートし、app.use() メソッドを通じてアプリケーションでそれを使用しました。

• ステップ 7 - 次に、特定のルーターベースのコンポーネントを表示するために「App.vue」ファイルを設定する必要があります。次のコンテンツを App.vue ファイルに追加します。

ファイル名 – App.vue

リーリー

• ステップ 8 - 次に、Web ページ上にレンダリングされるコンポーネントを作成します。まず、'src' ディレクトリに 'views' フォルダーを作成し、その中に「homeview.vue」ファイルを作成します。

ファイル内の

の後に次のコードを追加します。

ファイル名 – Homeview.vue

リーリー

上記のコードでは、Web ページ上に「ホーム」をレンダリングします。

• ステップ 9 - 次に、「views」ディレクトリに ReportTable.vue コンポーネントを作成する必要があります。その後、ファイルに次のコードを追加します。

ファイル名 – ReportTable.vue

リーリー

上記のコードでは、合成 API の「reactive」関数を使用して、「reports」配列を含むリアクティブ状態オブジェクトを作成します。

コンポーネントが Web ページにインストールされるたびに、「onMount()」メソッドを使用して axios 経由で API からデータを取得します。その後、応答を reports 配列に保存し、ステータス オブジェクトを返します。

テンプレート コード内のデータを表すテーブルを作成しました。その後、states オブジェクトから reports 配列にアクセスし、for ループを使用してすべてのデータを反復処理し、テーブルの行に表示します。さらに、テーブルのスタイルも整えました。

ここで、状態オブジェクトをリアクティブにするために合成 API を使用しているため、データの更新にコンポーネントのライフサイクルを使用していないことがわかります。したがって、API の応答が更新されるたびに、データが自動的に再レン​​ダリングされます。

• ステップ 10 - プロジェクト ディレクトリで次のコマンドを実行して、プロジェクトを実行します。

リーリー

ここで、ユーザーは http://192.168.110.33:8080/report URL を開いて API データを表形式で表示する必要があります。以下に示すように出力が表示されます。

ユーザーは、このチュートリアルで合成 API の機能の使用方法を学びました。上で述べたように、コンポジション API を使用する場合、「reactive()」関数を使用して変数またはオブジェクトをリアクティブにできるため、ライフサイクルを扱う必要はありません。さらに、ユーザーはデータを更新する合成 API を試し、リアクティブ変数が更新されたときに Web ページがどのように再レンダリングされるかを観察できます。

以上がVue 3 と Comboposition API を使用してレポート アプリケーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。