实战指南：利用 json-server 和 Ant Design App 包裹组件优化前端开发流程

本文是《React管理平台》第五节

通过本文，将指引大家学习并理解如何使用 json-server 快速创建一个模拟的 REST API ，同时我们也将介绍如何利用 Ant Design 的 App 包裹组件增强了代码的效率和可维护性。让我们开始了解更多具体细节吧！

使用json-server快速创建Mock服务

json-server 是一个基于 Node.js 的工具，它能够快速模拟出一个全功能的 REST API。使用一个简单的 JSON 文件作为数据源，它可以提供常见的 RESTful 路由，帮助你在没有后端支持的情况下进行前端开发，还能模拟真实的 API 行为，加快前端应用的原型设计和开发过程。

首先安装 json-server：

bash 复制代码

# 使用pnpm
pnpm i json-server -D

# 使用npm
npm i json-server -D

# 使用yarn
yarn add json-server -D

然后在项目的根目录中创建 mock 目录，并在此目录下新增 db.json 和 server.js 文件，模拟出一些测试数据和自定义服务器逻辑。

js 复制代码

// server.js
import jsonServer from 'json-server'
const server = jsonServer.create()
const router = jsonServer.router('./mock/db.json')

const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(jsonServer.bodyParser)

// 在json-server的响应中添加自定义逻辑
server.use((req, res, next) => {
  router.render = (req, res) => {
    console.log(res)
    console.log(res.locals)
    res.jsonp({
      code: 200,
      message: '请求成功',
      data: res.locals.data
    })
  }
  next()
})

server.use(router)

const PORT = process.env.PORT || 3000
server.listen(PORT, () => {
  console.log(`JSON Server is running on http://localhost:${PORT}`)
})

json 复制代码

// db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

在 package.json 文件的 scripts 部分增加如下命令，运行 json-server：

json 复制代码

"scripts": {
  // ...
  "mock-api": "node mock/server.js"
},

使用 pnpm mock-api 命令，即可启动并运行 json-server，将看到服务在 http://localhost:3000 上运行。

我们在浏览器中浏览http://localhost:3000/posts

使用 Ant Design 的 App 包裹组件

我们通常会使用到如 message 等组件，但同时也会面对一个问题，那就是所有使用的页面需要增加 {contextHolder}。为了解决这个问题，我们将使用 Ant Design 的 App包裹组件

首先在 utils 目录中新建 AntdGlobal.tsx 文件，并复制官网的案例代码到 AntdGlobal.tsx 文件中。

然后回到 App.tsx 文件中，先从antd依赖中引入App并重命名为AntdApp并包裹所有元素，接着引入 AntdGlobal，并将其作为 AntdApp 元素的第一个子元素：

javascript 复制代码

// App.tsx
import { App as AntdApp } from 'antd'
import './App.css'
import router from './router'
import AntdGlobal from '@/utils/AntdGlobal.tsx'
import { RouterProvider } from 'react-router-dom'

function App() {
  return (
    <AntdApp>
      <AntdGlobal />
      <RouterProvider router={router} />
    </AntdApp>
  )
}

export default App

接下来，我们可以在 Welcome.tsx 文件测试一下 AntdGlobal 的通用性等。

javascript 复制代码

// Welcome.tsx
import { useEffect } from 'react'
import { message } from '@/utils/AntdGlobal.tsx'

export const Welcome = () => {
  useEffect(() => {
    message.error('测试')
  }, [])
  return <>欢迎页</>
}

因为在main.tsx文件中开启了严格模式，出现两次message提示是正常的

至此，我们的Ant Design的App包裹组已配置完成，主要解决了以下几个问题：

上下文消费问题 ：在使用 message.xxx、Modal.xxx、notification.xxx 等静态方法时，如果组件上下文发生变化（如主题或者本地化信息等），这些静态方法通常无法直接响应上下文变化。App组件提供的可消费React context可以简化这个问题，让你不需要自行管理 contextHolder。
原生元素样式不一致问题 ：一些HTML原生元素可能不会遵循Ant Design的样式规范，这可能会导致应用界面的一致性问题。App包裹组件提供了基于.ant-app的默认重置样式，解决这些原生元素样式问题。
静态方法调用问题 ：在一些复杂的组件树中，可能需要在多处调用message、notification、modal等静态方法，这可能导致代码重复和维护性问题。使用App组件之下的useApp可以获取这些实例，使你可以在任何子组件中方便地调用它们。

使得开发人员可以更加高效地使用message、Modal、notification等模块，提升了应用的可维护性和用户界面的一致性。

在下一章节中，我们将会对 Axios 与 localStorage 进行封装。

总结

在本章节中，我们了解到如何使用 json-server 快速地创建一个模拟的 REST API。这个工具进一步简化了前端开发者在没有后端支持的情况下进行前端开发的过程，让我们能够模拟真实的 API 行为，并加快前端应用的原型设计和开发过程。

我们也学习了如何引入和使用 Ant Design 的 App 包裹组件，增强了代码的效率和可维护性。