使用json-server来模拟REST API

在前端开发中，如果后端接口还没有提供，前端拿不到数据，可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合，基于vue-webpack-boilerplate。

json-server官方地址

使用

1.可全局安装json-server，也可针对项目安装。这里是全局安装json-server。
npm install json-server -g

2.安装完成后，可以在任一目录下建立一个 xxx.json 文件。这里是在src的同级目录新建文件夹mock，在该文件夹内新增文件db.json，文件内容格式如下：

{
activitys: [
  {
    'id': 1,
    'url': '/static/actimg1.jpg',
    'desc': '让读书点燃梦想',
    'place': '地点：滨江星耀城',
    'time': '2017-5-10'
  },
  {
    'id': 2,
    'url': '/static/actimg1.jpg',
    'desc': '让读书点燃梦想',
    'place': '地点：滨江星耀城',
    'time': '2017-5-10'
  }
],
blogs: [
  {
    'id': 1,
    'avatarUrl': '/static/bloglistimg1.jpg',
    'name': '张三',
    'grade': '资深前端工程师',
    'slogan': '学习、分享，共同进步，只有坚持才能获得最后的成功'
  },
  {
    'id': 2,
    'avatarUrl': '/static/bloglistimg1.jpg',
    'name': '张三',
    'grade': '资深前端工程师',
    'slogan': '学习、分享，共同进步，只有坚持才能获得最后的成功'
  }
]
}

3.为了便于之后接入后台 API，所以需要进行代理。在config/index.js文件内增加proxyTable（即图中红线框出来的部分）。图中将所有以/api开头的请求委托给http://localhost:3000 ，即请求/api/activitys/1相当于是请求http://localhost:3000/activitys/1。该参数配置详解见这里

4.在package.json的scripts内新增两行命令。

"mock": "json-server mock/db.json "
"mockdev": "npm run mock | npm run dev"

可用npm run mock开启json-server服务。成功开启见下图：

也可使用npm run mockdev直接运行mock和dev命令。

5.在其他页面可通过/api/XXX/获取数据。

存在的问题

若是要模拟的接口非常多，都往db.json里面添加的话，会导致这个文件变得非常庞大，难以维护。而且其他前端人员也会修改到这个文件，每次合并代码都要考虑冲突问题。

解决方案

每个人各自建立自己模块的数据文件，最终通过代码将多个数据文件合并为一个文件。

1.在mock/下新建server.js，该文件用于将各数据文件内的数据合并后统一输出。内容如下：

const fs = require('fs')
const path = require('path')
const MOCK_DIR = path.resolve(__dirname, 'test')

const walk = dir => {
  let results = []
  let list = fs.readdirSync(dir)
  list.forEach(function (file) {
    file = dir + '/' + file
    let stat = fs.statSync(file)
    if (stat && stat.isDirectory()) {
      results = results.concat(walk(file))//若file是文件夹，则遍历获取该文件夹下文件内数据。
    } else if (path.extname(file) === '.js') {
      results.push(file)
    }
  })
  return results
}
const files = walk(MOCK_DIR)
let db = {}
files.forEach(function (file) {
  Object.assign(db, require(file))
})
module.exports = function () {
  return db
}

2.在mock/下新增test文件夹，各前端人员可自行在test/下新增数据文件(xx.js)和文件夹。数据文件格式如下:

module.exports = {
  activitys: [
    {
      'id': 1,
      'url': '/static/actimg1.jpg',
      'desc': '让读书点燃梦想',
      'place': '地点：滨江星耀城',
      'time': '2017-5-10'
    },
    {
      'id': 2,
      'url': '/static/actimg1.jpg',
      'desc': '让读书点燃梦想',
      'place': '地点：滨江星耀城',
      'time': '2017-5-10'
    }
  ],
  works: [
    {
      'id': 1,
      'imgUrl': '/static/workslistimg1.jpg',
      'iconUrl': '/static/workslisticon1.jpg',
      'desc': '仿京东购物车Vue.js'
    },
    {
      'id': 2,
      'imgUrl': '/static/workslistimg1.jpg',
      'iconUrl': '/static/workslisticon1.jpg',
      'desc': '仿京东购物车Vue.js'
    }
  ] 
}

3.修改package.json里面的mock命令。--m mock/post-to-get.js表示添加运行中间件。

"mock": "json-server mock/server.js --m mock/post-to-get.js",

---

上面代码中的post-to-get.js文件用于将post请求转为get请求。该文件内容如下:

module.exports = (req, res, next) => {
  req.method = 'GET'
  next()
}

---

修改完成后，最终的文件结构如下：