与前端集成

本章介绍后台管理前端及 ApiTable 组件。普通用户使用的 H5、微信小程序可以单独采用 uni-app 等技术，通过业务 API 接入同一后端。两类前端的接口权限不同，不能把后台 Token 或通用表接口直接用于普通用户页面。业务接口与联调约定见业务 API 与 H5 / 小程序联调。

通过上述步骤，我们已经成功搭建了一个简单的后台管理系统的框架。tio-boot-admin 提供了丰富的功能接口，方便后续开发和扩展。接下来，需要配合前端项目进行界面开发和功能对接。

tio-boot-admin-react

推荐使用 tio-boot-admin-react 作为前端解决方案，该项目基于 React 框架，提供了丰富的组件和示例，能够与 tio-boot-admin 无缝集成，帮助快速构建现代化的后台管理界面。

tio-boot-admin-react 是基于 Ant Design Pro 开发的后台管理框架,tio-boot-admin-react=Ant Design Pro+api table

Ant Design Pro = Ant Design + UmiJS + ProComponents 的理解是正确的。这几个部分共同构成了 Ant Design Pro 的主要技术栈：

Ant Design：作为 UI 组件库，为 Ant Design Pro 提供了丰富的企业级 UI 组件（如按钮、表单、表格、菜单等），让用户界面更加美观、统一且专业。
UmiJS：作为底层框架，UmiJS 提供了路由管理、插件机制、构建优化、国际化等基础功能，支持 Ant Design Pro 的整体项目架构，简化了管理系统开发中的复杂逻辑。UmiJS 提供的插件和功能也提升了开发效率。
ProComponents：这是 Ant Design Pro 提供的一些高级 UI 组件（如 ProTable、ProForm、ProLayout 等），专为企业级应用设计，封装了复杂的业务场景和交互逻辑，便于快速开发。例如，ProTable 集成了分页、搜索、表单和表格等常见功能，减少了开发者的工作量。

总结

Ant Design Pro = Ant Design + UmiJS + ProComponents 是对的。这三个部分的结合让 Ant Design Pro 成为一个完整的、开箱即用的企业级管理系统开发模板，大大加速了后台管理系统的开发进程。

使用 tio-boot-admin-react

前端集成步骤简述：

克隆前端项目:

bash

git clone https://github.com/litongjava/tio-boot-admin-react.git

安装依赖:
bash
```
cd tio-boot-admin-react
npm install
```
1
2
配置接口地址: 本章默认后端没有额外上下文前缀，开发环境通过代理将 /api/ 原样转发到后端端口。例如登录请求为 /api/login/account，不要添加应用名前缀或删除 /api/。前端 8000 端口请求接口返回 404 时，先检查 dev 代理是否生效。完整配置、响应判定及令牌传递见登录与认证。若部署主动设置了 server.context-path，再按实际配置调整代理和外部地址。
启动前端:
bash
```
npm start
```
1
访问后台管理系统: 打开前端启动日志实际显示的地址。端口由前端项目配置和启动参数决定，不应固定假设为 3000。

以上安装与启动命令应与所检出的前端项目 package.json、packageManager 和锁文件一致。项目使用 pnpm 时，使用 pnpm install --frozen-lockfile 及对应的 pnpm run <脚本名>，不要同时生成 npm 与 pnpm 两套锁文件。镜像地址可放在项目 .npmrc 中，不必修改电脑的全局配置。

通过以上步骤，将拥有一个完整的后台管理系统，包括后端服务和前端界面，极大地提升开发效率和项目质量。

系统模块 - 配置管理

功能概述

本模块实现了系统配置项的管理功能，提供了增删查改等基础操作。通过 ApiTable 组件实现单表数据的管理，支持分页、搜索、创建等功能，适合在后台管理中使用。

核心组件

本模块的主要组件包括：

systemConstatnsColumn.tsx：定义了表格的列及其属性。
systemConstantsIndex.tsx：配置页面的主文件，结合 ApiTable 实现单表数据管理。

代码结构

1. 配置表格列 (`systemConstatnsColumn.tsx`)

该文件定义了表格中每一列的显示内容和表单验证规则。

typescript

import { ProColumns } from "@ant-design/pro-components";

export const tio_boot_admin_system_constants_config_columns = (): ProColumns<any>[] => [
  {
    title: "Key Name",
    dataIndex: "key_name",
    formItemProps(form) {
      return {
        rules: [
          {
            required: true,
          },
        ],
      };
    },
  },
  {
    title: "Key Value",
    dataIndex: "key_value",
    valueType: "textarea",
    ellipsis: true,
    formItemProps(form) {
      return {
        rules: [
          {
            required: true,
          },
        ],
      };
    },
  },
  {
    title: "Remark",
    dataIndex: "remark",
  },
  {
    title: "update_time",
    dataIndex: "update_time",
    valueType: "dateTime",
    hideInSearch: true,
    hideInForm: true,
  },
  {
    key: "update_time",
    title: "update_time",
    dataIndex: "update_time_range",
    valueType: "dateTimeRange",
    hideInTable: true,
    hideInForm: true,
    hideInDescriptions: true,
  },
];

Key Name：配置项的名称，必填字段。
Key Value：配置项的值，显示为多行文本且必填。
Remark：备注信息，允许用户填写附加说明。
Update Time：更新时间，支持单项显示和时间范围搜索。

2. 主页面配置 (`systemConstantsIndex.tsx`)

该文件将表格列配置与数据请求逻辑结合，形成完整的配置项管理页面。

typescript

import React from "react";
import ApiTable from "@/components/common/ApiTable";
import { tio_boot_admin_system_constants_config_columns } from "@/pages/system/constants/systemConstatnsColumn";

export default () => {
  const from = "tio_boot_admin_system_constants_config";

  const beforePageRequest = (params: any, isRecoveryMode?: boolean) => {
    params.idType = "long";

    if (isRecoveryMode) {
      params.deleted = 1;
    } else {
      params.deleted = 0;
    }
    params.remarkOp = "ct";
    params.orderBy = "update_time";
    params.isAsc = "false";
    params.update_time_type = "string[]";
    params.update_time_to_type = "ISO8601";
    params.update_time_op = "bt";

    params.keyNameOp = "ct";
    params.keyValueOp = "ct";

    return params;
  };

  const beforeCreateRequest = (formValues: any) => {
    return {
      ...formValues,
      idType: "long",
    };
  };

  return (
    <ApiTable
      from={from}
      columns={tio_boot_admin_system_constants_config_columns()}
      beforePageRequest={beforePageRequest}
      beforeCreateRequest={beforeCreateRequest}
    />
  );
};

参数说明

from：数据来源的标识，用于指定表名或数据源。
beforePageRequest：分页请求前的参数处理，包括字段名称的模糊查询和时间范围查询。
beforeCreateRequest：创建请求前的参数处理，自动添加 idType 字段。

核心组件 - ApiTable

ApiTable 是一个高度封装的单表管理组件，支持分页、搜索、排序等多项功能，极大简化了配置项管理的开发工作。

分页功能：实现数据的分页加载。
模糊查询：支持根据字段名称或内容的部分字符进行查询。
排序：默认根据 update_time 字段降序排列。

功能演示

创建配置项
- 点击「新建」按钮，弹出表单填写页面。
查看和管理配置项
- 支持按条件分页查询，点击分页器切换页面。
查看配置详情
- 点击记录进入详情页面，可查看配置项的详细信息。

总结

本模块提供了配置项的增删查改功能，代码结构简洁，基于 ApiTable 组件实现，支持模糊查询、时间范围搜索和排序功能。

与前端集成 ​

tio-boot-admin-react ​

总结 ​

使用 tio-boot-admin-react ​

系统模块 - 配置管理 ​

功能概述 ​

核心组件 ​

代码结构 ​

1. 配置表格列 (systemConstatnsColumn.tsx) ​

2. 主页面配置 (systemConstantsIndex.tsx) ​

参数说明 ​

核心组件 - ApiTable ​

功能演示 ​