在真实的工作场景中,前后端的工作基本都是并行开发的,一般都是相互约定好接口 API 后,分别进入开发。所以,根据接口 API mock 数据,方便我们开发
1、根据提供的 json 结构,随机生成返回数据
2、按目录结构存放 json,src/mock/a-project/login/index.json
3、根据目录决定接口请求路径
采用方案二实现,需要学习 mockjs 规则
├── .vscode # 该项目 vscode 配置
├── src # 源码目录
│ ├── mock # mock json 文件, 子目录按项目分类
│ │ ├── demo项目
│ │ ├── a项目
│ │ ├── b项目
│ │ └── 零散json
│ └── main.js # 主入口
├── .commitlintrc.js # git commit 规范配置
├── .eslintrc.js # eslint 配置
├── .gitignore # git忽略文件
├── .prettierrc.js # prettier 配置
├── package.json
└── README.md # 文档说明
# 参考src/demo
# 新建 test.json
{
"data|1-3": [
{
"id|+1": 1
}
]
}
# 启动项目
npm run start
# 访问接口
http://127.0.0.1:3000/mock/demo/test
# 响应
{
"code": 200,
"msg": "请求成功",
"data": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
常用 mock 规则,详细参考 mockjs 文档
{
"data|1-3": [
{
"id|+1": 1
}
]
}
{
"boolean": "@boolean",
}
{
"name": "@cname",
"title": "@ctitle(6,10)",
"cparagraph": "@cparagraph(2,3)"
}
{
"time": "@time",
"date": "@date",
"datetime": "@datetime",
"now": "@now"
}
{
"address": "@county(true)",
"ip": "@ip",
"url": "@url",
"email": "@email"
}
{
"img": "@img",
"color": "@color"
}