ホームページ > 記事 > ウェブフロントエンド > Vue がモックデータを呼び出す方法
今回は、vue がモックデータを呼び出す方法と、vue がモックデータを呼び出すときの 注意事項 について説明します。実際のケースを見てみましょう。
プロジェクトを初期化します 面倒なことはせずに、まずプロジェクトを初期化するのが最も簡単な方法です。vue-clivue init webpackを使用します。 モック.jsを紹介します
mockjsをインストールnpm install --save-dev mockjs
使いやすいように Vue プロトタイプに導入されました
import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock
上記は Vue プロトタイプに導入されており、this.$mock を使用してモックデータを直接生成できます
こちらをご覧ください Vue.prototype
ここを見てくださいmockjs
プロジェクトの開発中にフロントとバックエンドを分離して偽データを作成し、開発プロセスを遅らせないためにvue2.0を使用してプロジェクトを再構築し、バックエンドもプッシュバックして使用しました。 vue-cli スキャフォールディングでビルドします。プロジェクトファイル内で、dev-server が仮想 API リクエストをビルドし、自身のモックの偽データにアクセスしてバックグラウンド モードをリクエストします。具体的な方法は次のとおりです。 build/dev-server.js ファイル内
var app =express()
// 本地json-server服务器搭建代码 // 引入数据库文件 var appData = require('../mock.json') // 引入数据库 var getBoardList = appData.getBoardList var apiRoutes = express.Router() // 使用api的方法来创建连接时候的请求 apiRoutes.post('/getBoardList', function (req, res) { res.json({ errno: 0 , data: getBoardList }); }) // 调用api app.use('/api', apiRoutes)
のインスタンスの下に次のコードを追加します。 appDataが依存するmock.jsonファイルは、独自のモックの偽のデータファイルです。自分でモックすることも、フロントエンドとバックエンドのニーズに応じてmock.jsを使用して偽のデータを作成することもできます
。 getBoardList はインターフェイスです。var getBoardList = appData.getBoardList は、このインターフェイス データを appData で定義します。
var apiRoutes = Express.Router() api Routes を作成します
。この post インターフェイスには req パラメーターと res パラメーターがあり、それが返されると、この json が含まれます。ステータス コード
errno と返されたデータ data (データはインターフェイス データ getBoardList を指します)。次に、API、app.use('/api', apiRoutes) を呼び出すと、このサービスを通常どおり使用できます ここではvue2.0が推奨するaxiosリクエストデータを使用しました。コードは次のとおりです
this.$http.post('/api/getBoardList') .then(function (response) { console.log(response.data.data); alert('成功了'); }) .catch(function (code) { alert('失败了'); console.log(code); });ブラウザコンソールでネットワークを開くと、ネットワークリクエストが生成されていることがわかります 同時に、データが無事に返されました: インターフェイスデータを追加したい場合は、dev-server.js に追加し続けるだけで、post、get などが使用できます。 dev-server.js を変更するたびに、npm run dev
プロジェクトを開始する必要があることに注意してください
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注意してください。関連記事はPHP中国語サイトにあります!ES6 でテンプレート文字列を使用してミリ秒 + 日 + 時間 + 分と秒の変換を実装する詳細な説明
Bootstrap のフォーム検証機能の使用の詳細な説明以上がVue がモックデータを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。