mock会拦截下指定的请求，并返回由mock计算出的数据。
mock拦截下的请求不会在network里出现。
mock方便前端脱离后端进行开发。
先来一个dome说明怎么使用。mock怎么与项目结合使用。
mockjs demo
npm i mockjs// 安装mockjs- 创建src/mock.js // 用来生成mock数据。
- 在main.js引入src/mock.js
require('./mock.js')// 全项目都可使用mock接口。 - 编辑一个vue文件。
first.vue// 用来使用mock.js的数据。 - 创建
api.js，建议放在'src/lib/api.js'。 // 用来封装axios。这样做对于项目规范。非要每个请求都实例出axios也行。 - 在first.vue文件引入api.js。
做了以上5步，就可以在first.vue文件时使用api.js调用mock了。
下面是具体代码。
// mock.js import Mock from 'mockjs' const Random = Mock.Random let name = [] // 模板 for (let i = 0; i < 3; i++) { // 在模板中生成多条数据 name.push({ name: Random.string(3, 8), age: Mock.mock({ 'number|1-100': 100 }) }) } let age = { ages: Mock.mock({ 'number|1-100': 100 }) } Mock.setup({ timeout: '200' // 2s-2s后返回数据 }) Mock.mock('/data/name', 'post', name) Mock.mock('/data/age', 'get', age) // main.js require('./mock.js') // first.vue <template> <div class="basic"> basic </div> </template> <script> export default { props: {}, data () { return { } }, computed: { }, components: { }, methods: {}, created () {}, mounted () {} } </script> <style lang="sass" scoped> .basic </style> // api.js import axios from 'axios' // 请求拦截 axios.interceptors.request.use(res => { return res }, error => { return Promise.reject(error) }) // 响应拦截 axios.interceptors.response.use(res => { console.log('res', res) return res }, error => { return Promise.reject(error) }) // 封装post const fetch = (url, params) => { return new Promise((resolve, reject) => { axios({url: url, params: params, method: 'post'}).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } // 输出 export default { mockData (url, params) { return fetch(url, params) }, mockDataAge (url, params) { return new Promise((resolve, reject) => { axios({url: url, params: params, method: 'get'}).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } } // first.vue // 引入 import api from '../../lib/api.js' // 使用 getData () { api.mockData('/data/name').then(res => { this.dataName = res }) }, getDataAge () { api.mockDataAge('/data/age').then(res => { this.dataAge = res }) }数据模板 数据占位符
数据模板在官网都没有定义。我理解是数据模板就是Mock.mock()里使用的对象。
数据占位符是数据模板中用来生成指定类型数据的占位符。使用@占位符(params[,params])表示。
Mock.Random是一个工具类，用来生成各种随机数据。
数据模板中@占位符(params[,params]) 是占位符，用来生成相应数据。有人把占位符理解为mock内置模板。毕竟Mock.mock()使用它们作为参数。
后记
网上有好多关于mock的文章。都没说清楚模板是什么，做什么的，怎么用。占位符是什么，做什么的，怎么用。
官网上也不写demo.看了好几遍就看到api.能不能从大到小写文档？
为什么进入官网学教程又进入git里的wiki?
优点是官网的api写的好。可以在console里运行。