[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 進行數據渲染