vue mock.js mock数据

使用mockjs模拟数据

• 1 下载

npm install mockjs

• 2 使用
  1 在api文件夹下新建mock.js文件

import Mock from 'mockjs';// 为了模拟真实，设置请求延迟
Mock.setup({
    // 1s之后返回timeout: 1000
})
// 匹配路径返回数据
// 除了可以使用字符串匹配路径，还可以使用正则匹配路径
// Mock.mock('/api/user', {
    
// username: 'xiaoming',
// age: 18,
// gender: '男'
// })
// 正则匹配，匹配/api/user开头的
Mock.mock(/^\/api\/user/igs, {
    username: 'xiaoming',age: 18,gender: '男'
})

使用mock数据，不会影响原来的请求，没有被mock匹配到的请求会正常请求数据
2 在main,js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = false
// 判断，如果是开发模式，引入mock
if (process.env.NODE_ENV == 'development') require('@/api/mock')new Vue({
    router,store,render: h => h(App)
}).$mount('#app')

• mock还可以随机数据

// mock还可以随机数据
Mock.mock(/^\/api\/user/igs, {
    username: 'xiaoming',// 随机时间"mtime": "@datetime",// 随机得分1-800"score|1-800": 800,// 随机等级"rank|1-100": 100,// 随机生成中文的名字"nickname": "@cname"
})