剖析基于React.js的后台管理系统开发过程（三）

2023-10-06 07:38:13

继续我们的基于 React.js 的后台管理系统开发全过程之旅，我们来到第三部分。这一部分，我们将探讨代码库结构、路由配置、HTTP 请求、数据交互、组件复用、单元测试和部署上线等方面。准备好在 React.js 的世界中大展身手了吗？那就开始吧！

代码库结构

一个井井有条的代码库结构是开发项目的基石。对于我们的 React.js 后台管理系统，我们将采用经典的目录结构：

src ：存放所有源代码，包括组件、样式表和脚本
public ：存放静态资源，如图像、字体和图标
node_modules ：存放依赖包
package.json ：项目配置信息，包括依赖项、脚本和元数据
README.md ：项目文档，介绍项目目的、安装说明和使用指南

路由配置

路由是单页应用程序中不可或缺的一部分。它允许我们在不重新加载页面的情况下，在不同页面之间导航。在我们的项目中，我们将使用 React Router，一个流行的路由库，来管理路由。

我们首先在 src 目录下创建一个 App.js 文件，作为应用的入口。在 App.js 中，我们导入必要的组件和库，并配置路由：

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

// 导入组件
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

这段代码配置了三个路由：根路由 / 对应 Home 组件，/about 路由对应 About 组件，/contact 路由对应 Contact 组件。当用户访问这些路由时，相应的组件将被渲染。

HTTP 请求

在后台管理系统中，HTTP 请求是必不可少的。我们需要与服务器进行通信，获取和更新数据。在我们的项目中，我们将使用 Axios，一个流行的 HTTP 请求库，来处理 HTTP 请求。

我们首先在 src 目录下创建一个 api.js 文件，作为 HTTP 请求的封装：

import axios from "axios";

const API_URL = "http://localhost:8000/api";

export const getProducts = () => {
  return axios.get(`${API_URL}/products`);
};

export const getProduct = (id) => {
  return axios.get(`${API_URL}/products/${id}`);
};

export const createProduct = (product) => {
  return axios.post(`${API_URL}/products`, product);
};

export const updateProduct = (id, product) => {
  return axios.put(`${API_URL}/products/${id}`, product);
};

export const deleteProduct = (id) => {
  return axios.delete(`${API_URL}/products/${id}`);
};

这段代码封装了五个 HTTP 请求：获取所有产品、获取单个产品、创建产品、更新产品和删除产品。这些函数接受必要的参数，并返回一个 Promise 对象，以便在组件中使用 async/await 语法。

数据交互

在 React.js 中，组件之间的通信是至关重要的。我们需要在组件之间传递数据，以便实现交互。在我们的项目中，我们将使用 Redux，一个流行的状态管理库，来管理数据。

我们首先在 src 目录下创建一个 store.js 文件，作为 Redux store：

import { createStore, combineReducers } from "redux";

const initialState = {
  products: [],
};

const rootReducer = combineReducers({
  products: (state = initialState.products, action) => {
    switch (action.type) {
      case "GET_PRODUCTS":
        return action.payload;
      case "CREATE_PRODUCT":
        return [...state, action.payload];
      case "UPDATE_PRODUCT":
        return state.map((product) => (product.id === action.payload.id ? action.payload : product));
      case "DELETE_PRODUCT":
        return state.filter((product) => product.id !== action.payload);
      default:
        return state;
    }
  },
});

const store = createStore(rootReducer);

export default store;

这段代码创建了一个 Redux store，并定义了一个名为 products 的 reducer。reducer 是一个纯函数，它接受 state 和 action，并返回新的 state。在我们的例子中，reducer 负责管理产品数据。

接下来，我们在组件中使用 Redux 的 connect() 方法，将组件连接到 Redux store。这使得组件可以访问 Redux store 中的数据，并可以 dispatch action 来修改数据。

组件复用

在 React.js 中，组件复用是提高代码可维护性和可重用性的关键。我们可以通过创建可复用的组件，并在不同的位置使用它们，来实现组件复用。

在我们的项目中，我们将创建一些可复用的组件，如 Header、Footer、ProductCard 和 ProductForm。这些组件可以被不同的页面使用，从而减少代码重复。

单元测试

单元测试是确保代码质量和可靠性的重要手段。在 React.js 中，我们可以使用 Jest，一个流行的单元测试框架，来编写单元测试。

我们首先在 package.json 文件中添加 Jest 的依赖：

{
  "devDependencies": {
    "jest": "^28.0.1"
  }
}

然后，我们在 src 目录下创建一个 __tests__ 目录，并在其中创建一个 ProductCard.test.js 文件，作为 ProductCard 组件的单元测试：

import React from "react";
import { render, screen } from "@testing-library/react";
import ProductCard from "../components/ProductCard";

test("renders product card", () => {
  const product = {
    id: 1,
    name: "Product 1",
    price: 100,
    image: "product1.jpg",
  };

  render(<ProductCard product={product} />);

  const productCard = screen.getByTestId("product-card");
  expect(productCard).toBeInTheDocument();

  const productName = screen.getByTestId("product-name");
  expect(productName).toHaveTextContent("Product 1");

  const productPrice = screen.getByTestId("product-price");
  expect(productPrice).toHaveTextContent("$100");

  const productImage = screen.getByTestId("product-image");
  expect(productImage).toHaveAttribute("src", "product1.jpg");
});