aardio 网页数据采集

一、项目背景与目标

实现一个简易的网络数据采集工具，能够批量获取多个网页的内容，并支持查看与保存功能。工具界面包含"查看内容"和"保存到文件"两个核心按钮，可对预设的新闻列表页面进行标题与正文提取。

二、界面设计

1. 界面布局

import win.ui;
/*DSG{{*/
var winform = win.form(text="网络数据采集";right=759;bottom=469)
winform.add(
button={cls="button";text="查看内容";left=213;top=377;right=325;bottom=421;z=1};
button2={cls="button";text="保存到文件";left=435;top=377;right=549;bottom=421;z=3};
edit={cls="edit";left=26;top=27;right=722;bottom=348;ah=1;aw=1;edge=1;multiline=1;vscroll=1;z=2}
)
/*}}*/

winform.show();

• 界面构成：
  

• 主窗口标题为"网络数据采集"，尺寸759×469像素。

• 包含两个按钮："查看内容"（左下方）和"保存到文件"（右下方），用于触发数据采集逻辑。

• 中央是多行文本编辑框，用于显示采集到的网页内容，支持垂直滚动条。
  

2. 逻辑

var urls = {
    "http://127.0.0.1:5500/public/news_list.html",
    "http://127.0.0.1:5500/public/news_list.html?page=2",
    "http://127.0.0.1:5500/public/news_list.html?page=3"
};

function collectData(urls){
    var data = {};
    for(i=1;#urls;1){
        import string.html;
        var winform = win.form(text="")
        import web.view;
        var wb = web.view(winform);     
        wb.go(urls)
        var html = wb.html;   
        var htmlDoc = string.html(html)
        var doc = htmlDoc.queryEles( tagName = "div" );
        var h2 = doc[1].queryEles( tagName = "h2" );
        for(i=1;#h2;1){
            var titlelist = {};
            var title = h2.innerText();
            var titles = "文章标题为：" + title;  
            table.push(titlelist,titles)   
            table.push(data,titlelist)
        }
        var p = doc[1].queryEles( tagName = "p" );
        for(i=1;#p;1){
            var  contentlist = {};
            var content = p.innerText()
            var contents = "文章内容为：" + content;
            table.push(contentlist,contents)
            table.push(data,contentlist)
        }
    }
    var allContent = "";
    for(k,value in data){
        for(i=1;#value;1){
            allContent += value+'\r\n';
        }   
    }
    return allContent;      
}

• 核心流程：

• 
  

• URL：定义3个新闻列表页的URL（本地服务器路径，实际使用时需替换为目标网页）。

• 采集：通过for循环遍历每个URL，使用web.view加载网页并获取HTML源码。

• 解析：利用string.html模块解析HTML，提取第一个div标签内的所有h2（标题）和p（正文）标签。

• 数据整理：将标题和正文分别存入数组，最终拼接成完整文本返回。
  

3. 事件响应与文件操作

winform.button.oncommand = function(id,event){
    var obj = collectData(urls);
    winform.edit.print(obj)
}

winform.button2.oncommand = function(id,event){
    var obj = collectData(urls);
    var save = string.save("a.txt",obj);
    if(save){
        win.msgbox('保存文件成功')
    }else {
        win.msgbox('文件保存失败')
    }   
}

win.loopMessage();

• 交互逻辑：

• 点击"查看内容"按钮时，调用collectData函数获取数据，并将结果打印到编辑框。

• 点击"保存到文件"按钮时，将数据保存为当前目录下的a.txt，并通过弹窗提示操作结果。

话不多说，直接展示效果：