element七 mock.js axios

• Mock.js
  • 作用：生成随机数据，拦截ajax请求
  • 安装：cnpm install mockjs
  • 核心：
    • Mock.mock()

    // 根据数据模板生成模拟数据
    Mock.mock( rurl, rtype, template)
    /*
    ** rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则
    ** eg. /\/domain\/list\.json/、'/domian/list.json'
    */
    

  • Mock.Random() --生成随机数

一、axios配置

image.png

import axios from 'axios'

//创建一个axios实例
const service = axios.create({
    //请求超时时间
    timeout:3000,
})

//添加请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        console.log(err)
    }
)

//响应拦截器
service.interceptors.response.use(
    response => {
        let res = {}
        res.status = response.status
        res.data = response.data
        return res
    },
    err => console.log(err)
)

export default service

• main.js中

  
  
  image.png

二、Mock.js配置

image.png

1.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.getHomeData)

2.home.js

import Mock from 'mockjs'

export default {
    getHomeData:()=>{
        return{
            code: 20000,
            data: {
                videoData:[
                    {
                        name: 'springBoot',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name: 'vue',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name: '小程序',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name: 'es6',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name: 'java',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name: 'hello',
                        value: Mock.Random.float(1000,10000,0,2)
                    },
                ]
            }
        }
    }
}

3. main.js中添加import './mock'