React模拟数据

前言

如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案

---

模拟数据

解决问题：后端接口开发好之前，如何开发业务？答案就是模拟数据

模拟数据的方式

一.代码入侵，(json文件，或者在代码中写)
缺点：
与真实的server环境切换非常麻烦，删除

二.请求拦截（mockjs）
优点：
1.与前端代码分离
2.可生成随机数据
缺点：
1.数据都是动态生成的假数据，无法真实模拟增删改查的情况
2.只支持axios，不支持fatch

三.接口管理工具（swagger, yapi）
优点：
1.配置功能强大，接口管理与mock一体，后端修改接口，mock也跟着修改
缺点：
1.配置复杂，依赖后端
2.一般会作为大团队的基础建设而存在

4.本地node服务器（json-server）
优点：
1.配置简单
2.自定义程度高，一切尽在掌握中
3.增删改查真实模拟
缺点：
无法随着后端API的修改而自动修改

---

mockjs

react mockjs

---

json-server

如何使用：

• yarn add json-server -D
• 在根目录创建文件：json_server_mock
• 在__json_server_mock__下，创建db.json
• 配置package.json

db.json

{
  "users": [],
  "projects": []
}

package.json
"json-server": "json-server __json_server_mock__/db.json --watch --port 8000

执行json-server会db.json生产接口：http://localhost:8000/users 和 http://localhost:8000/projects

---

自定义路由

解决在db.json没有数据，其他的接口测试

1. 在__json_server_mock__下，创建middleware.js
2. 修改package.json

middleware.js

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

    next()
}


修改package.json
"json-server": "json-server __json_server_mock__/db.json --watch --port 8000 --middlewares ./__json_server_mock__/middleware.js"

---

学习更多

项目经验地图