Web期末项目作业

实验目标

1、选取3-5个代表性的新闻网站（比如新浪新闻、网易新闻等，或者某个垂直领域权威性的网站比如经济领域的雪球财经、东方财富等，或者体育领域的腾讯体育、虎扑体育等等）建立爬虫，针对不同网站的新闻页面进行分析，爬取出编码、标题、作者、时间、关键词、摘要、内容、来源等结构化信息，存储在数据库中。
2、建立网站提供对爬取内容的分项全文搜索，给出所查关键词的时间热度分析。

注：
1、必须采用Node.JS实现网络爬虫
2、必须采用Node.JS实现查询网站后端，HTML+JS实现前端（可以使用框架也可以不使用）

实验环境

• Windows11
• Vue2
• express框架
• Javascript

实验内容

目标网站分析

中国新闻网

种子页面，爬取a标签

打开这个页面可以看到很多链接，每个链接点进去就是新闻网页。这些链接是由a标签写成的，因此爬取这些a标签内的href属性，就能获得新闻页面的url了。

这段代码实现了遍历种子页面中的所有a标签的属性href，并且判断链接是否合法。有四种情况：http://开头，https://开头，这两种是可以直接访问的网址。//开头的需要在前面补全https:，只有后缀的要在前面补全https://

css选择器。日期格式

接下来的任务是根据刚刚爬取到的url，访问每一个新闻页面，爬取需要的内容。

1.关键词：这一句表示找到meta标签的name属性为keywords的第一个，取属性值content，其中双引号要转义。

这是页面中原始的标签形式，可以通过上述语句定位到。

2.正文

通过.left_zw来定位。

原始页面。可以定位到所有p标签下的内容。

3.时间：三种情况

此外，还需要对爬取到的2023年07月14日这个字符串进行一个正则化处理，才可以正确转换成日期形式Date。

对日期正则化处理：提取xxxx年xx月xx日，\d{1,2}表示一到两个数

4.编码：先用utf-8解码，如果有乱码符号出现就用gbk解码。

5.来源：直接赋值为：中国新闻网

6.标题：每篇文章都有两个页面位置可以爬到它的标题，这里选择第一个。

作者：由于不是每一篇文章都有编辑信息，于是赋值为中国新闻网

腾讯网

种子页面，ajax

首先打开腾讯新闻网的主页。

随着页面往下滑，红框内的这些内容会不断加载，而直接爬取是得不到的。因此通过检查网络，查看ajax包发送情况。

可以看到随着页面下滑，加载出来的是这个url为i.news.qq.com的包。

关注请求的参数：limit=20

然后查看响应内容：列表范围为0-20，因此可以将limit设为100，然后请求这些json数据，就可以得到url和title等信息

css选择器爬取正文

可以看到json里面包含了大部分需要的信息，因此只需要进入子页面爬取正文即可。

正文信息可以通过#ArticleContent定位

网易新闻网

种子页面，html，正则

网易新闻与腾讯网是相似的动态加载方式，因此，也要先找到请求发送的位置和参数

图中红框内容都是动态加载的。随着页面向下滚动，发来的是一个html包。

打开请求的页面，可以看到将参数写在了html里面。我们可以通过正则从string里面提取需要的信息。

通过这一句正则，提取出来所有的url

css选择器爬取各项内容

进入到子页面之后，就通过css选择器，分别爬取以下这几项。其中日期要用date-utils单独处理成Date类型数据。

选择器与页面结构的对应关系：

选择器	页面标签

爬虫设计介绍

每个爬虫的结构都是：1. 引入包 2. 正则和选择器 3. request函数，用于向网页发送请求，接收响应信息 4. seedGet函数，爬取种子页面上每篇文章的url，并判断是否与数据库中已有的url冲突 5. newsGet函数，根据url访问子页面，爬取需要的信息。

另外，使用schedule模块定时执行。

可以看到，目前爬取了2000多条新闻信息。

最终网页设计介绍

前端，vue——搜索、列表、折线图

前端使用vue来实现。下面我介绍一下使用的组件。

Search

其中比较重要的是这个search组件，是用来维护搜索框，实现了普通搜索和高级搜索两种功能。其中借用了ui组件库elementui。

提示框，在搜索输入不合法的时候（有漏填项等），可以弹出提示。

普通搜索栏，附带下拉选择框、两个按钮分别是搜索、画图表。使用select和input来记录用户选择的下拉框和输入值。

使用elementui的drawer组件，实现高级搜索功能，可以同时对多个column的值进行限制。

点击搜索或画图按钮，会发生一个路由跳转，并通过路由参数query，将用户输入的搜索项传给路由组件。

Table

Table组件用来展示从数据库中搜索的信息，并且实现了分页、按列排序等功能。实现借用了elementui的el-table组件，而组件内部每一列的内容展示都是通过嵌入template实现，进行了一些处理。

比如将原始数据标题后面的关键词切掉。同时，按左侧箭头可以展开本条新闻的详细信息，例如关键词、编码、url等内容，标题也是原始数据的形式。点击发表日期和来源网站的箭头可以按列排序。

实现分页功能，需要维护2个变量：当前页currentPage、当前每页条数pageSize

每次点击下拉框改变每页条数的时候，需要修改pageSize值，并且把当前页改为第一页。当前页的初始值是1，而每次翻页都需要给它赋不同的值。

每次路由参数发生改变，需要执行getData函数，将路由参数query传给后端，然后接收sql查询得到的数据。

通过axios向后端传值，并且获取返回数据。其中，高级搜索和普通搜索通过type来区分，分别通过变量form和simple传值。

Chart

组件Chart的目标是实现查询关键词，画出含有关键词的新闻在每一天出现的次数折线图。同时，还实现了多个关键词搜索，画出多条折线的功能。

功能展示：

chart组件的模板很简单，就是建立一个固定宽高的div容器，引入一个echart。

Chart组件的getData方法明显比Table要长，是因为从数据库获取到的数据需要经过处理才能用来画Echart。

分析Echart中折线图需要的数据，可以发现option中需要legend是所有关键词组成的列表，xAxisX轴显示的数据是日期数据，series是一个列表，其中的每个元素都是一个字典，一个字典包含了一条折线的keyword信息、y轴Data，以及图表类型，这里是line表示折线图。

另外，this.keywordList用于保存每个关键词，this.dateFromTo保存多个关键词的所有日期中，最小的值到最大的值，空隙为一天。

后端，express

npm install express-generator -g

后端通过基于node.js的express脚手架创建，运行在127.0.0.1:3000，开始前需要先解决跨域问题。通过cors来解决。

创建Table、Chart两个路由，分别给前端的Table和Chart组件传数据。

Table

Table数据的查询主要基于这样一条sql语句：

select publish_date,title,url,source_name,keywords,author,source_encoding,content from fetches where content like '%拜登%';

因此，只需要根据前端传来的数据，构建出这样的sql语句，就可以在数据库中查询到需要的信息。

其中比较重要的内容是，如果搜索的列是content或者title时，将前端传来的input参数根据空格，拆分成几个不同的关键词，然后对这些关键词逐一查询，而不是将带有空格的字符串当做同一个参数查询。

此外，查询sql的函数在mysql.js中实现，还另外实现了同步查询。同步查询的作用是收集好各个关键词所要查询的内容，然后再一起上传到api。

Chart

Chart接口需要查询的数据基于这样一条sql语句，这条语句可以查到所有含有所查关键词的条目，并且统计出这些条目中publish_date出现的唯一值和每个唯一值出现的次数：

select publish_date,count(*) from fetches where content like '%拜登%' GROUP BY publish_date ORDER BY publish_date;

这里展示一下多个关键词查询的实现代码。多个关键词查询只对title和content查询有效，并且在input含有空格时，对多个关键词分别检索，这里用到了query1同步查询，收集完所有关键词的列，最后放到一个sendList列表中，以JSON格式传到接口中。

Chart后端传值的格式：

经过getData与两个日期处理函数处理好的option数据：

最终实现效果：

效果展示

1. 普通搜索，根据正文搜索普京。翻页。调整每页显示的条数。根据发表日期、来源网站进行排序。左侧箭头展开详细信息。URL跳转到原始页面。展示折线图。
2. 普通搜索，多关键词。根据标题搜索俄罗斯 美国，展示表格。这里的表格搜索的是既出现俄罗斯，又出现美国的内容。展示折线图，可以同时画两条。
3. 高级搜索，标题搜索美国，正文搜索普京，分别展示三个不同来源网站的内容。然后再根据网易新闻网的内容画图。此时画图的内容是根据时间统计每天的新闻条数。

Web编程期末作业