mock.js模拟数据

最新推荐文章于 2024-10-30 20:29:47 发布

gengdadada

最新推荐文章于 2024-10-30 20:29:47 发布

阅读量259

点赞数

分类专栏： mock.js模拟数据文章标签： vue中用mock.js模拟数据

本文链接：https://blog.youkuaiyun.com/weixin_43943967/article/details/89357386

版权

mock.js模拟数据专栏收录该内容

1 篇文章

订阅专栏

本文将介绍如何在Vue项目中利用Mock.js来模拟数据。首先，需要安装Mock.js模块，然后在项目的main.js文件中引入并配置。接着，详细讲解如何在创建的mock.js文件中定义模拟接口。最后，阐述在Vue组件中如何发起请求并获取这些模拟数据，以实现前端开发的快速迭代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装mock.js模块

yarn add mockjs -S

2.在main.js中引入:require("./mock.js")
在这里插入图片描述
3.mock.js

import Mock from 'mockjs' //引入mockjs，npm已安装
import { Random } from 'mockjs' // 引入random对象,随机生成数据的对象，（与占位符@一样）
Mock.setup({
    timeout: 1000  //设置请求延时时间
})
const getdata = function (option) { //定义请求数据方法
    let datalist = []
    for (let i = 0; i < 10; i += 1) {
        const o = {  //mockjs模拟随机生成数据，生成10条
            // recipeId: Random.guid(),
            // billId: Random.string(10),
            // orgId: Random.string('number', 8, 10),
            // Date: Random.date('yyyy-MM-dd'),
            // time: Random.time('A HH:mm:ss'),
            // adress: Random.county(),
            // viewName: Random.cword(4, 16), // 随机生成任意名称
            // personName: Random.cname(),
            // reason: Random.csentence(10, 32),
            id: Random.natural(0, 100),
            city:Random.city(true),
            account: Random.string('number', 11),
            user: Random.cname(),
            situation: Random.boolean()

        }
        datalist.push(o)
    }
    return {
        data: datalist
    }
}
const getdata1 = function (option) { //定义请求数据方法
    let datalist = []
    for (let i = 0; i < 20; i += 1) {
        const o = {  //mockjs模拟随机生成数据，生成20条
            viewName: Random.cword(4, 16), // 随机生成任意名称
        }
        datalist.push(o)
    }
    return {
        data: datalist
    }
}
Mock.mock("http://localhost:3000/merchants", /post|get/i, getdata); //调用模拟数据方法
// Mock.mock("http://localhost:3000/user1", /post|get/i, getdata1);

3.在组件中进行请求
在这里插入图片描述