Posted on November 25, 2024

漫谈中后台系统的前端开发方案

漫谈中后台系统的前端开发方案

中后台项目开发的痛点

中后台项目不同于 ToC 的前端项目，业务的实现方案大多侧重于表单、表格、图表等技术类型。据本人多年累积的中后台项目开发经验，中后台项目的前端开发痛点多集中于以下几点：

  • 缺乏标准化组件库，表单、表格等复杂交互组件需从零开发，拖慢开发进度
  • 临时开发的表单、表格组件又多存在可读性差，难以二次维护等问题

基于这些痛点，本人开发了一款面向于中后台开发的组件库——Agul-ui，其功能囊括了绝大多数的业务场景：

简易表单

表单是中后台业务中最常见的业务组件之一，agul 组件库中的简易表单 NewForm 基于 XRender-FormRender 进行二次开发，满足了更丰富的业务场景需求，它的主要优势有：

  • 通过 JsonSchema 对复杂的表单数据结构进行描述，不必再书写负责的表单 JSX，便于理解于维护
  • 便捷的配置表单校验规则和联动规则，非特殊情况不必编写复杂的交互函数
  • 支持表单布局，受控组件等功能

基本使用：

import { NewForm } from "agul-ui";

const schema = {
  type: "object",
  properties: {
    select1: {
      title: "单选",
      type: "string",
      enum: ["a", "b", "c"],
      enumNames: ["早", "中", "晚"],
    },
    input1: {
      title: "简单输入框",
      type: "string",
      required: true,
      disabled: "{{ formData.select1 === 'a' }}",
      hidden: "{{ rootValue.select1 === 'c' }}"
    },

  },
  displayType: "row",
};
export default () => {
  const onSubmit = (data, errors) => {
    if (!errors || !errors.length) {
      console.log(data);
    }
  };
  return <NewForm schema={schema} onSubmit={onSubmit} />;
};

通过以上配置，就可以实现一个基本的表单联动功能。

import { NewForm } from "agul-ui";

const schema = {
  type: "object",
  properties: {
    input: {
      title: "简单树状选择",
      type: "array",
      widget: "AsyncSelect",
      treeData: {
        url: "/api/data_source",
        path: "data",
        keywordField: "name",
        params: { a: 1 },
        labelField: "name",
        valueField: "uid",
      },
    },
  },
  displayType: "row",
};
export default () => {
  const onSubmit = (data, errors) => {
    if (!errors || !errors.length) {
      console.log(data);
    }
  };
  return <NewForm schema={schema} onSubmit={onSubmit} />;
};

通过以上配置，可以实现下拉框模糊搜索的场景功能，具体使用文档和更多使用示例请移步：Agul-ui。

简易表格

表格是中后台业务中进行数据展示的主要形式之一，一款功能强大、便于使用的表格是编程开发的不二利器。agul 组件库中的简易表格为此目的诞生，它基于 antd 组件库的 table 组件二次开发，支持其原生具备的所有功能的同时，在此基础上进行了更多场景功能的封装。

基本使用：

import { NewTable } from "agul-ui";
import { Divider } from "antd";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render(text) {
      return text?.first;
    },
  },
  {
    title: "Gender",
    dataIndex: "gender",
    enums: {
      male: "男性",
      female: "女性",
    },
  },
  {
    title: "Email",
    dataIndex: "email",
  },
];

const schema = {
  type: "object",
  properties: {
    phone: {
      title: "Phone",
      type: "string",
      required: true,
    },
    gender: {
      title: "Gender",
      type: "string",
      enum: ["male", "female"],
      enumNames: ["male", "female"],
    },
  },
  displayType: "row",
};
const operate = {
  buttons: [
    { type: "add", text: "新增", schema },
    { type: "edit", text: "编辑", schema },
    {
      type: "detail",
      text: "详情",
      routerPath: "/components/global-config",
      field: "phone",
    },
    { type: "delete", text: "删除", field: "id.value", url: "/delete" },
  ],
};
export default () => (
  <NewTable
    url="https://randomuser.me/api?pagination[total]=200&results=10&pageSize=8&pageNumber=1"
    columns={columns}
    path="results"
    operate={operate}
  />
);

以上配置实现了一个表格的基本功能，它既包含基本的数据展示，还囊括了常见的操作栏逻辑（支持自定义按钮），实际效果如下： table

其它功能

除上述功能组件外，Agul-ui 还提供了其它中后台业务开发常用的组件，均可以通过简单配置使用，例如交互图表、表单表格、弹窗表单、全局提示、便捷Loading等。

博客

关联内容