前言有兴趣的可以star关注支持项目地址。在日常开发中，前端mock后端API数据是实现前后端并行开发的一个非常重要的步骤。有了数据，可以更真实的反馈实际的操作过程，更好的编码交互效果，也可以很好的避免后期联调中出现的各种问题。前端模拟API数据的方式有很多种。1手动在js中模拟硬编码数据，发布联调时删除模拟数据。或者你可以封装一个开关。letgetData=(cb)=>{//模拟时，直接返回数据，不经过接口请求returncb&&cb({a:1})//真实请求http.get('/api/test',(res)=>{cb&&cb(res)})}2localjsonfile这比之前的方法模块化的多。根据后台接口路径在开发目录下生成相应的目录和文件。并通过特定的url和开发环境将请求分配到对应的本地文件。在联调或生产环境发布之前，修改具体的url。constconfig={baseUrl:'/quxue',initialUrl:'../'};//两种请求路径，一种请求到项目真实后台，一种请求本地json文件3mockjs这个好像做一个更高级的手动模拟的实现。配合mockjs，可以生成更多样化的返回数据。联调发布前，关键代码也需要处理，真正将请求发送到后端服务器，而不是被mockjs拦截。比如在RequireJs中加载mockjs//配置Mock路径require.config({paths:{mock:'http://mockjs.com/dist/mock'}})//加载Mockrequire(['mock'],function(Mock){//使用Mockvardata=Mock.mock({'list|1-10':[{'id|+1':1}]})//输出document.body.innerHTML+='
'+JSON.stringify(data,null,4)+''})4MockServerMockServer应该具备以下功能：友好的交互界面输入/保存界面数据和按项目存储界面数据，适用于不同的团队通过响应请求返回相应数据生成接口文档，方便前后端参考，支持接口自动化测试。QuickMock基于Express的快速mock平台，无需配置数据库，启动后即可实现本地mock接口数据。通过接口url，返回对应的接口json数据。start#installdependenciesnpminstall#访问localhost:3000/listnpmstart功能支持保存多个项目的接口数据根据接口名称或url模糊查询接口支持重新编辑保存接口创建接口后保存本地作为一个json文件，和不同项目的接口数据，放在不同的目录编辑接口数据实时预览和错误提示预览新建item输入item名称，itemurl（可以理解为区分不同item的具体字符串），商品描述。项目列表项目面板，显示所有现有项目。将接口添加到项目选择一个项目后，您可以查看该项目下的接口信息，并将接口添加到该项目。编辑接口，输入接口名称和接口URL，在左侧输入相应的json数据，在右侧预览json数据格式是否合法，在下方填写该接口的备注。接口列表可以查看项目中有哪些接口。如果接口过多，支持接口模糊查询。postman验证接口有效的使用postman来验证MockServer是否能够真实有效的返回数据。最后，生活并不缺少美，缺少的是发现美的眼睛。原文地址：戳我