Vue がモックデータを呼び出す方法

今回は、vue がモックデータを呼び出す方法と、vue がモックデータを呼び出すときの 注意事項 について説明します。実際のケースを見てみましょう。

プロジェクトを初期化します

面倒なことはせずに、まずプロジェクトを初期化するのが最も簡単な方法です。vue-cli

vue 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 サイトの他の関連記事を参照してください。