Vue プロジェクトで mock.js を使用する
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順
この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...
背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...
任意のウェブページを開きます。例: http://www.baidu.com/ ブラウザのタブのヘッ...
elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...
この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。...
序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...
目次vue - スワイパープラグインを使用してカルーセルを実装するカルーセルのバグを解決するには、w...
誰もがこんな気持ちになったことがあると思います。30 秒の広告が入った動画を見ると、とても不快に感じ...
1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...
最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...
1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...