json-server和Mock搭建自己的临时API

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

1. 全局安装json-server

• 全局安装

cnpm install -g json-server

2. 创建自己的mockdb文件夹

• 创建项目文件夹mockdb
• 初始化npm，一路回车即可，顺带本地安装mockjs

npm init
cnpm install --save mockjs

• 新建db文件夹，用来存放自己的json数据或者生成json的js文件
• 在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/menus和219.567.12.34:3000/users可以看到我们数据

4. 前端项目中调用

现在你可以假装后端已经写好接口，然后使用axios访问api了

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