Mockの基本使用

Mock.jsはアナログデータジェネレータで、フロントエンドの攻城ライオンがバックエンドに立って開発し、ユニットテストの作成を支援することを目的としています.以下のシミュレーション機能を提供します.

データテンプレートに基づいてアナログデータ

を生成する.

Ajax要求をシミュレートし、シミュレーションデータ

を生成して返す.

HTMLテンプレートに基づいてアナログデータ

を生成する.
とにかく、Mockを使います.jsは前後端で並列開発を行い、効率を高めることができ、フロントエンドエンジニアが必ず身につけるツールです.以下に使用手順を紹介します.

まず関連依存パッケージ

をダウンロードする.

npm install -S axios//        ，    axios   
npm install -D mockjs

プロジェクトディレクトリの下にmock.jsファイルを作成し、アナログデータインタフェース

を定義する.

は、ユーザ情報を取得するインタフェースが必要であると仮定し、ユーザ情報

をシミュレートする.

//  mock    
import Mock from 'mockjs' //  mockjs
const Random = Mock.Random //  mock.Random  

const userList = function(){    
	let newList = []    
	//  10   
	for(let i = 0; i < 10; i++){
		//            
		let newNewsObject = {            
			userid: i+1, //                
			name: Random.cname(), //                
			gender: Random.string('01',1,1),//              	
			phone: Random.string('number',8,11),//       
			birth: Random.date(),//              
			mail:Random.email() //  
		}        
		newList.push(newNewsObject)    
	}    
	return newList
}

//  url，     userList
Mock.mock('/mock/userList', userList)

は、ここで生成するデータ

を使用することを示すmain.jsのファイルをmock.jsに導入する.

//  mock
require('@/mock.js')

必要な場所でgetネットワーク要求を送信してデータを取得する

// App.vue
<template> 
	<div id="#app">div>
template>

<script>
import axios from 'axios' //   axios
export default { 
//             
mounted() { 
	axios.get('/mock/news').then(res => 
	{ // url  mock.js     
		console.log(res.data) //          
	}) 
}}
script>

Mock詳細用法参考