Vue-cliプロジェクトはaxios-mock-adapterと組み合わせたモックを使用してシミュレーションデータを生成します[転送]

1.インストール

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

2.データを作成する

// 文件夹配置

----mock
--------data
------------good.js
------------user.js
--------index.js

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アドレスを生成する

import axios from 'axios'
import MockAdapter from '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)
})

リクエスト結果：

転送- VUE-CLIモック結合axios-モックアダプタを使用して、プロジェクトは、アナログデータを生成します