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ミニプログラムを開発するための詳細な手順

推薦する

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

Vue+ElementUI はページング関数を実装します - mysql データ

目次1. 問題2. 解決策2.1 ページングコンポーネント2.2 データベースデータを取得する関数:...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

Confluence と jira-software を Docker にデプロイする方法

バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...

docker ログが取得できない問題の解決方法

毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...

IE7 互換モードで IE8 を有効にするコード

最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...

ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

React で複数の setStates が何回呼び出されるのでしょうか?

目次1. 2 つの setState を何回呼び出すのですか? 2. 2 つの setState の...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Celery と Docker を使用して Django で定期的なタスクを処理する方法

Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...

MySQL マルチテーブル結合クエリ例の説明

実際のプロジェクトでは、複数のテーブル間に関係が存在します。 1 つのテーブル内のすべてのデータを取...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...