网页抓取广东省湛江市近15天天气高低温度,将数据处理结果保存进入mysql,然后用pyecharts处理结果可视化,最后用flask联通前后端,额外添加首页界面(bootstrap),登录界面
时间: 2023-09-27 11:05:32 浏览: 112
这是一个比较复杂的项目,需要分几个步骤来完成。
1. 网页抓取
首先,我们需要找到一个可以获取湛江市近15天天气数据的网站。这里以天气网为例,使用 requests 库进行网页抓取。
```python
import requests
from bs4 import BeautifulSoup
url = 'http://www.tianqi.com/zhanjiang/15/'
headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'}
response = requests.get(url, headers=headers)
soup = BeautifulSoup(response.text, 'html.parser')
```
2. 数据处理
接下来,我们需要将抓取到的数据进行处理,提取出需要的信息,并将其存入 MySQL 数据库中。这里使用 pymysql 库连接数据库,并使用 pandas 库对数据进行处理。
```python
import pymysql
import pandas as pd
# 建立数据库连接
conn = pymysql.connect(
host='localhost',
user='root',
password='password',
db='weather',
charset='utf8'
)
# 将抓取到的数据转换成 DataFrame 格式
table = soup.find_all('table')[0]
df = pd.read_html(str(table))[0]
# 将 DataFrame 写入 MySQL 数据库
df.to_sql('zhanjiang_weather', conn, if_exists='replace', index=False)
# 关闭数据库连接
conn.close()
```
3. 可视化处理结果
使用 pyecharts 库将处理后的数据可视化。这里以折线图为例,绘制最高温度和最低温度的变化趋势。
```python
from pyecharts.charts import Line
from pyecharts import options as opts
# 建立数据库连接
conn = pymysql.connect(
host='localhost',
user='root',
password='password',
db='weather',
charset='utf8'
)
# 从数据库中读取处理后的数据
sql = 'SELECT * FROM zhanjiang_weather'
df = pd.read_sql(sql, conn)
# 绘制折线图
line = Line()
line.add_xaxis(list(df['日期']))
line.add_yaxis('最高温度', list(df['最高温度']))
line.add_yaxis('最低温度', list(df['最低温度']))
line.set_global_opts(title_opts=opts.TitleOpts(title='湛江市近15天天气变化趋势'))
line.render('zhanjiang_weather.html')
# 关闭数据库连接
conn.close()
```
4. Flask 前后端联通
使用 Flask 框架将前端页面和后端代码连接起来。这里以一个简单的例子为例,假设前端页面是 index.html,后端代码是 app.py。
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
```
在 index.html 中,可以通过 Ajax 请求后端接口获取数据,并使用 pyecharts 渲染出图表。
5. 额外添加首页界面和登录界面
使用 Bootstrap 框架制作首页界面和登录界面,可以让网站看起来更加美观和实用。这里以一个简单的例子为例,假设首页界面是 home.html,登录界面是 login.html。
```html
<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
<title>湛江市近15天天气变化趋势</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">天气网</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">天气预报</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">城市列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="text" placeholder="搜索">
<button class="btn btn-success" type="submit">搜索</button>
</form>
</nav>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-sm-12">
<div id="chart" style="width:100%;height:500px;"></div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pyecharts@1.9.0/dist/pyecharts.min.js"></script>
<script>
$(function () {
$.ajax({
url: '/data',
type: 'GET',
dataType: 'json',
success: function (data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {text: '湛江市近15天天气变化趋势'},
tooltip: {},
legend: {data: ['最高温度', '最低温度']},
xAxis: {data: data.date_list},
yAxis: {},
series: [
{name: '最高温度', type: 'line', data: data.high_temp_list},
{name: '最低温度', type: 'line', data: data.low_temp_list},
]
};
chart.setOption(option);
}
});
});
</script>
</body>
</html>
```
```html
<!-- login.html -->
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<br>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card">
<div class="card-header">登录</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
```
在 app.py 中添加路由,将首页界面和登录界面与代码连接起来。
```python
@app.route('/')
def home():
return render_template('home.html')
@app.route('/login')
def login():
return render_template('login.html')
```
至此,一个简单的网页抓取、数据处理、可视化、前后端联通、首页界面和登录界面的项目就完成了。
阅读全文