从零搭建一个 React+Vite+TS 后台管理框架，配置化组件让开发效率翻倍

zzy2005
0 阅读4分钟

从零搭建一个 React+Vite+TS 后台管理框架，配置化组件让开发效率翻倍

前言

大家好，最近整理了一下手头的代码，做了一个后台管理框架 React Admin Framework。

起因很简单：做了太多后台项目，发现大量重复代码——表单、列表、弹窗，每个项目都要写一遍。能不能把这些封装成配置化组件，减少重复劳动？

于是有了这个框架。

一、为什么又要做一个后台框架？

现有框架的痛点

市面上的后台框架很多，比如 Ant Design Pro、Vue Element Admin 等，都很优秀。但在使用过程中，我发现几个问题：

  1. 太重：功能太全，很多用不上，定制成本高
  2. 学习成本高：要学习框架的约定和封装方式
  3. 后端依赖：需要配置后端才能运行完整功能

我想解决的问题

我的目标很简单：

  • 减少重复代码：表单、列表、弹窗这些，能不能配置一下就生成？
  • 开箱即用：不需要配置后端，买来就能跑
  • 轻量易定制：代码结构清晰，方便二次开发

二、技术选型

React 19 + Vite

为什么选 Vite？

  • 开发启动快，热更新秒级
  • 构建速度快
  • 原生支持 TypeScript

TypeScript

类型安全的重要性不言而喻。后台管理系统涉及大量数据结构，有类型提示会舒服很多。

Ant Design 6

企业级 UI 组件库，组件丰富，文档完善，社区活跃。

MSW（Mock Service Worker）

这是这个框架的一个亮点。MSW 是一个 Service Worker，可以在浏览器端拦截网络请求，返回 Mock 数据。

好处是什么？

  • 前端开发不需要后端
  • Network 面板能看到真实的 HTTP 请求
  • 体验和真实后端一致
  • 切换到真实后端只需改环境变量

三、核心设计：配置化组件

这是我这个框架最核心的部分。

3.1 表单组件 FormBuilder

传统写法：

<Form form={form}>
  <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
    <Input placeholder="请输入用户名" />
  </Form.Item>
  <Form.Item name="email" label="邮箱" rules={[{ type: 'email' }]}>
    <Input placeholder="请输入邮箱" />
  </Form.Item>
  <Form.Item name="status" label="状态">
    <Select placeholder="请选择状态">
      <Select.Option value={1}>启用</Select.Option>
      <Select.Option value={0}>禁用</Select.Option>
    </Select>
  </Form.Item>
</Form>

配置化写法：

const formItems = [
  { name: 'username', label: '用户名', type: 'input', required: true },
  { name: 'email', label: '邮箱', type: 'input', customRules: [{ type: 'email' }] },
  { name: 'status', label: '状态', type: 'select', options: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 },
  ]},
];

<FormBuilder items={formItems} />

代码量减少 50%+，而且配置可复用。

支持的控件类型：

  • 文本输入、数字输入、密码输入
  • 下拉选择、多选、单选、开关
  • 日期选择、时间选择、日期范围
  • 文件上传、图片上传
  • 级联选择、树选择
  • 自定义控件

3.2 列表组件 TableBuilder

传统写法：

<Table
  columns={columns}
  dataSource={data}
  pagination={{ current, pageSize, total, onChange }}
  loading={loading}
  rowSelection={rowSelection}
/>
// 还要写分页逻辑、请求逻辑、loading 状态...

配置化写法：

<TableBuilder
  columns={columns}
  dataSourceType="remote"
  fetchData={async (params) => {
    const res = await api.getList(params);
    return { data: res.list, total: res.total };
  }}
  selectionMode="multiple"
/>

分页、排序、筛选、行选择，全部自动处理。

3.3 标准列表页 BrowsePage

更进一步，我把 PageHeader + SearchForm + TableBuilder 整合成一个组件：

<BrowsePage
  pageConfig={{
    title: '用户管理',
    tools: [
      { key: 'add', text: '新增', primary: true, onClick: handleAdd },
    ],
  }}
  searchConfig={{
    items: [
      { name: 'keyword', label: '关键词', type: 'input' },
      { name: 'status', label: '状态', type: 'select', options: [...] },
    ],
  }}
  tableConfig={{
    columns: columns,
    dataSourceType: 'remote',
    fetchData: fetchUsers,
  }}
/>

一行代码，一个完整的列表页。

3.4 弹窗组件 Dialog

支持声明式和命令式两种调用方式：

命令式：

Dialog.confirm({
  title: '确认删除',
  content: '删除后数据将无法恢复，确定要删除吗？',
  onOk: async () => {
    await deleteRecord();
    return true;
  },
});

四、实战演示

5分钟搭建一个用户管理页面

代码对比：

指标传统写法配置化写法
代码行数~200 行~50 行
可复用性低高
维护成本高低

五、功能模块

系统管理

  • 用户管理：增删改查、权限分配
  • 角色管理：角色配置、权限设置
  • 菜单管理：动态菜单配置
  • 多语言管理：国际化配置

内容管理

  • 文章管理：文章增删改查
  • 分类管理：文章分类

六、在线演示

演示地址：www.webframe.cn

文档地址：www.webframe.cn/#/readme

测试账号：

  • 管理员：admin / admin123
  • 普通用户：test / 123456

七、获取方式

方式价格说明
闲鱼下单¥199 起担保交易，更放心

👉 点击去闲鱼购买

定制开发联系：18616638@qq.com

总结

这个框架的核心理念就是：配置化，减少重复代码。

如果你也厌倦了每个项目都要写一遍表单、列表、弹窗，不妨试试这个框架。

欢迎试用反馈，有问题随时交流！

相关链接：

avatar
文章
阅读
粉丝