【json-server+Mock】搭建自己的临时API

json-serverMock搭建自己的临时API

当可爱的后端同学需要打游戏,没时间给我们写接口时,可爱的前端需要自力更生了。

1. 全局安装json-server

  • 全局安装
cnpm install -g json-server

2. 创建自己的mockdb文件夹

  • 创建项目文件夹mockdb
  • 初始化npm,一路回车即可,顺带本地安装mockjs
npm init
cnpm install --save mockjs
  • 新建db文件夹,用来存放自己的json数据或者生成jsonjs文件
  • db文件夹下写一个menu.js
// menu.js
const menuTreeData = [{
    "menuId": 1,
    "menuName": "系统管理",
    "route": null,
    "icon": "el-icon-setting",
    "children": [{
            "menuId": 2,
            "menuName": "用户管理",
            "route": "/miniUser",
            "icon": "el-icon-service",
            "children": []
        },
        {
            "menuId": 3,
            "menuName": "菜单管理",
            "route": "/menu",
            "icon": "el-icon-news",
            "children": []
        }
    ]
}]

// 导出
module.exports = menuTreeData
  • 新建main.js作入口文件
// main.js
const Mock =  require('mockjs');
const menus =  require('./db/menu.js');

module.exports=()=>{
    return Mock.mock({
        'menus': menus,
        'users|2-5': [{
            'id|+1': 1,
            'name': '@name'
        }]
    })
}
  • 编辑package.js文件,在script里面新添加serve命令
{  "name": "取个牛逼的名字",
  "version": "1.0.0",
  "description": "这是一牛逼的项目",
  "main": "main.js",
  "scripts": {
    "serve": "json-server main.js --host '219.567.12.34'", // 新加这句话,配置上你的ip地址
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mockjs": "^1.0.1-beta3"
  }
}

此时目录机构大致如下:

3. 是时候一脚踢开后端了~

cnpm run serve

访问219.567.12.34:3000/menus219.567.12.34:3000/users可以看到我们数据

4. 如果你使用vue写前端

现在你可以假装后端已经写好接口,然后在你的vue文件中使用axios访问api

axios.get('http://219.567.12.34:3000/menus').then(response => {
    console.log(response.data);
})
全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务