[{"data":1,"prerenderedAt":218},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fmock-data":3,"surround:\u002Fposts\u002F2022\u002Fmock-data":206},{"id":4,"title":5,"body":6,"canonical":179,"categories":180,"date":182,"description":183,"draft":184,"extension":185,"image":179,"meta":186,"navigation":187,"path":188,"permalink":179,"readingTime":189,"recommend":179,"references":194,"seo":201,"sitemap":202,"stem":203,"tags":204,"type":179,"updated":182,"__hash__":205},"content\u002Fposts\u002F2022\u002Fmock-data.md","mock数据",{"type":7,"value":8,"toc":167},"minimark",[9,13,17,28,31,39,47,50,56,62,68,71,79,82,85,94,100,103,106,109,115,118,124,127,133,135,141,148,154],[10,11,12],"h2",{"id":12},"json-server",[14,15,16],"h3",{"id":16},"安装",[18,19,25],"pre",{"className":20,"code":22,"language":23,"meta":24},[21],"language-shell","npm i -g json-server\n","shell","",[26,27,22],"code",{"__ignoreMap":24},[14,29,30],{"id":30},"使用",[32,33,34,35,38],"p",{},"在本地创建一个",[26,36,37],{"code":37},"db.json","文件，填写需要模拟的数据",[18,40,45],{"className":41,"code":43,"language":44,"meta":24},[42],"language-json","{\n  \"post\": [\n    { \"id\": 1, \"title\": \"三体\", },\n    { \"id\": 2, \"title\": \"流浪地球\", },\n  ],\n}\n","json",[26,46,43],{"__ignoreMap":24},[14,48,49],{"id":49},"启动",[18,51,54],{"className":52,"code":53,"language":23,"meta":24},[21],"json-server --watch db.json --port 3004\n",[26,55,53],{"__ignoreMap":24},[32,57,58,61],{},[26,59,60],{"code":60},"--watch"," 表示监听 db.json 数据的变化",[32,63,64,67],{},[26,65,66],{"code":66},"--port"," 后可以根据实际情况来指定服务启动的端口",[32,69,70],{},"启动成功后，我们就可以使用 restful 风格的接口来进行增删改查的操作了",[18,72,77],{"className":73,"code":75,"language":76},[74],"language-text","GET http:\u002F\u002Flocalhost:3004\u002Fpost\nGET http:\u002F\u002Flocalhost:3004\u002Fpost\u002F1\nPUT http:\u002F\u002Flocalhost:3004\u002Fpost\u002F1\nPOST http:\u002F\u002Flocalhost:3004\u002Fpost\nDELETE http:\u002F\u002Flocalhost:3004\u002Fpost\u002F1\n","text",[26,78,75],{"__ignoreMap":24},[14,80,81],{"id":81},"使用编程模式创建模拟数据",[32,83,84],{},"除了我们手动填写数据，还可以使用编程的方式来批量生成 mock 数据来进行测试",[18,86,92],{"className":87,"code":89,"language":90,"meta":91},[88],"language-js","module.exports = () => {\n    const data = { post: [] }\n    for (let i = 0; i \u003C 20; i++) {\n        data.post.push({\n            id: i,\n            content: `post content ${i}`,\n        })\n    }\n\n    return data\n}\n","js","mock.js",[26,93,89],{"__ignoreMap":24},[18,95,98],{"className":96,"code":97,"language":23,"meta":24},[21],"json-server mock.js\n",[26,99,97],{"__ignoreMap":24},[32,101,102],{},"上面的方法虽然可以模拟数据，但是少一些数据的随机性。我们可以使用 mockjs 来模拟生成其他类型的 mock 数据",[10,104,105],{"id":105},"mockjs",[32,107,108],{},"初始化 node 项目",[18,110,113],{"className":111,"code":112,"language":23,"meta":24},[21],"npm init -y\n",[26,114,112],{"__ignoreMap":24},[32,116,117],{},"安装依赖",[18,119,122],{"className":120,"code":121,"language":23,"meta":24},[21],"npm i -D mockjs\n",[26,123,121],{"__ignoreMap":24},[32,125,126],{},"编写 mock.js 文件用于 json-server 模拟数据",[18,128,131],{"className":129,"code":130,"language":90,"meta":91},[88],"const mockjs = require(\"mockjs\")\n\nconst Random = mockjs.Random\nmodule.exports = () => {\n    const data = { post: [] }\n    for (let i = 0; i \u003C 5; i++) {\n        data.post.push({\n            id: i,\n            content: Random.cword(3),\n        })\n    }\n    return data\n}\n",[26,132,130],{"__ignoreMap":24},[32,134,49],{},[18,136,139],{"className":137,"code":138,"language":76},[74],"json-server --watch --port 9999 mock.js\n",[26,140,138],{"__ignoreMap":24},[32,142,143,144,147],{},"我们在浏览器使用",[26,145,146],{"code":146},"http:\u002F\u002Flocalhost:9999\u002Fpost","就可以获取到刚才创建好的 mock 数据了",[18,149,152],{"className":150,"code":151,"language":44,"meta":24},[42],"[\n  {\n    \"id\": 0,\n    \"content\": \"问形院\",\n  },\n  {\n    \"id\": 1,\n    \"content\": \"同离去\",\n  },\n  {\n    \"id\": 2,\n    \"content\": \"队农而\",\n  },\n  {\n    \"id\": 3,\n    \"content\": \"分列流\",\n  },\n  {\n    \"id\": 4,\n    \"content\": \"即飞月\",\n  },\n]\n",[26,153,151],{"__ignoreMap":24},[32,155,156,157,159,160],{},"具体 ",[26,158,105],{"code":105}," 的使用方式，可以查看文章下方的 ",[161,162,166],"a",{"href":163,"rel":164},"http:\u002F\u002Fmockjs.com\u002Fexamples.html",[165],"nofollow","mockjs 示例",{"title":24,"searchDepth":168,"depth":168,"links":169},4,[170,178],{"id":12,"depth":171,"text":12,"children":172},2,[173,175,176,177],{"id":16,"depth":174,"text":16},3,{"id":30,"depth":174,"text":30},{"id":49,"depth":174,"text":49},{"id":81,"depth":174,"text":81},{"id":105,"depth":171,"text":105},null,[181],"代码","2022-12-31 13:59:25","在开发中我们常会用到一些模拟数据来确定程序是否有问题，这次我们一起来看一下怎么使用模拟数据来进行测试",false,"md",{},true,"\u002Fposts\u002F2022\u002Fmock-data",{"text":190,"minutes":191,"time":192,"words":193},"2 min read",1.99,119400,398,[195,197,200],{"title":12,"link":196},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fjson-server",{"title":198,"link":199},"mockjs GitHub地址","https:\u002F\u002Fgithub.com\u002Fnuysoft\u002FMock",{"title":166,"link":163},{"title":5,"description":183},{"loc":188},"posts\u002F2022\u002Fmock-data",[],"ipnlZxKxyzJBXzCeVTzM1Ro-7TOOiJ-KLOULRT9hZ8g",[207,212],{"title":208,"path":209,"stem":210,"date":211,"type":179,"children":-1},"log4js node日志管理","\u002Fposts\u002F2022\u002Fnode-log4js","posts\u002F2022\u002Fnode-log4js","2022-12-19 14:45:33",{"title":213,"path":214,"stem":215,"date":216,"type":217,"children":-1},"vscode 基础使用指南","\u002Fposts\u002F2022\u002Fvscode-use","posts\u002F2022\u002Fvscode-use","2023-02-11 12:31:14","story",1789642595548]