# 知识点 * 使用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 }; ~~~ # 技能提升