3、可视化开发基础：页面布局与组件化思维、拖拽式表单设计、列表与详情页的快速搭建

好，咱们进入正题。这一章聊的是可视化开发的基础，说白了就是让你在低代码平台上，不用写一行代码，就能把页面搭出来。听起来很爽对吧？但我要泼盆冷水——工具再智能，不懂底层逻辑，你搭出来的东西大概率是「能看不能用」。

我见过太多开发者，拖拽组件倒是挺溜，结果页面一跑，布局全乱、表单提交不了、列表翻页报错。嗯，问题出在哪？出在缺乏「组件化思维」和「布局意识」。今天我就把这些坑，一个一个给你填上。

3.1 页面布局：从「画格子」到「搭积木」

页面布局，说白了就是决定你的内容怎么摆放。传统开发里，我们用 CSS 的 Flexbox、Grid 来排。低代码平台里，这些都被封装成了「布局容器」。

我个人习惯，拿到一个页面需求，第一件事不是拖组件，而是先画「格子」。你想想看，一个页面无非就是：顶部导航、左侧菜单、中间内容区、底部版权。这就是一个典型的「上-下-左-右」结构。

在低代码平台里，布局容器通常有这几种：

  • 行容器（Row）：水平排列子元素
  • 列容器（Col）：垂直排列子元素
  • 栅格布局（Grid）：12 列或 24 列网格系统
  • 弹性布局（Flex）：自适应伸缩

举个例子，一个后台管理系统的首页，我通常会这样搭：

// 伪代码示意，实际在平台里拖拽即可
<Row>
  <Col span="4">左侧菜单</Col>
  <Col span="20">
    <Row>顶部导航</Row>
    <Row>内容区域</Row>
    <Row>底部版权</Row>
  </Col>
</Row>

小技巧：别把布局嵌套超过 3 层。我在项目中遇到过，有人为了对齐一个按钮，套了 5 层容器，结果页面渲染卡成狗。记住：扁平化布局，性能更好。

3.2 组件化思维：把页面拆成「乐高积木」

组件化思维，是低代码开发的核心。说白了，就是把页面拆成一个个独立、可复用的小零件。

比如一个「用户信息卡片」，它包含：头像、姓名、角色、操作按钮。在传统开发里，你得写 HTML + CSS + JS。在低代码平台里，你只需要拖一个「卡片组件」，然后配置数据源就行。

我建议你养成这样的习惯：

  • 先拆后搭：拿到设计稿，先识别出哪些部分是重复出现的。比如列表页的每一行、表单里的输入框、弹窗里的确认按钮。
  • 命名规范：给组件起个有意义的名字。别用「组件1」、「组件2」这种，回头你自己都找不到。
  • 属性暴露：好的组件，应该把「可变的部分」暴露成属性。比如按钮的文字、颜色、是否禁用。

核心原则：一个组件只做一件事，并且做好。这就是「单一职责原则」在低代码里的体现。

3.3 拖拽式表单设计：不只是「拉几个输入框」

表单设计，是低代码平台里最常用的功能。但很多人以为就是拖几个输入框、下拉框，然后连一下数据就完事了。错！表单的核心是「数据校验」和「联动逻辑」。

我曾经帮一个客户排查问题，他的表单提交后总是报错。我一看，好家伙，他把「手机号」字段配成了「文本输入」，没有做格式校验。用户填了个「abc」，系统直接崩了。

所以，设计表单时，你要关注这几点：

字段类型 常用校验规则 常见坑点
文本输入 必填、最大长度、正则 忘记限制长度，用户输入 10 万字
数字输入 范围、整数/小数 没做范围限制，用户输入负数
下拉选择 必填、动态数据源 选项数据没加载完就提交
日期选择 开始日期 < 结束日期 用户选了结束日期早于开始日期
文件上传 文件大小、格式、数量 没限制大小，用户上传 2G 文件

避坑指南：我曾经在做一个审批表单时，忘了给「金额」字段加「保留两位小数」的格式化。结果用户输入 100.1，系统存成了 100.10，但展示时又变成了 100.1，对账怎么都对不上。嗯，从那以后，所有金额字段我都强制格式化。

再说说「联动逻辑」。比如：用户选择了「省份」下拉框，自动加载对应的「城市」下拉框。这在低代码平台里，通常通过「事件配置」或「表达式」来实现。

// 伪代码：省份选择变化时，加载城市列表
onProvinceChange: function(provinceId) {
  // 调用接口获取城市列表
  let cities = API.getCities(provinceId);
  // 更新城市下拉框的数据源
  this.setComponentData('citySelect', cities);
}

你看，逻辑不复杂，但一定要在「设计阶段」就想清楚。别等到表单搭完了，才发现联动没做，又得从头改。

3.4 列表与详情页的快速搭建：CRUD 的「三板斧」

列表页和详情页，是后台系统里最常见的页面。说白了，就是「增删改查」。低代码平台通常提供了「模板」或「脚手架」，一键生成。

但我要提醒你：模板只是起点，不是终点。

快速搭建的步骤，我总结为「三板斧」：

  1. 配置数据源：告诉平台，你的数据从哪来。是 API 接口？还是数据库表？还是静态 JSON？
  2. 绑定字段：把数据里的字段，拖到列表的列上。比如「用户姓名」字段，拖到列表的第一列。
  3. 配置操作：添加「新增」、「编辑」、「删除」按钮，并绑定对应的表单或逻辑。

举个例子，一个「用户管理」列表页，大概长这样：

// 列表配置示意
{
  "dataSource": "API:/api/users",
  "columns": [
    { "field": "name", "title": "姓名" },
    { "field": "email", "title": "邮箱" },
    { "field": "role", "title": "角色", "type": "tag" },
    { "field": "createdAt", "title": "创建时间", "type": "date" }
  ],
  "actions": [
    { "type": "create", "label": "新增用户", "form": "userForm" },
    { "type": "edit", "label": "编辑", "form": "userForm" },
    { "type": "delete", "label": "删除", "confirm": true }
  ]
}

经验之谈：详情页别偷懒。很多人觉得详情页就是「只读的列表」，随便配配就行。但实际业务中，详情页往往需要展示关联数据、操作日志、审批流程。我建议你把详情页当成「小仪表盘」来设计，该有的信息一个别少。

最后，说一个我踩过的坑。有一次，我快速搭建了一个订单列表页，用了平台的「自动分页」功能。结果上线后，用户反馈翻到第 100 页时，页面卡死了。排查发现，平台默认是一次性加载所有数据，然后在前端做分页。数据量一大，浏览器直接崩溃。

解决方案？一定要确认你的数据源是否支持「后端分页」。如果支持，配置里勾选「服务端分页」；如果不支持，那就得自己写个接口包装一下。

嗯，这一章的内容就这些。记住：工具是死的，思维是活的。掌握了布局、组件化、表单和列表的底层逻辑，你才能在低代码平台上真正「飞」起来。

← 上一章 📖 返回目录 下一章 →