前端研究 订阅所有【前端研究】的日志

json-server+mock.js构建vue/小程序均可用的mock体系

作者:admin 日期:2022-03-03
字体大小: 小 中 大

前端开发经常在vue-cli、小程序中切换，所以要搭建一个独立的mock环境，json-server就很符合我的需要。它就是独立的node程序，使用时用单独的命令行启动。常见使用场景就是， json-server全局安装，每个项目需要的mock配置放在mock目录下，要使用时，只要用单独的命令行启动即可。
 
 
常用的启动命令如下：
json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js
 
在vue中使用时，可以在package.json中做如下关联：
Javascript代码
  1. "scripts": {  
  2.   "mock": "json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js"...  
  3. },  
这样就可以使用npm run mock来启动了。生成的接口类似这样：
mock.js是项目配置文件，我加了一段函数walkSync，用于遍历mock/api目录，这样复杂点的接口，直接在api目录下写个js文件就可以模拟了(支持mock.js语法)。
 
还是以项目中的login.js为例：
Javascript代码
  1. //login.js  
  2. module.exports = {  
  3.     "token": "@guid()",  
  4.     "user_info": {  
  5.         'uid|3333-9999': 100,  
  6.         'organ': '@ctitle(2, 3)研究所',  
  7.         'name': '@cname',  
  8.         'level|1': [0]  
  9.     }  
  10. }  
简单点的接口，比如那种只要返回个成功信息的接口，我就在mock.js中直接生成了，比如：
Javascript代码
  1. {  
  2.     "code": 200,  
  3.     "data": {flag:true},  
  4.     "msg": ''  
  5. }  
 json-server及mock.js的常规用法，网上文档很多，不赘述。

 



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2561
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭