[toc] ### 一、创建mock模拟的数据 ``` const List = [] const count = 100 for (let i = 0; i < count; i++) { List.push(Mock.mock({ id: '@increment', title: '@csentence(5, 10)', cover: '@image("200x100")', try: '@cparagraph', content: '@cparagraph', 'price|1': [10, 5, 6, 99, 88, 100], 't_price|1': [10, 5, 6, 99, 88, 100], 'status|1': [0, 1], 'sub_count|1': [10, 5, 6, 99, 88, 100], created_time: '@now', updated_time: '@now' })) } ``` ### 二、 定义返回的数据  ### 三、在mock文件夹内的index.js文件内引入course.js,并导出 ``` const course = require("./course") const mocks = [ ...user, ...role, ...article, ...search, ...course ] ``` ### 四、在api文件内创建course.js,封装api接口 ``` import request from '@/utils/request' export function fetchList(query) { return request({ url: '/vue-element-admin/course/list', method: 'get', params: query }) } ``` ### 五、在media.vue组件调用接口,并渲染数据 5.1 导入api文件夹内的course.js文件 ``` import { fetchList } from '@/api/course.js' ``` 5.2 进行数据渲染