1.mockjs是什么？

mockjs是一个方便前端工程师独立于后端开发的插件，能够在不修改既有代码的情况下，拦截ajax/axios请求，返回模拟的响应数据，支持生成多种类型的随机数据。也就是说它能够在后端接口开发落后于前端页面开发时提供假数据供我们测试页面的效果。 官网地址：http://mockjs.com/

2.安装mockjs

# 安装
npm install mockjs --save-dev

–save是指本地安装，-dev指该依赖为开发依赖，项目完成时打包一定用的是真实的接口数据，mockjs只在本地测试使用。

3.使用mockjs

(1)src下新建文件夹mock,在该文件夹下新建mockServe.js和json文件

(2)mockServe.js的内容为：

import Mock from "mockjs";
import videos from './videos.json';
Mock.mock('/mock/getVideo','get',{code:200,data:videos})

（3）json文件存放mockjs返回的假的json数据,例如：

{
    "list": [
        {
            "src": "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
            "vid":"vs001",
            "coverUrl":"https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
        },
        {
            "src": "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
            "vid":"vs002",
            "coverUrl":"https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
        }
]

(4)在vue项目中的main.js文件中导入上一步的mockServe.js文件

import '@/mock/mockServe'

（5）在api文件夹下新建index.js文件，用于新建axios实例，当然在此之前需要用npm安装axios

import axios from "axios";
let instance = axios.create({
    baseURL:'/mock',
    timeout:5000
})
export const getVideoDetail = (vid)=>instance({url:`/getVideo`,method:'get',data:{vid}})