使用json-server配置前端mock数据

613 阅读1分钟

为什么是json-server

前端开发过程中常常可能在后端还没有给出接口方案之前已经进入开发。这个时候需要借助mock方案。直接在文件里面写一个静态的mock数据是最次的方案。还可以考虑使用mock.js。但mock.js更多是用来模拟生成数据,想要动态实现数据的增删改查的话,json-server会更合适一些。

如何使用json-server

这里有一个使用json-server文档可以阅读一下。简单来说,要在项目中引入json-server,可以使用

npm install json-server -d

然后在根目录,新建一个__json-server-mock__文件夹(或者叫别的名字也行),在该文件夹里面存放mock.json数据。之后我们在package.json的scripts里添加如下字段:

"json-server": "json-server __json_server_mock__/db.json --watch"

执行:npm run json-server就可以启动json-server了。结合postman来实现本地数据的增删改查可以参考这篇文章

如果不满足Restful形式API该怎么办?

默认情况下,json-server只支持符合restful形式的api,但我们很难控制后端一定能给一个符合该风格的接口。如果不符合时我们可以使用middleware来处理。

__json-server-mock__文件夹里面新建文件middleware.js文件。该文件的作用是对请求做一层拦截处理,比如你想对/login接口做处理,可以写成这样:

module.exports = (req, res, next) => {
  if(req.method === 'POST' && req.path === '/login') {
    if(req.body.username === 'haha' && req.body.password === '123') {
      return res.status(200).json({
        user: {
          token: '123'
        }
      })
    } else {
      return res.status(400).json({message: '用户名或密码不正确'})
    }
  }
  next()
}

然后再配置一下package.json的scripts

"json-server": "json-server __json_server_mock__/db.json --watch --port 3001 --middlewares ./__json_server_mock__/middleware.js"