react中前端同学如何模拟使用后端接口操作数据？

为什么前端同学需要模拟后端数据

作为一个前端，在实现项目功能的时候，需要在前端写一个静态的json数据，进行测试。

项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。

为了方便前端代码自测，提高开发效率，可以模拟生成数据进行前后端数据联调。

而且有的时候，还需要涉及到全模拟请求以及请求回来的过程，实现动态增删改查。

这个时候就需要使用到web的API接口神器json-server。

json-server文档：https://www.npmjs.com/package/json-server

之前介绍过如何利用json-server搭建模拟后端服务器。

json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。
json-server 可> 以直接把一个json文件托管成一个具备全RESTful风格的API。

公众号：前端爱好者

有了它，前端同学终于可以硬气的干活了。。。

为什么选择json-server

之前是采用easy-mock，遗憾的是其只能使用 get 请求。

json server 作为工具

• 足够简单，
• 写少量数据，
• 支持CORS和JSONP跨域请求，
• 支持GET, POST, PUT, PATCH 和 DELETE 方法，
• 更提供了一系列的查询方法，分页，排序等操作，简直强大。

也不用等到后端开发同事接口写好了之后再去对接接口了。

只需要借助json-server这个神器可以完美模拟业务。

使用json-server进行增删改查操作

前期准备 – 封装fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。

前端老兵，公众号：前端爱好者

react开发利器 之 fetch请求封装

使用json-server进行增删改查操作

json-server 可以用于模拟请求 ----Restful风格

• 查询 get params:{}
• 增加 post data:{}
• 删除 delete
• 修改 put /patch data:{}

公共暴露API接口文件 – api.js

// api.js

import requestFun from "./fetchUtil"; //引入
import qs from "qs";

const { stringify } = qs;
const { post, get, deleteMethod,patch} = requestFun;

其中fetchUtil.js为封装的Fetch请求

查询 get params:{}

// api.js 
// 简单查询
export async function fetchGetRoles(id,params) { 
  return get(`http://localhost:8001/roles`, params);
}

// 联表查询
export async function fetchGetMenus(params) {
  return get(`http://localhost:8001/rights?_embed=children`, params);
}

组件中使用

import {  fetchGetRoles, fetchGetMenus} from "../../utils/api"; // 引入api文件

// 简单查询
const fetchGetRolesListHandle = async () => {
    const urseListData = await fetchGetRoles();
    serolesList(urseListData);
};
fetchGetRolesListHandle();

const fetchGetRolesListHandle = async () => {
    const menusListData = await fetchGetMenus(); 
};

增加 post data:{}

// api.js 
// post方式
export async function fetchAddUser(params) {
  return post(`http://localhost:8001/users`, params);
}

组件中使用

import {  fetchAddUser } from "../../utils/api"; // 引入api文件

// 调用接口
const data = await fetchAddUser({
    ...values, // 注意这里
    roleState: true,
    default: false,
}); 

删除 delete

// api.js 

// delete 方式 
export async function fetchDeleteRoles(id) { 
    return deleteMethod(`http://localhost:8001/roles/${id}`);
}

组件中使用

import {  deleteMethod } from "../../utils/api"; // 引入api文件

// 调用接口
const deleteRolesMethod = async (item) => { 
  const data = await fetchDeleteUser(item.id);
};

修改 put /patch data:{}

// api.js 
// patch
export async function fetchPatchUser(id,params) { 
  return patch(`http://localhost:8001/users/${id}`, params);
}

组件中使用

import {  fetchPatchUser } from "../../utils/api"; // 引入api文件

// 状态修改
const handelChange = async (item) => { 
  // 发送请求到后端
  await fetchPatchUser(item.id, { roleState: item.roleState });
};

全部代码

// api.js

import requestFun from "./fetchUtil"; //引入
import qs from "qs";

const { stringify } = qs;
const { post, get, deleteMethod,patch} = requestFun;


// 简单查询
export async function fetchGetRoles(id,params) { 
  return get(`http://localhost:8001/roles`, params);
}

// 联表查询
export async function fetchGetMenus(params) {
  return get(`http://localhost:8001/rights?_embed=children`, params);
}

// 复杂查询
export async function fetchGetAuditNewsList(params) { 
  return get(`http://localhost:8001/news?author=${params.author}&auditState_ne=${params.auditState}&publishState_lte=${params.publishState}&_expand=category`);
}

// post方式
export async function fetchAddUser(params) {
  return post(`http://localhost:8001/users`, params);
}

// delete 方式 
export async function fetchDeleteRoles(id) { 
    return deleteMethod(`http://localhost:8001/roles/${id}`);
}

// patch
export async function fetchPatchUser(id,params) { 
  return patch(`http://localhost:8001/users/${id}`, params);
}

其实，文件中http://localhost:8001完全可以使用代理转发，这里暂不赘述。

补充 put和patch的区别

put和patch都可以进行修改操作

区别

• put 方式如果没有将所有属性都写完整 没写的属性会丢失
• patch方式没修改的属性不写默认为之前的值

举例：

{id:1,name:"zs",age:18}

修改age=20

put:{id:1,age:20}
patch:{id:1,name:"zs",age:20} 

json-server 高级用法

Filter

使用.操作 对象属性值，比如访问更深层次的属性

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

Paginate

使用 _page 和可选的 _limit来对返回数据定制（不设置默认返回10条）。

在返回的Response Headers 中，有一个属性Link，里面会有first, prev, next and last links。

GET /posts?_page=7
GET /posts?_page=7&_limit=20

10 items are returned by default

Sort

使用 _sort 和 _order （默认是ascending)

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

对于多字段的排序， 可以这样

GET /posts?_sort=user,views&_order=desc,asc

Slice

使用 _start 和 _end 或者 _limit (an X-Total-Count header is included in the response)

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

Works exactly as Array.slice (i.e. _start is inclusive and _end exclusive)

Operators

使用 _gte 或 _lte 选取一个范围

GET /posts?views_gte=10&views_lte=20

使用 _ne 排除一个值

GET /posts?id_ne=1

使用 _like 进行模糊查找 (支持正则表达式)

GET /posts?title_like=server

Full-text search (全文检索)

使用 q，在对象全部value中遍历查找包含指定值的数据

GET /posts?q=internet

Relationships (关系图谱)

获取包含下级资源的数据, 使用 _embed

GET /posts?_embed=comments
GET /posts/1?_embed=comments

获取包含上级资源的数据, 使用 _expand

GET /comments?_expand=post
GET /comments/1?_expand=post

To get or create nested resources (by default one level, add custom routes for more)

GET  /posts/1/comments
POST /posts/1/comments

Database

GET /db

Homepage

Returns default index file or serves ./public directory

GET /

json-server github地址 ： https://github.com/typicode/json-server

参考文档

• https://gitcode.net/mirrors/typicode/json-server
• https://www.npmjs.com/package/json-server