一、簡介
Mock.js是一個基于NodeJS的用來模擬API的工具，可以方便讓前端開發(fā)人員在開發(fā)過程中用來模擬API接口，方便與后端的聯(lián)調(diào)工作，尤其方便在Vue項目中使用。
官網(wǎng)地址：
http://mockjs.com/
代碼托管地址：
https://github.com/nuysoft/Mock
二、上手使用
1. 創(chuàng)建一個Vue項目
可使用腳手架生成，這里為了方便直接使用HBuilderX創(chuàng)建了一個 element-ui 項目 。
2. 安裝依賴
npm install vue-resource
npm install mockjs
3. 新建一個mockjs文件，輸入代碼：
import Mock from 'mockjs';
export default Mock.mock('http://g.cn', {
'name': '@name',
'age|1-100': 100,
'color': '@color'
});
這里@稱為占位符。
4. 其它文件內(nèi)容
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<el-button @click="startHacking">Start</el-button>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
methods: {
startHacking () {
Vue.http.get('http://mysite.com').then(
(successData) => {console.log(successData.body);},
(fileData) => {console.log(fileData);}
)
}
}
}
</script>
<style>
#app {
font-family: Helvetica, sans-serif;
text-align: center;
}
</style>
main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import VueResource from 'vue-resource'
require('./mock')
Vue.use(ElementUI)Vue.use(VueResource)new Vue({
el: '#app',
render: h => h(App)
})
項目目錄如下：
三、運行測試
npm run dev
每次點擊按鈕，在控制臺都會顯示隨機的結(jié)果出來。
四、 其它一些常用語法
1. 占位符
占位符類型占位符方法Basicboolean, natural, integer, float, character, string, range, date, time, datetime, nowImageimage, dataImageColorcolorTextparagraph, sentence, word, title, cparagraph, csentence, cword, ctitleNamefirst, last, name, cfirst, clast, cnameWeburl, domain, email, ip, tldAddressarea, regionHelpercapitalize, upper, lower, pick, shuffleMiscellaneousguid, id
占位符不滿足使用的時候還可以進行擴展。
2. 模板
// 生成隨機長度字符
Mock.mock({ "string|1-10": "★"
})// 生成固定長度字符Mock.mock({ "string|3": "★★★"
})// 生成1-100之間的隨機數(shù)字Mock.mock({ "number|1-100": 100
})// 生成隨機小數(shù)Mock.mock({ "number|1-100.1-10": 1
})// 生成隨機布爾值Mock.mock({ "boolean|1": true
})// 從鍵值對里隨機取兩個值Mock.mock({ "object|2": {
"310000": "上海市",
"320000": "江蘇省",
"330000": "浙江省",
"340000": "安徽省"
}})// 從數(shù)組里隨機取一個值Mock.mock({ "array|1": [
"AMD",
"CMD",
"UMD"
]})
更多示例可到官網(wǎng)： http://mockjs.com/examples.html 查看。
