1. axiosとmock.jsをインストールする
npm install mockjs --save
npm install axios --save
2.mock.jsフォルダーを作成する
プロジェクトの src ディレクトリに新しいモック フォルダーを作成し、シミュレーション データを生成するように設定された js ファイルを保存します。たとえば、以下の赤枠内のようになります。
bar.js の内容は次のとおりです。
// bar.js 文件
let Mock = require('mockjs');
const random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据
let data = [];
for (let i = 0; i < 8; i++) {
let obj = {
id: random.string(18,20),
name: random.name(),
value: random.integer(60, 100),
}
data.push(obj)
}
Mock.mock('/api/mock/bar', data) // 后面讲这个api的使用细节
pie.js の内容は次のとおりです。
// pie.js 文件
const Mock = require('mockjs');
let data = Mock.mock({
'status': 200,
'data|1-9': [{
'key|+1': 1,
'mockTitle|1': ['肆无忌惮'],
'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
'mockAction|1': ['下载', '试听', '喜欢']
}]
});
Mock.mock('/api/mock/pie', data);
Index.js の内容は次のとおりです (このファイルはここでは模擬エントリ ファイルとして使用されます)。
// index.js 文件
require('./pie/pie'); //引入pie.js 文件
require('./bar/bar'); //引入bar.js 文件
# 3. main.jsにモックエントリファイルを導入する
// main.js 文件
import axios from 'axios' //引入axios
import qs from 'qs' //引入qs
Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios
Vue.prototype.$qs = qs //全局注册，使用方法为:this.$qs
require('./mock') //引入 mock 入口文件
# 4. .vue ファイルでの呼び出し
たとえば、App.vue では、データを取得するために get リクエストを送信します。
<template>
<div></div>
</template>
<script>
export default {
name: 'app',
data () {
return {
value: 0
}
},
created () {
this.getdata()
},
methods: {
getdata() {
this.$axios.get("/api/mock/bar", {
params: {id:1,name:'bs'}
}).then(res => { // url即在 bar.js 中定义的
console.log(res.data);
}).catch(function(error) {
console.log(error);
});
this.$axios.post("/api/mock/pie",{
id:1,name:'bs'
}).then(res => { // url即在 pie.js 中定义的
console.log(res.data);
}).catch(function(error) {
console.log(error);
});
}
}
}
</script>
<style scoped>
</style>
印刷結果は次のとおりです。
# 5. 補足説明
-
Mock.mock( rurl, rtype, template|function( options ) )
-
rurl: オプション。インターセプトする必要がある URL を示します。URL 文字列または通常の URL を指定できます。たとえば、「/domian/list.json」です。
-
rtype: オプション。インターセプトする必要がある Ajax リクエストのタイプを示します。たとえば、GET、POST、PUT、DELETE などです。
-
template: オプション。データ テンプレートを表します。オブジェクトまたは文字列を指定できます。データ テンプレートの各属性は、属性名、生成ルール、属性値の 3 つの部分で構成されます。
-
('name|rule': value ) 属性名 name、生成ルール ルール、属性値 value。例: 'name|1-10':1 will generated an integer between 1-10. 詳細なルールについては、公式ドキュメントを参照してください。
-
function(options): オプション。応答データの生成に使用される関数を示します。
-
options: URL、type、body の 3 つの属性を含む、このリクエストの Ajax オプション セットを指します。
# 6. いくつかのサンプルコード
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
let data = [] // 用于接受生成数据的数组
for(let i = 0; i < 10; i ++) { // 可自定义生成的个数
let template = {
'Boolean': Random.boolean, // 可以生成基本数据类型
'Natural': Random.natural(1, 10), // 生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 2), // 生成一个随机数组
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成web地址
'Address': Random.province() // 生成地址
}
data.push(template)
}
Mock.mock('/data/index', 'post', req =>{
console.log(req);
return data;
}) // 根据数据模板生成模拟数据
let data = Mock.mock({
'status': 200,
'data|1-9': [{
'key|+1': 1,
'mockTitle|1': ['肆无忌惮'],
'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
'mockAction|1': ['下载', '试听', '喜欢']
}]
});
Mock.mock('/api/mock/pie','get' , req =>{
console.log(req);
return data;
}) ;