本地mock.js在vue2中使用

1.安装axios

2.全局配置axios参数

 

 如果说项目里已经封装了，请求方法比如说request那就用就可以不需要安装axios了

3.安装mock.js

Mock.mock('url',get/post,'函数/模拟代码‘）前两个可以省略

有两种引用

第一种，常见重要

先建目录

index的作用是写连接url和mocklist里函数的作用

注意左侧的可以是字符串但是需要传入动态值所以用的是正则（这个用字符串也可以）

import Mock from 'mockjs'

import setApi from './mocklist/set'

Mock.mock(/dev-api\/set\/getsetlist/, 'get', setApi.getsetList)
Mock.mock(/dev-api\/set\/searchsetlist/, 'post', setApi.insertsetList)
Mock.mock(/dev-api\/set\/deletesetlist/, 'post', setApi.deletesetList)
Mock.mock(/dev-api\/set\/detailbyid/, 'post', setApi.deletesetList)

 需要引入setApi

extend,js是用来写自定义mock的数据的

import { random } from 'mockjs'
// 创建自定义 Mock 函数
random.extend({
    // 自定义函数名: function 函数
    fruit: function () {
        const arr = ['榴', "波罗蜜", "椰子", "苹果", "波萝", "释迦"]
        return this.pick(arr)
    }
})

mocklist里面一个js文件代表一个模块的模拟数据，里面写的是mock那块（只有模拟的数据并没有url和get/post，这部分在index里面写了），还有export 暴露出的函数，这个函数放到index里面的第三位

具体这个先将模拟数据放到了数组里这样可以模拟增删改查，之前使用apifox可以模拟查询，但是其他接口我没写明白，所以改用mockjs

parseobj是处理传入的请求url

然后请求体获取数据是用json.parse()转换成对象的

import Mock from 'mockjs'
let List = [];

const count = 10;

for (let i = 0; i < count; i++) {
    List.push(
        Mock.mock({
            "tetherName": "@cword(2,8)",
            "createBy": "string",
            "createTime": "string",
            "updateBy": null,
            "updateTime": '@datetime',
            "remark": null,
            "tetherId": '@integer(1,3)',
            "sellStatus": 0,
            "exchange": 0,
            "image": null,
            "showTimeStart": '@datetime',
            "showTimeEnd": '@datetime',
            "total": '@integer(60, 100)',
            "status": 0,
            "grounding": 0,
            "cochain": 0,
            "delFlag": "string"
        })
    )
}
console.log(List)
function paramObj(url) {
    const search = url.split('?')[1];
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
    )
}
export default {
    // getsetList: config => {
    //     const { name, page = 1, limit = 10 } = paramObj(config.url);
    //     const mockList = List.filter(user => {
    //         if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false;
    //         return true;
    //     })
    //     const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1));
    //     return {
    //         code: 200,
    //         count: mockList.length,
    //         list: pageList
    //     }
    // },
    // searchsetList: config => {
    //     const { name } = paramObj(config.url);
    //     const searchList = List.filter(user => {
    //         return user.title === name;
    //     })
    //     return {
    //         code: 200,
    //         count: searchList.length,
    //         list: searchList
    //     }
    // },
    // detailsetNotic: config => {
    //     const { id } = paramObj(config.url);
    //     const detail = List.filter(user => {
    //         return user.id === id;
    //     })
    //     return {
    //         code: 200,
    //         data: detail
    //     }
    // }
    // deleteMessage: config => {
    //     const { id } = JSON.parse(config.body);
    //     if (!id) {
    //         return {
    //             code: -999,
    //             message: '参数不正确'
    //         }
    //     } else {
    //         List = List.filter(u => u.id !== id)
    //         return {
    //             code: 200,
    //             message: '删除成功'
    //         }
    //     }
    // },
    //自己写的非分页获取
    getsetList() {
        const mockList = List
        return {
            code: 200,
            count: mockList.length,
            list: mockList
        }
    },
    insertsetList: config => {
        const obj = JSON.parse(config.body);
        List.push(obj)
        return {
            insertMsg: obj,
            code: 200,
            list: List
        }
    },
    deletesetList: config => {
        const { id } = JSON.parse(config.body);
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            List = List.filter(u => u.tetherId !== id)
            return {
                delid: id,
                code: 200,
                message: '删除成功',
                list: List
            }
        }
    },
    deletesetList: config => {
        const { id } = JSON.parse(config.body);
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            const findvalue = List.find((value, index) => {
                return value.tetherId == id
            })
            return {
                detailid: id,
                code: 200,
                message: '删除成功',
                list: findvalue
            }
        }
    },
}

main里面引入index

 

 

 这种是模块化最好的一种办法

第二种

这种就是index里面只引用list里面的js文件

 然后还是把index引入到mock.js因为这样写只需要引入一个js文件到main里面

然后set.js里面就要写入完整的Mock.mock('url',get/post,'函数/模拟代码‘）

注意：第三位传入函数的话可以传入参数就是请求的参数body体