最简单上手的json-server构建本地数据桩

1.需要的安装的工具-json-server

安装命令：npm i json-server -D

2.项目环境

任何可以运行的项目

3.实现步骤-只需三个文件，一个配置，一个代理转发

结构

文件1-data文件夹，存放接口名字的json文件数据

文件2-db.js,json-server路由配置表，数据配置，json-server才能映射

//db.js
//动态配置json-server的路由表，因为有路由表才能进行数据映射
const fs=require("fs")
const path =require("path")
//对去data文件下的所有文件名
const fileNames= fs.readdirSync(path.resolve(__dirname)+'/data')
/**
 * 构建路由树
 * 格式：{apiName:{}}
 * 这里的为啥空对象，这里其实有很多操作
 * 1.可以手动引入所有的接口返回json文件，然后配置成{apiName:{响应数据}}
 * 2.如果不想以后手动添加，可以才有具备文件流IO操作的，如node进行动态读取文件名搭配路径直接获取数据流赋予接口返回体
 */
const fileTree={}
fileNames.map(key=>fileTree[key.split('.json')[0]]={})
module.exports=fileTree
复制代码

文件3-server.js,无论任何数据桩都需要起一个服务，模拟接口返回（其实这里不起，直接用项目运行端口比如localhost:3000也是可以的，但这样所有数据比如图片，其他类型文件都走数据桩，会有很多报错，所以起一个额外端口监听比较方便）

//server.js
const fs=require('fs')
const path=require('path')
const jsonServer = require('json-server');
const fileTree = require('./db');
// 创建json-server实例
const server = jsonServer.create();
// 将路由配置表传入，生成路由表
const router = jsonServer.router(fileTree);
const middlewares = jsonServer.defaults();
// 重新定义路由返回的数据。就是说：每访问一个路由，返回response的时候，都可以经过router.render重新定义response数据
router.render = (req, res) => {
    // 依据接口名查找本地数据
    const _p=path.resolve(__dirname, `./data${req.url}.json`)
    //fs读取文件数据不然返回{}
    let response=fs.existsSync(_p)?fs.readFileSync(_p,"utf8"):{}
    res.send(response);
};

server.use(middlewares);
// 导入路由
server.use(router);
// 在没有被占用端口开服务-例子3666
server.listen(3666, () => {
  console.log('JSON Server is running');
});

复制代码

配置：在package.json配置运行服务的命令，运行服务

只需在scripts添加   "server":"node src/server.js" 然后只需npm run server即可运行
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server":"node src/server.js"
  },
复制代码

接口二次封装代理–这里只是采用axios，简单举了post请求例子。其他请求库或者方法思路是一样的

//其实这里封装只要想说明，url要指向起的json-server服务器的端口域名url--不限制以下形式
import axios from 'axios'
const axiosOBj={
    post:(postName,params)=>{
     return axios.post(`http://localhost:3666/${postName}`,params)
    }
}
export {
    axiosOBj
}

//使用
axiosOBj.post("user_info",{myName:'hhh'}).then((res)=>{})
复制代码

拓展：在server.js的router，其实还有很多库也是可用进行替代的，比如koa

基本按照上面步骤，在任何能运行的项目都是可以走通数据桩的。有什么不足或者错误欢迎评论指出
交流。