首页 > 技术文章 > 全球疫情爬取APP版

zzmds 2020-03-19 20:48 原文

全球疫情统计APP图表展示:

将该任务分解成三部分来逐个实现:

①爬取全球的疫情数据存储到云服务器的MySQL上

②在web项目里添加一个servlet,通过参数的传递得到对应的json数据

③设计AndroidAPP,通过时间和地名来访问服务器上的对应的servlet来获取json数据,然后将它与图表联系

 

第一步:由前面的web项目的积累,爬取全球的数据就很容易,利用Python爬虫爬取丁香医生上的数据,存储到服务器上的MySQL

from os import path
import requests
from bs4 import BeautifulSoup
import json
import pymysql
import numpy as np
import time

url = 'https://ncov.dxy.cn/ncovh5/view/pneumonia?from=timeline&isappinstalled=0'  #请求地址
headers = {'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36'}#创建头部信息
response =  requests.get(url,headers = headers)  #发送网络请求
#print(response.content.decode('utf-8'))#以字节流形式打印网页源码
content = response.content.decode('utf-8')

soup = BeautifulSoup(content, 'html.parser')
listB = soup.find_all(name='script',attrs={"id":"getListByCountryTypeService2true"})
world_messages = str(listB)[95:-21]
world_messages_json = json.loads(world_messages)
# print(listB)
# print(world_messages)
worldList = []
for k in range(len(world_messages_json)):
    worldvalue = (world_messages_json[k].get('id'),time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())),
             world_messages_json[k].get('continents'),world_messages_json[k].get('provinceName'),
             world_messages_json[k].get('cityName'),world_messages_json[k].get('currentConfirmedCount'),
             world_messages_json[k].get('suspectedCount'),world_messages_json[k].get('curedCount'),world_messages_json[k].get('deadCount'),world_messages_json[k].get('locationId'),
             world_messages_json[k].get('countryShortCode'),)
    worldList.append(worldvalue)
db = pymysql.connect("139.129.221.11", "root", "fengge666", "yiqing", charset='utf8')
cursor = db.cursor()
#sql_clean_world = "TRUNCATE TABLE world_map"
sql_world = "INSERT INTO world_map values (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
worldTuple = tuple(worldList)

#
# try:
#     cursor.execute(sql_clean_world)
#     db.commit()
# except:
#     print('执行失败,进入回调1')
#     db.rollback()

try:
    cursor.executemany(sql_world,worldTuple)
    db.commit()
except:
    print('执行失败,进入回调3')
    db.rollback()

db.close()
 

 

第二步:在之前的web项目里增加一个worldServlet来通过传递过来的参数(时间,地名)来获取服务器里数据库的信息,然后以json的数据格式返回。

 

 

 

package servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import Bean.World; import Dao.predao; /** * Servlet implementation class worldServlet */ @WebServlet("/worldServlet") public class worldServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public worldServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); String date=request.getParameter("date"); String name=request.getParameter("name"); //System.out.println("666:"+date+" "+name); predao dao=new predao(); World bean=dao.findworld(date,name); //if(bean==null) // System.out.println("world为空"); Gson gson = new Gson(); String json = gson.toJson(bean); response.getWriter().write(json); //System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
 

 

第三步:Android端的设计,也要细分成两部分。第一部分设计界面的样式以及图表的展示,第二部分就是实现Android端访问远程服务器里的数据获取对应的信息,然后再配置到Android的图表里。

第一部分实现界面的设计,以及图表。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app
="http://schemas.android.com/apk/res-auto"
    xmlns:tools
="http://schemas.android.com/tools"
    android:layout_width
="match_parent"
    android:layout_height
="match_parent"
    tools:context
=".MainActivity">


   
<TextView
       
android:id="@+id/tv_time"
        android:layout_width
="wrap_content"
        android:layout_height
="wrap_content"
        android:layout_marginStart
="16dp"
        android:layout_marginLeft
="16dp"
        android:layout_marginTop
="16dp"
        android:text
="时间"
        android:textSize
="25dp"
        app:layout_constraintStart_toStartOf
="parent"
        app:layout_constraintTop_toTopOf
="parent"/>

   
<EditText
       
android:id="@+id/et_time"
        android:layout_width
="250dp"
        android:layout_height
="46dp"
        android:layout_marginEnd
="100dp"
        android:layout_marginRight
="100dp"
        android:gravity
="center"
        app:layout_constraintEnd_toEndOf
="parent"
        app:layout_constraintTop_toTopOf
="@+id/tv_time"/>

   
<TextView
       
android:id="@+id/tv_name"
        android:layout_width
="wrap_content"
        android:layout_height
="wrap_content"
        android:layout_marginBottom
="99dp"
        android:paddingTop
="110dp"
        android:text
="国家名"
        android:textSize
="25dp"
        app:layout_constraintBottom_toTopOf
="@+id/chartshow_wb"
        app:layout_constraintStart_toStartOf
="parent"
        app:layout_constraintTop_toTopOf
="parent"/>

   
<EditText
       
android:id="@+id/et_name"
        android:layout_width
="250dp"
        android:layout_height
="60dp"

        android:gravity
="center"
        android:paddingLeft
="120dp"
        app:layout_constraintBottom_toBottomOf
="@+id/bt_ly"
        app:layout_constraintEnd_toEndOf
="parent"
        app:layout_constraintStart_toStartOf
="@+id/bt_ly"
        app:layout_constraintTop_toTopOf
="@+id/tv_time"/>


   
<LinearLayout
       
android:id="@+id/bt_ly"
        android:layout_width
="409dp"
        android:layout_height
="209dp"
        android:layout_marginTop
="16dp"
        android:gravity
="center_horizontal"
        android:paddingTop
="150dp"
        app:layout_constraintEnd_toEndOf
="parent"
        app:layout_constraintHorizontal_bias
="0.0"
        app:layout_constraintStart_toStartOf
="parent"
        app:layout_constraintTop_toTopOf
="parent">

       
<Button
           
android:id="@+id/linechart_bt"
            style
="?android:attr/buttonStyleSmall"
            android:layout_width
="match_parent"
            android:layout_height
="wrap_content"
            android:layout_weight
="1"
            android:text
="折线图"/>

       
<Button
           
android:id="@+id/barchart_bt"
            style
="?android:attr/buttonStyleSmall"
            android:layout_width
="match_parent"
            android:layout_height
="wrap_content"
            android:layout_weight
="1"
            android:text
="柱状图"/>

       
<Button
           
android:id="@+id/piechart_bt"
            style
="?android:attr/buttonStyleSmall"
            android:layout_width
="match_parent"
            android:layout_height
="wrap_content"
            android:layout_weight
="1"
            android:text
="饼状图"/>
   
</LinearLayout>

   
<WebView
       
android:id="@+id/chartshow_wb"
        android:layout_width
="408dp"
        android:layout_height
="0dp"
        android:layout_gravity
="center"
        android:layout_marginBottom
="4dp"
        app:layout_constraintBottom_toBottomOf
="parent"
        app:layout_constraintEnd_toEndOf
="parent"
        app:layout_constraintStart_toStartOf
="parent"
        app:layout_constraintTop_toBottomOf
="@+id/tv_name">

   
</WebView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

界面有三部分组成:其一是时间选择框和地名选择,其二就是三个按钮(折线,柱状,圆饼),其三就是webview来展示我们的图表界面

 

图表的设计,首先要将echart.min.js放在AndroidStudio里的assets里,然后再放入自己的图表html代码,通过json数据来给图表进行赋值。同样在主页面对webview进行一堆设置,允许运行脚本,设置它的loadURL,然后设计三个按钮的点击方式,同时启动不同的脚本。

<!DOCTYPE html>
<!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran -->
<html lang="en">
<head>
   
<meta charset="UTF-8"/>
   
<title>Android使用Echarts示例</title>


</head>

<body>
<div id="main" style="width: 100%; height: 350px;"></div>
<script src="./echarts.min.js"></script>
<script type="text/javascript">
window.addEventListener(
"resize",function(){
       option.chart.resize();
});
   
//初始化路径
   
var myChart;

   
//  通用属性定义
   
var options = {
                title : {
                    text :
"Echart测试"
                },
                tooltip : {
                    show :
false
                },
                toolbox : {
                    show :
false
                },
            };


function doCreatChart(type,jsondata){
       
// 基于准备好的dom,初始化echarts实例
   
var myChart = echarts.init(document.getElementById('main'));
   
if(type=='line'||type=='bar')
        {
           
// 指定图表的配置项和数据
            options = {
                title: {
                    text:
'人数'
                },
                tooltip: {},
                legend: {
                    data:[
'疫情状况']
                },
                xAxis: {
                    data: [
"确诊","疑似","治愈","死亡"]
                },
                yAxis: {},
                series: [{
                    name:
'患者数',
                    type: type,
                    data: jsondata
                }]
            };
        }
else{
           options
= {
            series : [
                {
                    type:type,
                    radius :
'55%',
                    center: [
'50%', '60%'],
                    data:[
                        {value:
335, name:'确诊'},
                        {value:
310, name:'疑似'},
                        {value:
234, name:'治愈'},
                        {value:
135, name:'死亡'}
                    ]
                }
            ]
            };
        }

       
// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(options);

        }
   
</script>
</body>

</html>

 

第二部分就是通过Android端的http访问来获取服务器端的json数据,在将该数据传到图表的数据格式里。

MainActivity

 

 

制作中遇到的困难以及解决方案:

①远程数据库的连接无法访问,发现自己的服务器3306端口未开放同时要对服务器里的mysql里的一些东西进行配置:我参考的博客是-->远程连接数据库

②本来想的是进行jdbc访问远程数据库,奈何整了大半天硬是连不上,最终换了一种方式采取http访问服务器里的数据。

③安卓新版本默认不允许使用明文网络传输,

解决办法如下,在AndroidManifest.xml文件的<application标签中,加入一句"android:usesCleartextTraffic="true",允许应用进行明文传输即可。

或者采用:

更改 AndroidManifest 的 application 标签下的配置。

添加 networkSecurityConfig(网络安全配置)。

android:networkSecurityConfig="@xml/network_security_config"

network_security_config 文件内容如下:

<?xml version="1.0" encoding="utf-8"?> <network-security-config> <base-config cleartextTrafficPermitted="true" /> </network-security-config>

 

 

推荐阅读