Vue项目中使用 Mock 配合 axios 请求数据

安装

//安装mock
npm install mockjs

//安装axios
npm install axios

配置axios

在src下面创建一个api的文件夹 文件夹下面创建一个config.js

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中导入并且挂载到vue原型上

import http from '@/api/config.js';

Vue.prototype.$http=http

配置mock

在src下面创建一个mock文件夹 文件夹下面创建index.js 对接口进行拦截 参考文档

import mock from 'mockjs'
// home页面的接口 home.js
import homeapi from './home'

//设置200-2000毫秒延时
mock.setup({
    timeout: '200-2000'
})

//拦截请求 : 首页相关请求
//拦截的是 /home/getdata 
mock.mock(/\/home\/getdata/,'get',homeapi.gethomedata)

mock文件夹下面创建home.js(这里是一个home页面的接口)

import mock from "mockjs";

export default{
    gethomedata:()=>{
        return{
            code:2000,
            data:{
                videodata:[
                    {
                        name:'springboot',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name:'Java',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name:'springboot',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name:'HTML',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name:'CSS',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                            name:'C#',
                        value: mock.Random.float(1000,10000,0,2)
                    },
                    {
                        name:'python',
                        value: mock.Random.float(1000,10000,0,2)
                    }
                ]
            }
        }
    }
};

main.js中导入mock

import './mock'

image-20220820113730919

测试mock

export default {
  name: "HomeView",
  mounted() {
    this.$http.get('/home/getdata').then((res)=>{
      console.log(res);
    })
  }
}

image-20220820114138918