Mock.js

在没有后端接口的情况下模拟后端接口，返回数据

基本使用

# 安装
npm install mockjs

# 在Src目录下创建 mock 文件夹

# mock文件夹下面创建 index.vue

# 在 main.js 中导入上面文件
import './mock/index.vue'

mock/index.vue

// 导入 mock
import Mock from 'mockjs'

// 模拟接口 Mock.mock('url地址','请求方式get/post等',{要返回的数据})
Mock.mock('/api/getList', 'get', {
    status: 200,
    message: '成功',
    data:[{
        id: 1,
        name: '张三',
        age: '18',
        gender: '男'
    }]
})

// 模拟post请求, body传参提交数据
Mock.mock('/api/add','post', function(option){
    // option 为传递过来的参数
    console.log(option)
    
    // 请求成功返回值
    return {
        status: 200,
        message: '成功'
    }
})

使用mock接口

methods:{
// 不传参
    async getList(){
        const data = await axios.get('/api/getList')
        console.log(data)
    },
    
// body 传参
   async add(){
        const data = await axios.post('/api/add', {name:'李四', age:'20', gender: '男'})
        console.log(data)
    }
}

进阶使用

数据写死,而且只有一条,如果需要多条数据,就很不方便。

这里使用mock内置的方法 Mock.Random

// 导入 mock
import Mock from 'mockjs'

// 模拟接口 Mock.mock('url地址','请求方式get/post等',{要返回的数据})
Mock.mock('/api/getList', 'get', {
    status: 200,
    message: '成功',
    
    // 生成多个数据 data后面接|加数字, 其中数字表示你要生成多少条数据 例如:'data|5' 生成5条 也可以使用区间,例如 'data|5-10' 生成5-10条随机数据
    'data|10':[{
        // 各种方法见文档, 使用 @符号,后面接方法
        id: '@increment(1)', // 自增1
        'number|+2':10, // 每循环一次,加2
        name: '@cword(2, 5)', // 随机2-5个中文
        age: '@natural(2,10)', // 随机2-10的整数
    }]
}),

// 模拟post请求, body传参提交数据
Mock.mock('/api/add','post', function(option){
    // option 为传递过来的参数
    console.log(option)
    
    // 请求成功返回值
    // 注意: 此处应该添加 Mock.mock 才能使用mock的方法
    return  Mock.mock({
        status: 200,
        message: '@cword(2,5)' // 随机的2-5个中文
    })
})