vue mockデータ

vue mockデータ
現在の前後端分離開発にとって,前期フロントエンドのmockデータも欠かせないものであり,同様にデッドデータであるが,ページ上の表現形式が発起されたネットワークリクエストに類似しており,データレンダリングがよりリアルである.
2つの方法:
1つ目は、サーバにコードを追加し、サービス側が受信したパスと応答のデータをシミュレートすることです.
1.自分でdataを作成する.jsonファイル2.buildフォルダの下のdev-serverを変更します.jsのコード3.下のコード4を追加します.ページパスの後ろに/api/sellerを付けると、すべてのリクエストのデータが得られます.

//   json  ,        
var appData = require('../data.json');
//           
var seller = appData.seller;
//        
var apiRoutes = express.Router();
//                  
apiRoutes.get('/seller', function(req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});
//        ，     /api
app.use('/api', apiRoutes);

第2種:プラグインaxios-mock-adapterプラグインアドレスを利用する
1.プラグイン$npm install axios-mock-adapter-save-dev 2をインストールします.いくつかのデータがjsに存在することを定義し、3をエクスポートする.mockを追加します.jsファイルは下のコード4を加える.ページ上でリクエストを開始する方法eg:app.vue

>> mock.js
//       
var axios = require('axios');
//        
var MockAdapter = require('axios-mock-adapter');

//      
var mock = new MockAdapter(axios);

//            
// arguments (status ==     , data ==     , headers ==       )
mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});
//   
export default mock;

>> main.js
//     
import mock from 'mock/mock';
//   
Vue.use(mock);

>> app.vue
//       axios
import axios from 'axios';
//     
axios.get('/users').then(function(response) {
    console.log(response.data);
});

いわゆるmockデータは、あまり条件を追加する必要はありません.ページで要求を開始するだけで、必要なデータを取得することができます.パラメータの問題については、公式サイトで確認することができます.