采集器模块设计到界面设计共有两个部分,按功能分为内容自动采集器管理界面和采集内容列表页面。
1.采集器管理界面
采集器管理管理界面通常由采集器描述、所属栏目、列表页面地址、列表页匹配描述、内容页匹配描述组成。采集器管理管理界面的HTML核心功能设计代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>采集器管理</title> <link href="admin.css" rel="stylesheet" type="text/css" /> </head> <body> <table align=center cellspacing=0 cellpadding=0> <form method="post" action="manage.php"> <input type="hidden" name="flag" value="1"> <tr class=head> <td colspan="2">采集器管理</td> </tr> <tr class=line> <td width="11%">采集器描述</td> <td width="89%"><input name="Title" type="text" class="input" id="Title" size="40" value="" /></td> </tr> <tr class=line> <td width="11%">所属栏目</td> <td width="89%"> <select name="Category"> <option value="1">汽车频道</option> </select> </td> </tr> <tr class=line> <td valign="top">列表页面地址</td> <td><input name="EnterUrl" type="text" class="input" value="列表页面地址" size="60" /></td> </tr> <tr class=line> <td valign="top">列表页匹配描述</td> <td><textarea name="ListPreg" cols="80" rows="4" class="input">列表页匹配描述</textarea></td> </tr> <tr class=line> <td valign="top">内容页匹配描述</td> <td><textarea name="ContentPreg" cols="80" rows="4" class="input">内容页匹配描述</textarea></td> </tr> <tr class=line> <td colspan="2" align="center"> <input name="Submit" type="submit" class="btn" value="提交" /> <input name="Submit" type="button" class="btn" value="返回" onclick="history.go(-1);"> </td> </tr> </form> </table> </body> </html>
将上面的代码保存为manage.php文件,在浏览器中加载此文件,预览效果如图1所示。
图1采集器管理界面
2. 采集内容列表页面
采集内容列表页面的设计相对简单些,主要的功能是将采集到的信息,以列表的形式输出到浏览器中,该页面同时提供内容修改功能按钮,便于内容的维护。采集内容列表页面的HTML 设计代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>采集内容列表</title> <link href="admin.css" rel="stylesheet" type="text/css" /> </head> <body> <table align=center cellspacing=0 cellpadding=0> <tr class=head> <td colspan="4">栏目名称</td> </tr> <tr class=line> <td><strong>日期</strong></td> <td width="913"><strong>标题</strong></td> <td><strong>修改</strong></td> </tr> <tr class=line> <td width="135">日期</td> <td>标题</td> <td width="83"><input type="button" name="Submit2" class="btn" value="修改" onclick="" /></td> </tr> <tr class=line> <td colspan="4" align="center"> </td> </tr> </table> </body> </html>
将以上代码保存为articles.php文件,执行该文件,效果如图8.2所示。
图8.2采集内容列表页面