企业官网建设流程全解析

Axure 10 中继器实战：3步构建可交互商品列表，支持增删改查

商品列表管理是电商后台系统中最基础也最核心的模块之一。传统静态原型只能展示固定数据，而使用Axure中继器可以模拟真实数据库操作，让原型具备动态交互能力。本文将带您从零开始，通过三个关键步骤构建完整的商品管理系统原型。

1. 基础搭建：创建商品列表框架

在开始之前，请确保您已安装Axure 10并熟悉基本操作。我们将首先构建商品列表的基础框架。

1.1 初始化中继器组件

1. 从元件库拖拽"中继器"到画布
2. 双击进入中继器编辑模式，删除默认矩形
3. 添加以下元件并命名：
   • 商品图片框（命名为img_product）
   • 商品名称文本框（命名为txt_name）
   • 价格文本框（命名为txt_price）
   • 库存文本框（命名为txt_stock）
   • 操作按钮组（编辑btn_edit/删除btn_delete）

// 中继器模板结构示例 - 中继器项 [RepeaterItem] ├─ 图片 [img_product] ├─ 文本标签 [txt_name] ├─ 文本标签 [txt_price] ├─ 文本标签 [txt_stock] ├─ 按钮 [btn_edit] └─ 按钮 [btn_delete]

1.2 配置数据集

点击中继器样式面板，添加以下列：

• product_id（商品ID）
• product_name（商品名称）
• product_price（商品价格）
• product_stock（库存数量）
• product_img（图片路径）

填入示例数据：

1.3 数据绑定设置

为中继器添加"每项加载时"事件：

1. 设置文本：

   • txt_name = [[Item.product_name]]
   • txt_price = "¥[[Item.product_price]]"
   • txt_stock = "库存：[[Item.product_stock]]件"

2. 设置图片：

   • img_product = [[Item.product_img]]

提示：图片需要先在数据集中右键对应单元格选择"导入图片"

2. 核心功能实现：增删改查交互

2.1 新增商品功能

1. 在画布添加表单元素：

   • 商品名称输入框（input_name）
   • 价格输入框（input_price）
   • 库存输入框（input_stock）
   • 图片上传按钮
   • 提交按钮（btn_submit）

2. 配置btn_submit点击事件：

   OnClick → 中继器动作 → 添加行 - 目标：当前中继器 - 行数据： - product_id: [[LVAR1.dataCount+1]] - product_name: [[input_name.text]] - product_price: [[input_price.text]] - product_stock: [[input_stock.text]] - product_img: (上传的图片路径)

2.2 删除商品功能

1. 为btn_delete添加点击事件：

   OnClick → 中继器动作 → 删除行 - 目标：当前中继器 - 行：当前行

2. 实现批量删除：

   • 在中继器模板添加复选框（checkbox_item）
   • 添加"全选"复选框（checkbox_all）和"批量删除"按钮
   • 配置交互：

     // 全选逻辑 checkbox_all 状态改变时： If 选中 → 标记所有行 Else → 取消标记所有行 // 批量删除 btn_batch_delete OnClick → 删除标记行

2.3 编辑商品功能

1. 为btn_edit添加点击事件：

   OnClick → 显示编辑弹窗 → 设置弹窗表单值 = 当前行数据

2. 配置保存按钮：

   btn_save OnClick → 更新行 - 目标：当前中继器 - 行：当前行 - 更新数据： - product_name: [[edit_name.text]] - product_price: [[edit_price.text]] - product_stock: [[edit_stock.text]]

2.4 商品筛选与搜索

1. 添加搜索输入框（input_search）和搜索按钮

2. 配置搜索交互：

   btn_search OnClick → 添加筛选 - 目标：当前中继器 - 条件：[[Item.product_name.indexOf(LVAR1)>-1]] - LVAR1 = input_search.text

3. 添加分类筛选下拉框：

   dropdown_category 选项改变时 → 添加筛选 - 条件：[[Item.category == LVAR1]]

3. 高级功能扩展

3.1 分页显示

1. 添加分页控制元件：

   • 每页显示数量下拉框
   • 上一页/下一页按钮
   • 页码显示文本

2. 配置分页交互：

   // 设置每页条数 dropdown_pagesize 选项改变时： → 设置每页项目数量 = 选中值 // 翻页控制 btn_prev OnClick → 设置当前显示页面 = 上一页 btn_next OnClick → 设置当前显示页面 = 下一页

3. 显示分页信息：

   中继器 每页加载时 → 设置文本 - page_info = "第[[This.pageIndex]]页/共[[This.pageCount]]页" - total_info = "总计[[This.dataCount]]条"

3.2 数据排序

1. 添加表头排序按钮：

   • 商品名称（btn_sort_name）
   • 价格（btn_sort_price）
   • 库存（btn_sort_stock）

2. 配置排序交互：

   btn_sort_price OnClick → 添加排序 - 目标：当前中继器 - 属性：product_price - 类型：切换（升序↔降序）

3.3 数据导出与打印

1. 添加导出按钮（btn_export）
2. 配置导出交互：

   btn_export OnClick → 触发浏览器打印 → 设置打印样式隐藏操作列

实战技巧与性能优化

1. 加载性能优化：

   • 大数据集时启用分页（建议每页≤50条）
   • 复杂计算使用函数变量缓存结果

2. 交互体验增强：

   // 行悬停效果 中继器项 MouseEnter → 设置选中样式 MouseLeave → 取消选中样式 // 操作确认对话框 btn_delete OnClick → 显示确认弹窗 确认后 → 执行删除

3. 移动端适配：

   • 使用水平滚动容器包裹宽表格
   • 触控操作替换hover效果
   • 增大点击热区

实际项目中，我曾遇到200+商品列表的性能问题，通过以下方案解决：

1. 实现虚拟滚动（只渲染可视区域项目）
2. 将图片转换为Base64内联减少请求
3. 复杂计算移至页面加载时执行