爬取搜狗热搜榜数据制成南丁格尔图

本文主要是介绍爬取搜狗热搜榜数据制成南丁格尔图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【实验目的】
1.在Windows平台上使用基本的Python语言结合Scrapy将搜狗热搜榜上的九个热门类型的数据进行爬取，并将爬取数据保存到本地数据库；
2.使用eclipse编辑工具结合echarts和jQuery等组件将爬取到的数据以南丁格尔图的形式展现出来。
【实验原理】
1.Scrapy结合xpath和Css可以很方便快捷的从获取到的网页中找出所需标签的文本内容，同时可以为爬取到的数据建模，在存储数据的时候免去了对数据的繁琐处理；
2.Python结合Scrapy可以在短时间内快速的爬取多个网页的内容，通过对网页内容的分析处理找出所需的数据，同时Python通过pymysql可以直接操作MySQL数据库，这样就可以把网页上爬取到的想要的数据直接存储到数据库中。
【实验环境】
Windows10-64位操作系统
Python-3.6.1
Scrapy-1.3.3
Eclipse-Mars.1 Release (4.5.1)
Apache Tomcat v8.0
MySQL Ver 14.14 Distrib 5.5.37, for Win32 (x86)
Google Chrome
【实验内容】
搜狗热搜榜网页中有九个热门的类型，比如有热门电影、热门电视剧、热门游戏等，每个热门的类型都提供了十个热门数据，每个热门数据中都包含着数据的名字以及搜索指数，南丁格尔图可以直观的对每个热门类型的数据进行比较，将热搜榜的九个类型做成南丁格尔图显示出来。
这是搜狗热搜榜2017-4-26九个热门类型的数据图
这里写图片描述

九个热门类型的南丁格尔图
【实验步骤】
<一、安装Python3.6.1、Scrapy>

Windows：
1>从https://www.python.org/downloads/上安装Python3.6.1
这里写图片描述
2>下载后的安装文件

3>双击进行安装：

4>点击下一步

5>下一步

6>安装完成后退出。打开DOS命令行，查询Python版本

python --version

7>从https://sourceforge.net/projects/pywin32/files/pywin32/Build%20221/下载安装pywin32
请确认下载符合系统的pywin32版本（win32或者amd64）
这里写图片描述
8>双击进行安装即可。安装完成后，打开DOS命令行进行安装Scrapy

pip install Scrapy

9>安装完成后，输入命令查看Scrapy版本：

Scrapy -V

这里写图片描述
< 二、使用Scrapy 进行数据的爬取>

1.打开DOS命令行，进入桌面：

cd Desktop

2.使用Scrapy创建爬虫项目，名字为resou:

scrapy startproject resou

3.resou文件夹->resou文件夹->spider文件夹，手动创建一个Python文件，名字为resou.py(创建一个文本文档，更改名字和后缀为：resou.py)
这里写图片描述
4.右键点击resou.py文件，用IDLE编写Python文件

5>编辑爬取数据的代码：

#导入Scrapy包和pymysql包
import scrapy
import pymysql
#pymysql包是Python连接MySQL数据库所需要的包#创建ReSouSpider类，继承scrapy.Spider类
class ReSouSpider(scrapy.Spider):#为爬虫定义一个名字（这个名字必须是独一无二的）name = "ReSouSpider"#爬虫爬取网页的域allowed_domains=['http://top.sogou.com/']#爬取网页的链接start_urls = ['http://top.sogou.com/']#定义parse函数def parse(self,response):#网页中控制九个热门类型的div标签divs = ['//div[@class="section s1"]','//div[@class="section s2"]','//div[@class="section s3"]','//div[@class="section s4"]','//div[@class="section s5"]','//div[@class="section s6"]','//div[@class="section s7"]','//div[@class="section s8"]','//div[@class="section s9"]']#循环读取九个标签中的数据for div in divs:#这里获取到的是对应热门类型的第一条内容的名字FName= response.xpath(div+'/ul/li/div[@class="txt-box"]/p/a/text()').extract()#这里读取到的是对应热门类型的第一条内容对应的搜索指数FStringData = response.xpath(div+'/ul/li/div[@class="txt-box"]/p/text()')[0].extract()#获取搜索指数中的数据FData=FStringData.split("：")[-1]#这里读取到的是对应热门类型从第二条内容开始读取到的内容名字集ONames = response.xpath(div+'/ul/li/a/text()').extract()#连接数据库conn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="wph",db="r",charset='utf8mb4')cursor = conn.cursor()#获取到含有数据表名字的字符串tableStringName = response.xpath(div+'/div/a/@href')[0].extract()#通过截取字符串获取到数据表的名字tableName = tableStringName.split('/')[0]try:#创建数据表，包含三条记录，（id 主键，自增,name,value）cursor.execute("create table "+tableName+"(id int NOT NULL AUTO_INCREMENT,name varchar(255) NOT NULL,value varchar(255) NOT NULL,PRIMARY KEY (id))")#将爬取到的热门类型的第一条内容的名字和搜索指数存储到数据表cursor.execute("insert into "+tableName+"(name,value)values(%s,%s)",(FName,FData))#存储够进行提交，没有提交将不会保存到数据库的表中conn.commit()Index=0#开始遍历其他内容的名字for EName in ONames:#获取到从热门类型从第二条记录开始的数据集中的数据OData=response.xpath(div+'/ul/li/span/text()')[Index].extract()Index+=1#将热门类型从第二开始的数据保存到数据库表中cursor.execute("insert into "+tableName+"(name,value) values(%s,%s)",(EName,OData))conn.commit()finally:cursor.close()conn.close()

6>这样爬取网页的爬虫代码就编写好了，下一步就可以爬取网页了，打开DOS命令行，进入之前创建好的resou文件夹，开始爬取数据：

cd resou
scrapy crawl ReSouSpider

7>输入命令点击回车后，爬虫就开始自动爬取数据了,等到出现下图是，就爬取结束。
这里写图片描述
8>接下来就可以去数据库中查看爬取下的数据了，在DOS命令行登录数据库查看数据，记住自己的账号和密码哦

mysql -u数据库用户 -p数据库密码
show databases;
use resou;
show tables;

就会出现九个热门类型的数据表了，你可以挨个查看每个数据表中的数据
这里写图片描述

select * from animation

或者你可以通过数据库可视化工具来查看我们爬取下的数据表和其中的数据：
这里写图片描述

这里我们的爬虫爬取数据就结束了，这个过程中我们爬取了搜狗热搜榜上九个热门类型的数据，并把每个热门类型的前十条数据的名字和热搜数据保存到了mysql数据库，接下来我们就开始把这些数据做成南丁格尔图吧。
<三、借助Eclipse结合Echarts等组件做南丁格尔图>
1>打开Eclipse，创建一个动态web工程，名字就取为Echarts-NDGE
这里写图片描述

2>在webcontent->WEB-INFO->lib中导入所需要的jar包，并将他们加入到路径中去

3>在webcontent文件下创建js文件夹，用来存放js文件

4>在创建好的js文件中加入我们需要用到的echarts和jquery这两个js文件

5>导包结束和文件添加结束后，我们就正式开始编程了，先从获取MySQL数据库的数据入手，在src下建立一个名为AccessDataDButil包，里边创建一个名为DButil的java文件
这里写图片描述

6>DButil.java中的代码如下；主要是连接数据库，在其他类调用时返回这个连接;

package AccessDataDButil;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;public class DButil {private Connection connection;public Connection getConnection(){try {//加载驱动Class.forName("org.gjt.mm.mysql.Driver");//驱动连接数据库connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/resou","root","wph");} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//返回connectionreturn connection;}public void ConnClose(){try {connection.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

7>在src文件下创建一个DataModel包，里边创建一个DataEntity.java文件；
这里写图片描述

在DataEntity中，对数据进行建模，规定数据的类型；

package DataModel;public class DataEntity {private String name;private float value;public String getName() {return name;}public void setName(String name) {this.name = name;}public float getValue() {return value;}public void setValue(float value) {this.value = value;}}

8>在src文件下创建一个AccessDataDAO包，里边创建一个AccessDao.java文件；
这里写图片描述

在AccessDao文件中编写代码，主要是获取数据库的连接，然后通过sql语句进行获取数据表中的数据。

package AccessDataDAO;import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;import AccessDataDButil.DButil;
import DataModel.DataEntity;public class AccessDao {Connection conn;DButil db;ResultSet set;Statement st;public List<DataEntity> getAttribute(String TableName){db=new DButil();conn=db.getConnection();String sql = "select name,value from "+TableName;List<DataEntity> list = new ArrayList<DataEntity>();try {st = conn.createStatement();set = st.executeQuery(sql);while (set.next()) {DataEntity entity = new DataEntity();entity.setName(set.getString("name"));entity.setValue(Float.parseFloat(set.getString("value")));list.add(entity);}} catch (SQLException e) {System.err.println(e.getMessage());}return list;}}

9>在src下面创建一个DataService包，在包下边创建一个getData.java文件
这里写图片描述

在getData文件中，对获取到的数据进行处理，并进行数据的传送；

package DataService;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON;import AccessDataDAO.AccessDao;
import DataModel.DataEntity;public class getData extends HttpServlet{public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//编码类型response.setContentType("text/html;charset=utf-8");String[] dbName= {"movie","animation","book","people","auto","game","song","tvplay","tvshow"};AccessDao dao=new AccessDao();List<DataEntity> list0,list1,list2,list3,list4,list5,list6,list7,list8;list0=dao.getAttribute(dbName[0]);list1=dao.getAttribute(dbName[1]);list2=dao.getAttribute(dbName[2]);list3=dao.getAttribute(dbName[3]);list4=dao.getAttribute(dbName[4]);list5=dao.getAttribute(dbName[5]);list6=dao.getAttribute(dbName[6]);list7=dao.getAttribute(dbName[7]);list8=dao.getAttribute(dbName[8]);String jsonString0=JSON.toJSONString(list0);String jsonString1="?"+JSON.toJSONString(list1);String jsonString2="?"+JSON.toJSONString(list2);String jsonString3="?"+JSON.toJSONString(list3);String jsonString4="?"+JSON.toJSONString(list4);String jsonString5="?"+JSON.toJSONString(list5);String jsonString6="?"+JSON.toJSONString(list6);String jsonString7="?"+JSON.toJSONString(list7);String jsonString8="?"+JSON.toJSONString(list8);PrintWriter out = response.getWriter();out.print(jsonString0);out.print(jsonString1);out.print(jsonString2);out.print(jsonString3);out.print(jsonString4);out.print(jsonString5);out.print(jsonString6);out.print(jsonString7);out.print(jsonString8);//System.out.println(list.toString());out.flush();out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}
}

10>在webcontent->WEB-INFO下边创建web.xml文件；
这里写图片描述

web.xml中代码为：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"><display-name>EchartTest</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><servlet><servlet-name>getData</servlet-name><servlet-class>DataService.getData</servlet-class></servlet><servlet-mapping><servlet-name>getData</servlet-name><url-pattern>/getData</url-pattern></servlet-mapping></web-app>

11>在webcontent下边创建一个showPicture.jsp文件，编写显示南丁格尔图的代码：
这里写图片描述

showPicture.jsp中的代码：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Jquery包 -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- 引入Echarts包 -->
<script type="text/javascript" src="js/echarts.min.js"></script></head>
<body bgcolor="#F0F0F0">
<h1 align="center">南丁格尔玫瑰图</h1><br>
<hr><br/><div id="main" style="width: 1400px;height:1000px;"></div></body>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title : {text: '本数据来自搜狗热搜榜---2017.04.27',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true,type: ['pie', 'funnel']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,series : [{name:'热门电影',type:'pie',radius : [30, 110],center : ['20%', '20%'],roseType : 'area',data:[]},{name:'热门动漫',type:'pie',radius : [30, 110],center : ['50%', '20%'],roseType : 'area',data:[]},{name:'热门小说',type:'pie',radius : [30, 110],center : ['80%', '20%'],roseType : 'area',data:[]},{name:'热门人物',type:'pie',radius : [30, 110],center : ['20%', '50%'],roseType : 'area',data:[]},{name:'热门汽车',type:'pie',radius : [30, 110],center : ['50%', '50%'],roseType : 'area',data:[]},{name:'热门游戏',type:'pie',radius : [30, 110],center : ['80%', '50%'],roseType : 'area',data:[]},{name:'热门音乐',type:'pie',radius : [30, 110],center : ['20%', '80%'],roseType : 'area',data:[]},{name:'热门电视剧',type:'pie',radius : [30, 110],center : ['50%', '80%'],roseType : 'area',data:[]},{name:'热门综艺',type:'pie',radius : [30, 110],center : ['80%', '80%'],roseType : 'area',data:[]}]});// 异步加载数据var info = {"opt": "pie"};$.post("./getData", info, function(data){var dat=data.split("?");var dat0=JSON.parse(dat[0]);var dat1=JSON.parse(dat[1]);var dat2=JSON.parse(dat[2]);var dat3=JSON.parse(dat[3]);var dat4=JSON.parse(dat[4]);var dat5=JSON.parse(dat[5]);var dat6=JSON.parse(dat[6]);var dat7=JSON.parse(dat[7]);var dat8=JSON.parse(dat[8]);/* for(var i=0; i < data.length; i++){mapOnlyKey.push( data[i].name);mapKeyValue.push({"value":data[i].value, "name": data[i].name });mapOnlyValue.push( data[i].value );}console.log(mapOnlyKey);console.log(mapKeyValue);console.log(mapOnlyValue);alert(mapKeyValue); */// 填入数据myChart.setOption({series: [{data: dat0},{data: dat1},{data: dat2},{data: dat3},{data: dat4},{data: dat5},{data: dat6},{data: dat7},{data: dat8}]});// 使用刚指定的配置项和数据显示图表。}); </script>
</html>