1.Mock.jsをインストールする
公式 Web サイト:公式モック
シナリオ: Mock.js を使用して Vue プロジェクトのデータをシミュレートする
まず、axios と Mock.js を Vue プロジェクトにインストールするには、プロジェクト ディレクトリで次のコードを実行します。
その後、package.json で表示できるようになります。これは、インストールが成功したことを意味します。 。
モック.js と axios を main.js に導入します。
2. GETリクエストをシミュレートする
src ディレクトリにモック フォルダーを作成し、その中にmock.js ファイルを作成します。
公式ドキュメントを参照してください:
Mock 関数は 3 つのパラメーターを受け取ります。最初の 2 つはオプションのパラメーターで、最後のパラメーターは必須です。
- 最初のパラメータ: インターセプトされるリクエストのアドレス
- 2番目のパラメータ: リクエストタイプ
- 3 番目のパラメータ: データを渡すテンプレートまたは関数
以下では get リクエストをシミュレートします。最初のパラメータはリクエスト パス、リクエスト パスは /obtain、2 番目のパラメータはリクエスト タイプ (get タイプ)、3 番目のパラメータは返されたデータ、ここで使用するランダム関数をモックします。
CardView.vue のボタンを使用してモック データを取得します。this.$axios.get は取得リクエストを使用することを意味し、「/obtain」はアクセス パスを表します。
プロジェクトを実行し、ボタンをクリックすると、コンソールに模擬シミュレーション データが出力されます。
3. POSTリクエストをシミュレートする
投稿リクエストは以下でシミュレートされます。最初のパラメータはリクエスト パス、リクエスト パスは /requestPostData、2 番目のパラメータはリクエスト タイプ、つまり投稿タイプです。3 番目のパラメータは、送信されるパラメータです。リクエストの本文。
リクエストを呼び出すためのページ上のボタンを定義します。this.$axios.post は投稿リクエストを表し、「/requestPostData」はアクセス パスを表し、{pid:5} は渡されるパラメータを表します。投稿リクエストにより。
ブラウザを実行してボタンをクリックすると、POST リクエストが成功したことがわかります。
4. 模擬ランダム関数
公式チュートリアルには、引用符で囲んだ場合に直接使用できるランダムな関数が多数提供されています。@函数名 特定の機能については、公式ドキュメントを確認してください。機能の使い方。
例: モックランダム関数を使用してデータを取得する GET リクエスト
ページにクリック イベントを書き込みます:
ボタンをクリックすると、 console will ランダムなデータが出力されますが、クリックするたびに出力内容が異なることがわかります。
要件: ボタンをクリックするたびに 1 つのデータだけでなく、複数のデータを生成したいのですが、どうすればよいですか?
方法: データに引用符を追加し (一重引用符または二重引用符を使用できます)、中央に | 記号とその後に数字の 3 を追加します。つまり、「data | 3」は 3 つのデータを生成することを意味します。
ページに表を追加し、シミュレートされたデータを含む表をレンダリングします。
プロジェクトに入ると、テーブルに 3 つのランダムなデータが生成されていることがわかります。
補足：「データ | 3-6」とは、3～6個のデータをランダムに生成することを意味します。
要約する
これは私がこれまでに学んだことです。追加の修正は大歓迎です~