一、项目背景与目标

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

二、界面设计

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[i])
        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[i].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[i].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[i]+'\r\n'; 
        }    
    }
    return allContent;      
}

• 核心流程：

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

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

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

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

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，并通过弹窗提示操作结果。

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