# 知識點 * 使用mockjs生成模擬數據 * API接口數據模擬 * API接口規范的實現 > 為方便后續的服務端接口實現，前端模擬的數據保持與服務端實現的真實接口一致，具體遵循接口規范一節定義的規范。 # 安裝依賴包 安裝mockjs依賴包， ~~~ cnpm i mockjs --save ~~~ # 建立幾個目錄 建立以下目錄`/src/common/api/portal/mock`，用于存放接口文件。 > 在項目根目錄下執行以下命令一次性建立多級目錄 ~~~ mkdir -p ./src/common/api/portal/mock ~~~ > vscode工具右鍵彈出新建目錄，允許一次輸入多級目錄，工具會幫我們創建多級目錄 # 編寫新聞模塊接口文件 * 獲取新聞列表getList * 獲取新聞詳情getDetail 建立/common/api/portal/mock/news.js文件，輸入以下內容 ~~~ ///src/common/api/portal/mock/news.js import Mock from "mockjs"; //http://mockjs.com/ export default { /** * 獲取新聞動態的分頁數據 * @param {Object} map 查詢條件對象 * @return {Promise<Object>} 新聞動態的分頁數據 */ async getList(map = {}) { //從map對象中提取page和pageSize兩個屬性并賦值給page和pageSize變量 let { page, pageSize } = map; let mockOptions = { errno: 0, errmsg: "獲取信息成功", data: { count: 200, totalPages: 20, pageSize: pageSize, currentPage: page, "data|3": [ { "id|+1": 1, // 屬性 id 是一個自增數，起始值為 1，每次增 1 title: "@ctitle(10,30)", cover: "@image('300x200', '#50B347')", create_at: "@date()", abstract: "@cparagraph(3,50)", }, ], }, }; let data = await Mock.mock(mockOptions); return new Promise((resolve, reject) => { resolve(data); }); }, async getDetail(id) { let mockOptions = { errno: 0, errmsg: "獲取信息成功", data: { "id|+1": 1, // 屬性 id 是一個自增數，起始值為 1，每次增 1 title: "第7屆全國大學生軟件設計大賽捷報", create_at: "@date()", cover: "@image('1024x200', '#50B347')", abstract: "@cparagraph(100)", description: "@cparagraph(100)", author: "@cname()", "category_label|1": ["團隊動態", "行業報告"], }, }; let data = await Mock.mock(mockOptions); return new Promise((resolve, reject) => { resolve(data); }); }, }; ~~~ 建立/src/common/api/portal/index.js文件， 輸入以下內容 ~~~ import news from "./mock/news.js"; /** * import {news} from "@/common/api/portal" * * @example * * news.getList(this.map).then((res) => { * if (res.errno == 0) { * const tableData = res.data; * // ... * }); * } else { * console.log(res.errmsg) * } * }); */ export { news }; ~~~ # 技能提升