搭建一个基于 React、Umi、Dva 和 Webpack 的后台管理系统

技术栈简介

React: 作为视图层框架，提供了组件化开发的能力，便于构建复杂的用户界面。
Umi: 基于 React 的企业级框架，集成了路由、国际化、权限管理、布局等特性，特别适合后台管理系统开发。
Dva: 一个数据流方案，基于 redux 和 redux-saga，用于处理全局状态管理，方便处理异步数据请求。
Webpack: 前端构建工具，用于打包项目，优化资源加载。

1. 初始化项目

首先，使用 Umi 官方命令行工具来快速搭建基础的 React 项目。

安装 Umi 脚手架

# 全局安装 umi
npm install -g umi
 
# 创建一个 Umi 项目
mkdir my-admin-system
cd my-admin-system
 
# 初始化项目
umi init

安装依赖

安装 Dva 和其他必要依赖：

npm install dva react react-dom antd umi @ant-design/icons

antd: 是 Ant Design 前端 UI 组件库，常用于后台系统的快速开发。
@ant-design/icons: Ant Design 图标库。

2. 配置 Umi 和 Dva

2.1 配置 Umi

在 config/config.ts 中配置路由、布局和其他项目设置。

import { defineConfig } from 'umi';
 
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  // 配置路由
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/login', component: '@/pages/login' },
    { path: '/dashboard', component: '@/pages/dashboard' },
  ],
  fastRefresh: {},
});

2.2 配置 Dva

在 src/app.tsx 中引入并配置 Dva：

import { create } from 'dva-core';
import createLoading from 'dva-loading';
import models from './models';
 
// 创建 Dva 实例
const app = create();
app.use(createLoading());
 
// 加载所有 models
models.forEach((m) => {
  app.model(m.default);
});
app.start();
 
// 将 dva 的实例绑定到 React 上
export const dva = {
  config: {
    onError(err: ErrorEvent) {
      err.preventDefault();
      console.error(err.message);
    },
  },
};

3. 创建全局状态管理

Dva 的核心是通过 models 来管理状态。我们在 src/models/ 目录下创建管理数据的文件。

3.1 创建用户管理 model

创建 src/models/user.ts，用来管理用户相关的状态和请求。

import { Effect, Reducer } from 'umi';
 
export interface UserModelState {
  currentUser: any;
}
 
export interface UserModelType {
  namespace: 'user';
  state: UserModelState;
  effects: {
    fetchCurrent: Effect;
  };
  reducers: {
    saveCurrentUser: Reducer<UserModelState>;
  };
}
 
const UserModel: UserModelType = {
  namespace: 'user',
  state: {
    currentUser: null,
  },
  effects: {
    *fetchCurrent(_, { call, put }) {
      // 模拟 API 调用
      const response = yield call(fakeApiCall);
      yield put({
        type: 'saveCurrentUser',
        payload: response,
      });
    },
  },
  reducers: {
    saveCurrentUser(state, action) {
      return {
        ...state,
        currentUser: action.payload,
      };
    },
  },
};
 
export default UserModel;

4. 创建页面组件

4.1 登录页面

在 src/pages/login.tsx 中创建登录页面：

import React from 'react';
import { Form, Input, Button } from 'antd';
 
const Login = () => {
  const onFinish = (values: any) => {
    console.log('Login values: ', values);
    // 登录逻辑
  };
 
  return (
    <Form name="login" onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
        <Input placeholder="Username" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </Form>
  );
};
 
export default Login;

4.2 仪表盘页面

在 src/pages/dashboard.tsx 中创建仪表盘页面：

import React from 'react';
 
const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
};
 
export default Dashboard;

5. 配置 Webpack

虽然 Umi 内部已经集成了 Webpack，但我们可以通过配置来增强其功能，比如处理跨域请求等。

5.1 设置代理

在 config/config.ts 中配置代理以处理跨域请求：

export default defineConfig({
  proxy: {
    '/api': {
      target: 'http://backend-api-server.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
});

这个配置会将所有 /api 开头的请求代理到后端的 API 服务器。

6. 完整项目结构

my-admin-system/
├── config/
│   └── config.ts          # 项目配置
├── src/
│   ├── models/            # Dva models（全局状态）
│   ├── pages/             # 页面组件
│   │   ├── login.tsx      # 登录页面
│   │   ├── dashboard.tsx  # 仪表盘页面
│   ├── app.tsx            # Dva 实例配置
│   └── index.tsx          # 项目入口文件
├── package.json           # 项目依赖
└── tsconfig.json          # TypeScript 配置

7. 启动项目

确保所有配置都完成后，运行以下命令启动项目：

npm install
npm run start

访问 http://localhost:8000，你就可以看到后台管理系统的初步页面。

总结

这个后台管理系统项目结合了 React、Umi、Dva 和 Webpack，具备强大的功能拓展性和良好的性能表现。通过合理的架构设计和状态管理，它可以应对复杂的后台业务需求。

Quartz 4

Explorer

后台管理系统