vue mock.js mock数据

最新推荐文章于 2023-08-14 18:00:00 发布

ruantianqing

最新推荐文章于 2023-08-14 18:00:00 发布

阅读量210

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ruantianqing/article/details/112911478

版权

vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文介绍了如何利用MockJS在开发环境下快速模拟API数据，避免对真实服务器的依赖。通过安装MockJS，创建mock.js文件并配置请求延迟，匹配路径返回预设的数据。在main.js中引入mock.js，确保在开发模式下使用mock数据。MockJS还支持生成随机数据，如随机时间、分数、等级和中文名字，以增加数据的真实性。在实际项目中，这有助于提高开发效率和测试覆盖率。

摘要由CSDN通过智能技术生成

使用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"
})