vue中使用mock

本是古典何须时尚 2023-02-14 15:59 207阅读 0赞

1.安装axios

npm install axios

2.安装mock

npm install mockjs

3.新建config.js

![20200603230121522.png][]

import axios from 'axios'
    
    //创建一个axios实例
    const service = axios.create({
      //请求超时
      timeout:60000
    })
    
    // 请求拦截器
    service.interceptors.request.use(
      config => {
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    // 响应拦截器
    service.interceptors.response.use(
      response => {
        return response
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    export default service

4.新建index.js , home.js

![20200603231241166.png][]

5.index.js

import Mock from 'mockjs'
    import homeApi from './home'
    
    //设置200-2000毫秒延时请求数据
    Mock.setup({
      timeout:'200-2000'
    })
    
    //拦截的是 /home/getData
    Mock.mock(/\/home\/getData/,'get',homeApi.getData)

6.home.js

import Mock from 'mockjs'
    
    let List = []
    export default {
      getData: () =>{
        for (let i = 0; i < 7; i++) {
          List.push(
            Mock.mock({
              vue: Mock.Random.float(100, 8000, 0, 2),
              wechat: Mock.Random.float(100, 8000, 0, 2),
              ES6: Mock.Random.float(100, 8000, 0, 2),
              Redis: Mock.Random.float(100, 8000, 0, 2),
              React: Mock.Random.float(100, 8000, 0, 2),
              springboot: Mock.Random.float(100, 8000, 0, 2)
            })
          )
        }
        return {
          code:2000,
          data:{
            List
          }
        }
      }
    }

7.在main.js中引入

import http from '@/api/config'
    import './mock'
    Vue.prototype.$http = http

8.在页面中使用

getData(){
       this.$http.get('/home/getData').then(res => {
          console.log(res.data)
        })
     }

10.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

[20200603230121522.png]: https://img-blog.csdnimg.cn/20200603230121522.png
[20200603231241166.png]: https://img-blog.csdnimg.cn/20200603231241166.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060323224353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE=,size_16,color_FFFFFF,t_70