vue-cli項目中使用mock結合axios-mock-adapter生成模擬數據

http://mockjs.com/  mockjs官網

https://www.npmjs.com/package/axios-mock-adapter   axios-mock-adapter官網

1.安裝

  npm i mockjs axios-mock-adapter --save-dev

2.創建數據

創建文件夾

   users.js:

import Mock from "mockjs"

const Users = [];
for (let i=0; i<100; i++){
    Users.push(Mock.mock({
        id: Mock.Random.integer(60, 100),
        time: Mock.Random.datetime(),
        desc: Mock.Random.cparagraph()
    }))
}

export {Users}

   goods.js:

import Mock from "mockjs"

const Goods = []
for (let i=0; i<10; i++){
    Goods.push(Mock.mock({
        id: Mock.Random.integer(60, 100),
        desc: Mock.Random.cparagraph(10,20),
        img: Mock.Random.image('200x100', '#4A7BF7',i)
    }))
}

export {Goods}

  index.js-通過axios-mock-adapter生成代理api地址

var axios = require('axios')
var MockAdapter = require('axios-mock-adapter')

import {Goods} from "./data/goods"
import {Users} from "./data/users"

export default {
    init() {
        var mock = new MockAdapter(axios)
        mock.onGet('/users').reply(200, {
            code: 1001, msg: '請求成功', Users
        })
        // mock.onGet('/goods').reply(200, {
        //     code: 1001, msg: '請求成功', Goods
        // })
        mock.onGet('/goods').reply(config => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve([200, {
                        goods: Goods,
                        config: config.params
                    }])
                }, 500)
            })
        })
    }
}

　　通過api.js對api請求統一的管理

import axios from 'axios'

let base = ''

export const requestUsers = params => axios.get(`${base}/users`).then(res => res.data)

export const requestGoods = params => { return axios.get(`${base}/goods`, { params: params }).then(res => res.data) }

　　最后在main.js里面進行初始化

import Mock from './mock'
Mock.init()

頁面調用：

requestUsers().then((res) => {
    console.log(res)
})
requestGoods({id:1}).then((res) => {
    console.log(res)
})

　　

效果：