寒冬袭来,带你使用Flask开发一款天气查询软件吧

天气预报

获取天气预报数据,离不开中国天气网 http://www.weather.com.cn

天气预报网

登陆网站,在搜索栏中输入城市名称点击搜索,即可获取该地区的天气预报。比如我搜索西安,完成后会跳转至下面的网址:

西安天气

其他的都好说,但是这个地区编码怎么搞?F12看看网络请求…

爬虫思路

网络请求

我们可以看到网站先通过get请求,访问urlhttp://toy1.weather.com.cn/search?cityname=%E8%A5%BF%E5%AE%89并传参cityname,获取到城市编码,再进行了相关跳转。有些young man 会问这个cityname怎么是这种格式…其实很简单:

知道了这些,我们就可以有针对性的获取每个城市最近7天的天气预报了,当然少不了一堆beautifulsoup的元素定位操作:

城市近期天气

1 1# 元素定位思路:
2 2id=7d --> class=‘clearfix‘ -->ul --> findAll(li)
3 3# 参数获取
4 4h1标签为日期
5 5class=wea 为天气
6 6class=tem 为温度
7 7

爬虫代码

确定了这些内容,我们的爬虫代码基本就OK了,但这个不是今天的重点,所以简单看下吧:

 1  1# -*- coding: utf-8 -*-
 2  2# @Author   : 王翔
 3  3# @公众号    : 清风Python
 4  4# @Date     : 2019/11/21 05:56
 5  5# @Software : PyCharm
 6  6# @version  :Python 3.7.3
 7  7# @File     : weather.py
 8  8
 9  9
10 10import requests
11 11from urllib.parse import quote
12 12import re
13 13from bs4 import BeautifulSoup
14 14
15 15
16 16class WeatherReport:
17 17    def __init__(self, city):
18 18        self.quote_city = quote(city, encoding=‘utf-8‘)
19 19        self.result_info = []
20 20
21 21    def get_city_code(self):
22 22        r = requests.get(‘http://toy1.weather.com.cn/search?cityname=%s‘ % self.quote_city)
23 23        response = eval(r.text)[0].get(‘ref‘)
24 24        try:
25 25            return re.search(‘[0-9]+‘, response).group()
26 26        except AttributeError:
27 27            return None
28 28
29 29    def get_weather(self, code):
30 30        r = requests.get(‘http://www.weather.com.cn/weather/%s.shtml‘ % code)
31 31        r.encoding = ‘utf-8‘
32 32        bs4 = BeautifulSoup(r.text, ‘lxml‘)
33 33        days = bs4.find(‘div‘, {‘id‘: ‘7d‘}).find(‘ul‘, {"class": "clearfix"}).findAll(‘li‘)
34 34        for day in days:
35 35            date = day.h1.text
36 36            weather = day.find(‘p‘, {"class": "wea"}).text
37 37            tmp = day.find(‘p‘, {"class": ‘tem‘}).text.strip()
38 38            self.result_info.append("%s: %s %s" %(date,weather, tmp))
39 39        return self.result_info

Web界面

有了后台的数据,我们前台实现也就比较简单了,只需要提供一个城市的输入框和提交按钮,剩下就是城市天气的内容展示了。简单引入Bootstrap+jQuery即可完成,前台界面大概这样子,原谅屌丝的审美,哈哈…

Web界面

 1 1<!DOCTYPE html>
 2  2<html lang="en">
 3  3<head>
 4  4    <meta charset="UTF-8">
 5  5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6  6    <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
 7  7    <title>清风python</title>
 8  8    <link rel="icon" href="{{ url_for(‘static‘,filename=‘favicon.ico‘) }}">
 9  9    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/bootstrap.min.css‘) }}">
10 10    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/main.css‘) }}">
11 11    <script src="{{ url_for(‘static‘,filename=‘js/jquery.min.js‘) }}"></script>
12 12</head>
13 13<body>
14 14
15 15<div class="container container-small">
16 16    <div class="content">
17 17        <div class="header">
18 18            天气查询软件
19 19        </div>
20 20        <div class="block-info">
21 21            <div class="form-group has-success">
22 22                <div class="input-group">
23 23                    <div class="input-group-addon">
24 24                        城市:
25 25                    </div>
26 26                    <input id=‘name‘ class="form-control"/>
27 27
28 28                </div>
29 29
30 30            </div>
31 31            <div class="form-group ">
32 32                <button class="form-control btn-primary" id="load">查询</button>
33 33            </div>
34 34            <p class="result"></p>
35 35            <script type="text/javascript">
36 36                $(function () {
37 37                    $(‘#load‘).click(function () {
38 38                        let city = $(‘#name‘).val();
39 39                        if (city.length > 0) {
40 40                            $.ajax({
41 41                                url: ‘/weather/‘ + city,
42 42                                type: ‘get‘,
43 43                                success: function (data) {
44 44                                    $(‘.result‘).html(data);
45 45                                }
46 46                            })
47 47                        } else {
48 48                            $(‘.result‘).html("请填写正确的城市名称...");
49 49                        }
50 50                    })
51 51                })
52 52            </script>
53 53        </div>
54 54    </div>
55 55    <div class="footer">
56 56        ©2019-欢迎关注我的公众号:<a href="https://www.jianshu.com/u/d23fd5012bed">清风Python</a>
57 57    </div>
58 58</div>
59 59
60 60</body>
61 61</html>

Flask路由

Flask的路由比较简单,一个用来呈现首页,另外一个负责动态获取Ajax数据进行回传即可

 1 1from flask import Flask, render_template
 2  2from weather import WeatherReport as wr
 3  3
 4  4app = Flask(__name__)
 5  5
 6  6
 7  7@app.route(‘/‘)
 8  8def index():
 9  9    return render_template(‘index.html‘)
10 10
11 11
12 12@app.route(‘/weather/<city>‘)
13 13def weather(city):
14 14    main_func = wr(city)
15 15    city_code = main_func.get_city_code()
16 16    if city_code:
17 17        info = main_func.get_weather(city_code)
18 18        return ‘<br>‘.join(info)
19 19    else:
20 20        return "城市名称无效,请核查..."

pipenv部署

代码我们已经开发完了,那么如何让大家快速部署呢?让我们看看项目目录:

项目目录

首先我们将代码提交到github…

Github

由于采用pipenv虚拟环境开发,所以使用起来更为方便,只需如下操作:

 1  1# 如果为安装pipenv,需要先进行安装操作
 2  2pip install pipenv
 3  3# 克隆代码
 4  4git clone https://github.com/KingUranus/WeatherForecast.git
 5  5# 进入代码目录
 6  6cd WeatherForecast
 7  7# 安装虚拟机及依赖模块
 8  8pipenv install
 9  9# 进入虚拟机
10 10pipenv shell
11 11# 启动flask
12 12flask run

pipenv导入项目

最后来看看克隆部署后的软件实现吧:

北京天气

HDC.Cloud 华为开发者大会2020 即将于2020年2月11日-12日在深圳举办,是一线开发者学习实践鲲鹏通用计算、昇腾AI计算、数据库、区块链、云原生、5G等ICT开放能力的最佳舞台。

欢迎报名参会https://www.huaweicloud.com/HDC.Cloud.html?utm_source=&utm_medium=&utm_campaign=&utm_content=techcommunity

原文地址:https://www.cnblogs.com/huaweicloud/p/12229667.html

时间: 2024-11-06 14:13:19

寒冬袭来,带你使用Flask开发一款天气查询软件吧的相关文章

关于开发一款课程实验软件的项目需求分析与建议(NABCD)

N(Need 需求): 目前有些大学生在做课堂实验时因为没有完全理解老师的意思,对实验具体的步骤不清楚,导致真正做实验时无从下手,无法完成实验要求,无法达到真正的效果:或者学校无法提供足够的实验资源让学生充分完成实验,学生无法有足够的时间去完成整个实验.  A(Approach 做法):  开发一款软件,可以语音提示实验的每一个步骤和实验的具体细节,详细指导学生做实验,引导学生又快又好的完成实验的要求和目的.  B(Benefit 好处):  当学生无法正确理解实验的具体要求时,可以通过软件提示

flask开发restful api

在此之前,向大家说明的是,我们整个框架用的是flask + sqlalchemy + redis.如果没有开发过web,还是先去学习一下,这边只是介绍如果从开发web转换到开发移动端.如果flask还不是很熟悉,我建议先到这个网站简单学习一下,非常非常简单.http://dormousehole.readthedocs.org/en/latest/ 一直想写一些特别的东西,能让大家学习讨论的东西.但目前网上的很多博客,老么就按照官方文档照本宣读,要么直接搬代码,什么都不说明.我写这个系列的博客,

Flask开发基础教程

这是一篇关于Flask开发的文章,关于Flask是什么,如何搭建Flask开发环境等内容. Flask是什么 Flask是由Python语言编写开发而成的轻量级Web服务框架,Flask是由Armin Ronacher制造的一个愚人节玩笑而发展至今.   我心中的Flask是什么 Flask的快捷轻便可扩展性高的优点,可供于我想到什么去开发什么的想法,我不用考虑太多.只用想现在我可能想要做一个什么了,那么Flask就可以做到.Flask拥有太多扩展包,你只需要了解这些扩展包的使用方法就可以做到很

程序员带你学习安卓开发系列-Android文件存储

这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:.Net程序员快速学习安卓开发-布局和点击事件的写法 主要讲解了布局和点击事件的写法. 上篇文章补充: 控件单位介绍: px 像素 dip或者dp 设备独立像素 sp 比例像素 控件的高度宽度一般用dip或者dp.字体用sp. Android 存储数据项目: 描述:实现QQ登录效果.如图: 输入帐号密码,并勾选记住帐号 ,点击登录时,保存帐号信息.下次登陆可以直接显示上次保存的QQ帐号. 前台界面

程序员带你学习安卓开发,十天快速入门-基础知识(四)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 本系列课程是.Net程序员学习安卓开发系列课程. 下面是前三次课程列表: 程序员带你学习安卓开发,十天快速入门-安卓学习必要性 程序员带你学习安卓开发,十天快速入门-开发工具配置学习 程序员带你学习安卓开发,十天快速入-对比C#学习java语法 为了大家系统有效的快速入门安卓开发,推荐

程序员带你学习安卓开发,十天快速入门-开发工具配置学习

上次课程:.Net程序员学习Android开发-第一课 讲到,.Net程序员学习Android开发的必要性以及对安卓大环境的相关介绍. 其中看到有网友评论,称,搞C#的去搞安卓,还怪自己的移动平台不给力.有的人说,学习.Net就学.Net学习什么安卓.这时的我首先想到了,固步自封的大清朝.当然并不是对这部分人排斥.只能说是想法不一致,认知略有不同,也没有错与对,我只是想把我自己的想法表达出来,期望与您产生共鸣.的确迄今为止,我仍然认为C#是当今我见过的最好的语言.设计规范语法总使我赶到兴奋其优美

程序员带你学习安卓开发,十天快速入-对比C#学习java语法

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 上次课程:.程序员带你学习安卓开发,十天快速入门-开发工具配置学习讲的是java环境的配置以及as安装工具的安装. 其中有网友@鹅鹅鹅_说道,其实jdk的环境变量配置,不用配置的那么麻烦了.当前的jdk版本只要设置一个变量javahome就可以了,其他的可以不需要配置.在这里提一下.

程序员带你学习安卓开发-XML文档的创建与解析

这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:程序员带你学习安卓开发系列-Android文件存储 因知识连贯性推荐关注头条号:做全栈攻城狮.从头开始学习. 链接:http://www.toutiao.com/m5443584213/ 项目概述: 学生信息管理系统.添加学生信息,到XML文件库. 显示所有添加的学生列表. 界面: 前台界面代码: XML生成: 生成的xml: XML解析: 更多教程,欢迎大家关注今日头条-做全栈攻城狮.一起交流探

Android 中带你开发一款自动爆破签名校验工具 kstools

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Android中带你开发一款自动爆破签名校验工具kstools - 生死看淡,不服就干! - 博客频道 - CSDN.NET 生死看淡,不服就干! http://www.wjdiankong.cn 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &n