使用Python编写实时天气预报应用程序：从API获取数据到前端展示

发布时间：2024-12-26 06:28

编写Python爬虫抓取网页数据 #生活知识# #编程教程#

使用Python编写实时天气预报应用程序：从API获取数据到前端展示

在当今信息化的时代，实时天气预报已经成为人们日常生活中不可或缺的一部分。无论是出行规划还是日常穿着，准确的天气预报都能为我们提供极大的便利。本文将详细介绍如何使用Python编写一个实时天气预报应用程序，涵盖从API获取数据到前端展示的完整流程。

一、项目准备

1.1 环境配置

首先，确保你的开发环境中已经安装了以下工具和库：

Python 3.x pip（Python包管理工具） Flask（Web框架） requests（HTTP请求库） OpenWeatherMap API（天气预报数据源）

可以通过以下命令安装所需的Python库：

pip install Flask requests

1.2 获取API密钥

前往OpenWeatherMap官网（https://openweathermap.org/）注册账号并获取API密钥。这个密钥将用于后续的数据请求。

二、后端开发

2.1 创建Flask应用

首先，创建一个新的Python文件（例如app.py），并初始化Flask应用：

from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

2.2 获取天气预报数据

在Flask应用中添加一个新的路由，用于处理天气预报请求。使用requests库向OpenWeatherMap API发送请求并获取数据：

import requests API_KEY = 'your_api_key_here' BASE_URL = 'http://api.openweathermap.org/data/2.5/weather' @app.route('/weather', methods=['POST']) def get_weather(): city = request.form.get('city') params = { 'q': city, 'appid': API_KEY, 'units': 'metric' } response = requests.get(BASE_URL, params=params) weather_data = response.json() return render_template('weather.html', weather=weather_data)

三、前端开发

3.1 创建HTML模板

在Flask应用的根目录下创建一个名为templates的文件夹，并在其中添加两个HTML文件：index.html和weather.html。

3.1.1 index.html

这是应用程序的主页，用户可以在这里输入城市名称并提交请求：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时天气预报</title> </head> <body> <h1>实时天气预报</h1> <form action="/weather" method="post"> <input type="text" name="city" placeholder="输入城市名称"> <button type="submit">查询</button> </form> </body> </html> 3.1.2 weather.html

这是显示天气预报结果的页面：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气预报结果</title> </head> <body> <h1>天气预报结果</h1> <div> <p>城市：{{ weather.name }}</p> <p>温度：{{ weather.main.temp }}°C</p> <p>天气：{{ weather.weather[0].description }}</p> <p>湿度：{{ weather.main.humidity }}%</p> <p>风速：{{ weather.wind.speed }} m/s</p> </div> <a href="/">返回首页</a> </body> </html>

四、运行与测试

4.1 启动Flask应用

在终端中运行以下命令以启动Flask应用：

python app.py

4.2 测试应用

在浏览器中访问http://127.0.0.1:5000/，你将看到应用程序的主页。输入一个城市名称并提交，页面将跳转到天气预报结果页面，显示该城市的实时天气信息。

五、扩展与优化

5.1 添加错误处理

在实际应用中，可能会遇到API请求失败或用户输入无效城市名称的情况。可以通过添加错误处理机制来提升用户体验：

@app.route('/weather', methods=['POST']) def get_weather(): city = request.form.get('city') params = { 'q': city, 'appid': API_KEY, 'units': 'metric' } try: response = requests.get(BASE_URL, params=params) response.raise_for_status() weather_data = response.json() return render_template('weather.html', weather=weather_data) except requests.exceptions.RequestException as e: return render_template('error.html', error=str(e))

在templates文件夹中添加一个error.html文件，用于显示错误信息：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>错误</title> </head> <body> <h1>发生错误</h1> <p>{{ error }}</p> <a href="/">返回首页</a> </body> </html>

5.2 使用Ajax实现无刷新查询

为了提升用户体验，可以使用Ajax技术实现无刷新查询。在index.html中添加JavaScript代码，使用fetch API发送异步请求：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时天气预报</title> </head> <body> <h1>实时天气预报</h1> <form id="weather-form"> <input type="text" id="city" placeholder="输入城市名称"> <button type="submit">查询</button> </form> <div id="weather-result"></div> <script> document.getElementById('weather-form').addEventListener('submit', function(event) { event.preventDefault(); const city = document.getElementById('city').value; fetch('/weather', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `city=${city}` }) .then(response => response.json()) .then(data => { const resultDiv = document.getElementById('weather-result'); resultDiv.innerHTML = ` <p>城市：${data.name}</p> <p>温度：${data.main.temp}°C</p> <p>天气：${data.weather[0].description}</p> <p>湿度：${data.main.humidity}%</p> <p>风速：${data.wind.speed} m/s</p> `; }) .catch(error => { console.error('Error:', error); }); }); </script> </body> </html>

在后端，修改get_weather路由的处理方式，返回JSON数据：

@app.route('/weather', methods=['POST']) def get_weather(): city = request.form.get('city') params = { 'q': city, 'appid': API_KEY, 'units': 'metric' } try: response = requests.get(BASE_URL, params=params) response.raise_for_status() weather_data = response.json() return jsonify(weather_data) except requests.exceptions.RequestException as e: return jsonify({'error': str(e)}), 500