Mockjs

mockjs.com/

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
// var Mock = import 'mockjs'

var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

Mock.Random

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )

log .. 打印 Mock.mock('@email')

main.js 中引入mock中的index.js

\YoudaoData\qq4D2112824F4F4734FA3ACF0650F83224\212698e33c844bc3abe015fbe0f69a80\clipboard.png)

import Mock from "mockjs";


// 正则表达式包含 menu/list 字符串就会被拦截    /(\ /menu\ /list)/
// menu/list?type=1
Mock.mock("/menu/list", {
    // 属性 list 的值是一个数组，其中含有 15 到 20 个元素
    "list|15-20": [{
        "id|+1": 1000, // 从1000 开始+1
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        nickname: "@cname",
        email: "@email",
        address: "@city(true)", // true加上市
        sign: "@cword(20)", // 最多20个字
        avater: "@image(100x100,#366,DEMO)",
    }, ],
});

// 响应4秒
Mock.setup({
    timeout: 400
})

Mock.mock('/goods/list', {
    // 属性 list 的值是一个数组，其中含有 15 到 20 个元素
    "list|15-20": [{
        "id|+1": 1000, // 从1000 开始+1
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        nickname: "@cname",
        email: "@email",
        address: "@city(true)", // true加上市
        sign: "@cword(20)", // 最多20个字
        avater: "@image(100x100,#366,DEMO)",
    }, ],
})


// 类似拦截器
Mock.mock('/user/login', (options) => {
    // options.body
    return { succes: true }
})

// 添加删除 没有意义 反正是删除假数据，，  反正无缝链接即可
Mock.mock('/menu/add', (options) => {
    // options.body
    return { succes: true }
})

async created() {
    let { data } = await this.axios.get("/menu/list",{type:1});
    console.log("🚀 ~ file: App.vue ~ line 36 ~ created ~ list", data)
    this.list = data;
  },