一、案例介绍
该案例实现界面可视化操作 + 网页数据采集 + 结果导出的完整流程：通过界面输入产品名、选择类别（蔬菜 / 水果）、设置采集页数，点击 “查询” 自动采集目标网页的价格数据并展示，点击 “导出” 可将结果存为 Excel。
二、案例逻辑
整个工具的运行逻辑分为 3 个核心环节：
- 界面交互层：通过输入框、按钮等UI控件制作界面应用，通过按钮事件绑定实现自动化流程；
- 数据采集层：通过自动化流程自动打开对应网页→搜索产品→分页抓取数据；
- 数据输出层：将采集数据同步到界面表格，并支持导出为 Excel。
三、界面设计
拖拽『文本』控件,改值
产品名称 采集页数;
拖拽『输入框』控件,用于后续填入搜索词;
拖拽『单选框』控件,改值蔬菜 水果,对应不同的链接;
拖拽『计数器』控件,用于控制采集页数;
拖拽『按钮』控件,改值查询，用于采集某产品的X页数据；改值数据导出，将采集的数据导出至指定路径；
拖拽『表格』控件,改值序号 产品名称 产地 最高价（元/公斤） 最低价(元/公斤) 参考价(元/公斤) 规格 日期；
拖拽『消息提示』控件，改值数据已导出,用于数据导出后的页面提示。
四、流程设置
（一）”采集”流程
点击查询按钮，通过事件绑定采集流程，点击按钮后自动执行自动化流程，下面制作采集流程：
组件1、打开浏览器，选择浏览器类型
这里我们采集分为两种情况，
当点击蔬菜价格，页面跳转蔬菜价格页面，对应界面应用的蔬菜：www.jnmarket.net/fruitsveget…
当点击
水果价格，页面跳转蔬菜水果页面，对应界面应用的水果：www.jnmarket.net/fruitsveget…
组件2、条件判断
组件2.1、浏览网页
if条件：UI.窗体1.单选框1.选中值 包含蔬菜
浏览网页：www.jnmarket.net/fruitsveget…
elseif条件：UI.窗体1.单选框1.选中值 包含水果
浏览网页：www.jnmarket.net/fruitsveget…
组件3、控件属性操作，创建变量
搜索产品名称=UI.窗体1.输入框1.值，将界面输入框的值赋值给变量
组件4、获得/失去焦点，定位需要写值的目标元素:
div.query_tool>.n-input .n-input__input input
组件5、模拟键盘输入，输入变量
搜索产品名称
组件6、鼠标/元素点击，点击查询按钮，
组件7、表格新建或打开，新建空表格用于存储表格数据
组件8、表格数据初始化，设置表格列头
组件9、控件属性操作， 创建整数变量
页数=UI.窗体1.计数器1.值
组件10、For循环，循环变量
页数
组件10.1、获取多元素信息/属性值，获取目标元素
//tbody[@class='n-data-table-tbody']/tr，属性名称：outerHTML，输出变量：list
组件10.2、ForEach循环,循环
list
组件10.2.1、中间部分通过Xpath提取可参见案例：
www.huoyuyan.com/community/d…
组件10.2.2、控件函数调用，通过控件函数调用，将变量
rowIndex 产品名称 产地 最高价 最低价 参考价 规格 日期，以UI.窗体1.表格1.添加一行方法的方式向界面表格赋值
组件10.2.3、变量赋值，对变量rowIndex执行 “++” 赋值操作（让下一条数据的行索引自动递增）
组件10.3、鼠标元素点击，点击下一页
（二）”数据导出”流程
点击数据导出按钮，通过事件绑定数据导出流程，点击按钮后自动执行自动化流程，下面制作数据导出流程：
组件1、表格数据导出，将DataTable1的数据导出至指定路径
组件2、控件函数调用，数据导出后，通过调用：
UI.窗体1.消息提示1.打开方法，提示数据已导出。
五、注意
该案例根据页数及关键词进行采集的演示，如需要根据页面日期时间采集，可参考案例：
www.huoyuyan.com/community/d…
完整案例分享: www.huoyuyan.com/share.html?… 提取码: 5NeZ
