vue通过mock（json-server）实现前端数据模拟

当前开发模式基本都是前后端分离，那么在写vue或者react（数据驱动）时前端页面的展现，以及一些交互逻辑往往是需要数据驱动的，但是后端要建表，写逻辑接口没有那么快交给前端。这时就需要mock一些假数据，好让前端可以无障碍的做下去。
json-server就是一种前端mock工具

在node环境下通过npm安装

npm install json-server -g

然后在跟目录下创建db.json的目录,然后写入信息

{
  "api": [
    {
      "text": "数据统计",
      "link": "#",
      "hot": true
    },
    {
      "text": "数据检测",
      "link": "#",
      "hot": true
    },
    {
      "text": "流量分析",
      "link": "#",
      "hot": true
    },
    {
      "text": "广告发布",
      "link": "#",
      "hot": false
    }
  ]
}

接下来在package.json里面的scripts里面加一行命令
3003是端口号

"json": "json-server db.json --port 3003",

然后执行

npm run json

访问

 http://localhost:3003/api

调用的时候 get请求，就可以拿到数据

 axios.http.get('http://localhost:3003/api')
      .then((data) => {
        console.log(data.body)
      }, () => {
        console.log('这里是用了vue-source,后端没有接口')
      })