Vue プロジェクトで mock.js を使用するための完全な手順

Vue プロジェクトで mock.js を使用するための完全な手順

Vue プロジェクトで mock.js を使用する

  • 開発ツールの選択: Vscode

1. コマンドラインを使用して Vue プロジェクトを作成する (Babel、Router、Vuex を手動で選択)

2. element-uiをインポートし(表示効果を高めるため)、コマンドラインに入力します。

npm i 要素UI -S

3. 主に。 js での参照

'element-ui' から ElementUI をインポートします。
import 'element-ui/lib/theme-chalk/index.css'; //スタイルファイルはVue.use(ElementUI)に導入する必要があります

4. elememnt-uiのカスタム列テンプレートを使用するために、新しいsrc/views/main/List.vueを作成します。

<テンプレート>
<div>
  <el-テーブル
  :data="テーブルデータ"
  スタイル="幅: 100%">
  <el-テーブル列
   label="日付"
   幅="180">
   <テンプレート スロット スコープ="スコープ">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </テンプレート>
  </el-table-column>
  <el-テーブル列
   label="名前"
   幅="180">
   <テンプレート スロット スコープ="スコープ">
    <el-popover トリガー="ホバー" 配置="上">
     <p>名前: {{ scope.row.name }}</p>
     <p>アドレス: {{ scope.row.address }}</p>
     <div スロット="参照" クラス="名前ラッパー">
      <el-tag size="medium">{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </テンプレート>
  </el-table-column>
  <el-table-column label="操作">
   <テンプレート スロット スコープ="スコープ">
    <el-ボタン
     サイズ="ミニ"
     @click="handleEdit(scope.$index, scope.row)">編集</el-button>
    <el-ボタン
     サイズ="ミニ"
     タイプ="危険"
     @click="handleDelete(scope.$index, scope.row)">削除</el-button>
   </テンプレート>
  </el-table-column>
 </el-table>
</div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  データ() {
   戻る {
    テーブルデータ: [{
     日付: '2016-05-02'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1518号'
    }, {
     日付: '2016-05-04'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1517号'
    }, {
     日付: '2016-05-01'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1519号'
    }, {
     日付: '2016-05-03'、
     名前: 王小湖、
     住所: '上海市普陀区金沙江路1516号'
    }]
   }
  },
  メソッド: {
   ハンドル編集(インデックス、行) {
    console.log(インデックス、行);
   },
   handleDelete(インデックス、行) {
    console.log(インデックス、行);
   }
  }
 }
</スクリプト>

5.router/index.jsは次のように設定されます

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
// コンポーネントをインポートするimport List from '../views/main/List.vue'

Vue.use(VueRouter)

定数ルート = [
 {
  パス: '/'、
  名前: 'リスト',
  コンポーネント: リスト
 },

]

const ルーター = 新しい VueRouter({
 ルート
})

デフォルトルーターをエクスポートする

現在のウェブページの表示効果は次のとおりです

5. mockjsとaxiosをインストールする

npm インストール --save-dev mockjs
npm インストール --save axios

6. api/getData.jsとrequest.jsを作成する

リクエスト

'axios' から axios をインポートします
constサービス = axios.create({
  ベースURL: "http://localhost:8080",
})
デフォルト サービスをエクスポートする

取得データ.js

'../request' から axios をインポートします
//データリストインターフェース export const getList = () => axios.get("/list")

7.srcの下にmock/mockServer.jsを作成します。

'mockjs' から Mock をインポートします。
// './data.json' からデータをインポート

Mock.mock('http://localhost:8080/list', {
  コード: 0、データ:
  {
    'データ|1000': [
      {  
        id: '@id', //ランダムID
        name: '@name', //ランダムな名前 nickName: '@last', //ランダムなニックネーム phone: /^1[34578]\d{9}$/, //ランダムな電話番号 'age|11-99': 1, //年齢 address: '@county(true)', //ランダムな住所 email: '@email', //ランダムなメールアドレス isMale: '@boolean', //ランダムな性別 createTime: '@datetime', //作成時刻 avatar() {
          //ユーザーアバター return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

8. main.jsにmockServerをインポートする

'./mock/mockServer' をインポートします

9. src/views/main/List.vue を修正(データ取得とバインディング、テーブルを中央に設定)

<テンプレート>
 <div>
  <el-table :data="tableData" スタイル="幅: 600px;マージン: 0 自動">
   <el-table-column label="ランダムID" width="200">
    <テンプレート スロット スコープ="スコープ">
     <i class="el-icon-time"></i>
     <span style="margin-left: 10px">{{ スコープ行ID }}</span>
    </テンプレート>
   </el-table-column>
   <el-table-column label="名前" width="180">
    <テンプレート スロット スコープ="スコープ">
     <el-popover トリガー="ホバー" 配置="上">
      <p>名前: {{ scope.row.name }}</p>
      <p>アドレス: {{ scope.row.address }}</p>
      <div スロット="参照" クラス="名前ラッパー">
       <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
      <p>メールアドレス: {{ scope.row.email }}</p>
      <p>性別: {{ scope.row.isMale }}</p>
      <p>ニックネーム: {{ scope.row.nickName }}</p>
      <p>電話番号: {{ scope.row.phone }}</p>
      <p>アバター:</p>
     </el-popover>
    </テンプレート>
   </el-table-column>
   <el-table-column label="操作">
    <テンプレート スロット スコープ="スコープ">
     <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
      >編集</el-button
     >
     <el-ボタン
      サイズ="ミニ"
      タイプ="危険"
      @click="handleDelete(scope.$index, scope.row)"
      >削除</el-button
     >
    </テンプレート>
   </el-table-column>
  </el-table>
 </div>
</テンプレート>

<スクリプト>
「../../api/getData」から getList をインポートします。
エクスポートデフォルト{
 データ() {
  戻る {
   テーブルデータ: [
    // {
    // 日付: "2016-05-02",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1518号"、
    // },
    // {
    // 日付: "2016-05-04",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1517号"、
    // },
    // {
    // 日付: "2016-05-01",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1519号"、
    // },
    // {
    // 日付: "2016-05-03",
    // 名前: "王小湖",
    // 住所: "上海市普陀区金沙江路1516号"、
    // },
   ]、
  };
 },
 メソッド: {
  ハンドル編集(インデックス、行) {
   console.log(インデックス、行);
  },
  handleDelete(インデックス、行) {
   console.log(インデックス、行);
  },

  非同期getMockList() {
   試す {
    const 結果 = getList() を待機します。
    //console.log(結果);
    結果データコード == 0 の場合
     this.tableData = 結果データ.データ.データ;
    }
    //console.log(結果データ.データ.データ);
   } キャッチ(エラー){
    コンソール.log(エラー);
   }
  },
 },

 マウント() {
  this.getMockList();
 },

};
</スクリプト>

10. もう一度実行する

名前の上にマウスを置くと、詳細情報が表示されます。

1000件のテストデータを表示

ページングをするのは面倒です。 。 。 。

要約する

Vue プロジェクトで mock.js を使用する方法に関するこの記事はこれで終わりです。mock.js を使用したその他の関連プロジェクトについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue プロジェクトにおける mock.js の使用と基本的な使い方
  • Vue プロジェクトで mock を使用する方法をご存知ですか?
  • vue-cliのローカル開発でモックデータを利用する方法の詳しい説明
  • Vue で開発環境でモックを制御し、本番環境で無効にする方法

<<:  Vueページジャンプの実装方法

>>:  Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

推薦する

JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

favicon.ico についていくつか注意点があります (ルートディレクトリに置くのがベストです)

任意のウェブページを開きます。例: http://www.baidu.com/ ブラウザのタブのヘッ...

el-select のスタイルを変更する方法の詳細な説明: popper-append-to-body と popper-class

elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...

シンプルな広告ウィンドウを実現するjs

この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。...

Nginx ベースのアクセス制御と接続制限の実装

序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...

よく忘れられがちな CSS のヒント 26 選

これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...

MySQL インデックス カバレッジの例の分析

この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...

スワイパープラグインを使用して Vue でカルーセルを実装する例

目次vue - スワイパープラグインを使用してカルーセルを実装するカルーセルのバグを解決するには、w...

Youku 動画から 30 秒の広告コードを削除する 2 つの方法

誰もがこんな気持ちになったことがあると思います。30 秒の広告が入った動画を見ると、とても不快に感じ...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

MySQL での数値のフォーマットの詳細な説明

最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

MySQLの文字セットを変更する方法

1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...