对于前后端分离的项目，前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟，这是比较浪费时间的，也是十分无聊的。引入mock.js，这样就可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据。

1.安装mockjs和axios相关依赖

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev

测试实例 项目结构图如下：

2.自定义axios工具类

util/request.js

//自定义axios的工具类，对axios进行简单的封装。
import axios from 'axios'

//创建axios 实例
const request = axios.create({
    timeout: 60000, // 请求超时时间
})
export default request

3.自定义mock工具类

mock/index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

4.创建mock测试接口数据 mock/topCourseList.js

let topCourseList = {
    code: 200,
    message: '查询最新课程列表成功',
    data: [
        {
            "version": 1,
            "createTime": "2022-06-04 19:02:02",
            "modifyTime": "2022-06-04 19:06:42",
            "flag": true,
            "cid": 43,
            "cname": "Spark基础教程",
            "catalogId": "bigdata",
            "introduce": "Spark基础教程 2022版",
            "logo": "https://img.simoniu.com/spark基础教程_logo.jpg",
            "aid": 855,
            "type": "免费",
            "browseNum": 0,
            "publishDate": "2022-06-04",
            "top": false
        },
        {
            "version": 1,
            "createTime": "2022-05-29 20:03:25",
            "modifyTime": "2022-05-29 20:22:20",
            "flag": true,
            "cid": 42,
            "cname": "Hadoop基础教程",
            "catalogId": "bigdata",
            "introduce": "Hadoop基础教程 2022版",
            "logo": "https://img.simoniu.com/hadoop基础教程_logo.png",
            "aid": 844,
            "type": "免费",
            "browseNum": 0,
            "publishDate": "2022-05-29",
            "top": false
        },
        {
            "version": 1,
            "createTime": "2022-05-21 09:29:58",
            "modifyTime": "2022-05-21 10:47:03",
            "flag": true,
            "cid": 41,
            "cname": "React基础教程",
            "catalogId": "h5",
            "introduce": "React基础教程 2022版",
            "logo": "https://img.simoniu.com/react基础教程_logo.jpg",
            "aid": 831,
            "type": "免费",
            "browseNum": 0,
            "publishDate": "2022-05-21",
            "top": false
        },
        {
            "version": 2,
            "createTime": "2022-03-22 23:39:46",
            "modifyTime": "2022-04-27 18:07:20",
            "flag": true,
            "cid": 40,
            "cname": "Python3基础教程",
            "catalogId": "python",
            "introduce": "Python3基础教程",
            "logo": "https://img.simoniu.com/python3基础教程_logo.png",
            "aid": 741,
            "type": "免费",
            "browseNum": 0,
            "publishDate": "2022-03-22",
            "top": false
        }
    ]
};
export default {
    'get|/getTopCourseList': topCourseList
}

5.在main.js中引用mockjs

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入全局样式表
import '@/assets/css/global.css'

//引用mock.js
import '@/mock'

Vue.config.productionTip = false


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

6.在vue组件中测试

<template>
  <div>
    <!--文章模块-头部-->
    <el-row>
      <el-col :span="2">
        <span style="font-weight: bolder;color:#666"><i class="el-icon-edit-outline"></i>最新教程</span>
      </el-col>
      <el-col :span="1" :offset="20">
        <span class="text-right"><a href="#">更多</a></span>
      </el-col>
    </el-row>
    <!--文章模块-内容-->
    <el-row>
      <el-col class="top-course-container" v-for="(c,index) in topCourseList" :span="6">
        <div class="top-course">
          <dl class="item">
            <dt><a href="#"><img :src="c.logo"></a></dt>
            <dd>
              {{c.cname }}<br>
              <p class="item-footer"><span style="color:#0bbe0b">免费</span><span style="color:orangered">[置顶]</span>
                <span class="pull-right">关注度<span class="num">100</span></span></p>
            </dd>
          </dl>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import request from "@/util/request";

export default {
  name: "MyTopicCourse",
  data() {
    return {
      topCourseList: []
    }
  },
  mounted() {
     this.initTopCourseList();
  },
  methods: {
    initTopCourseList() {
      ///发送一个axios请求，get请求。
      //调用mock测试接口，返回最新的课程列表的集合，json对象。
      //this.topCourseList = response.data.data;

      request.get('/getTopCourseList').then(resp => {
        //发送请求成功
        //console.log(resp);
        this.topCourseList = resp.data.data;
      }).catch(err => {
        console.log(err);
      })
    }
  }

}
</script>

<style scoped>

.text-right a {
  color: #666;
  text-decoration: none;
  font-size: small;
}

.top-course {
  margin: 10px;
  padding: 0px;
  border: 1px solid #DDDDDD;
}

.item img {
  width: 100%;
}

.item {
  background: #fff;
  margin: 0px;
}

.item dd {
  position: relative;
  left: -20px;
  height: 50px;
  background: #FFF;
  color: #336699;
  font-size: small;
  font-weight: bolder;
}

.item:hover {
  transform: scale(1.00, 1.00);
  box-shadow: 0 5px 12px #DDDDDD;
  cursor: pointer;
}

.item dt {
  overflow: hidden;
}

.item img {
  transition: all 1.1s;
}

.item img:hover {
  transform: scale(1.05);
}

.item-footer {
  font-size: x-small;
  font-weight: normal;
  text-align: end;
  color: #999;
}
</style>