Flask开发天气查询软件,带你掌握pipenv的使用与手机Termux下的部署

技术火炬手 发表于 2019/07/22 15:53:46 2019/07/22
【摘要】 假装很努力也许是最近经常熬夜的原因,导致有时莫名的发愣,然后一晃眼半个小时过去了…每天晚上坐在电脑前,看着很辛苦但觉得效率不高。除了搞公众号,其余貌似学到的东西很少。所以,之后周末的时间需要用来学一些更贴近自身的知识,然后...就一周五更喽。每天写原创的东西,说实话最近开始有些卡文了。看来得找个系列再来一波….关于pipenv昨天介绍了pipenv这个相比于virtualenv更高端大气上档...

假装很努力

也许是最近经常熬夜的原因,导致有时莫名的发愣,然后一晃眼半个小时过去了…每天晚上坐在电脑前,看着很辛苦但觉得效率不高。除了搞公众号,其余貌似学到的东西很少。所以,之后周末的时间需要用来学一些更贴近自身的知识,然后...就一周五更喽。每天写原创的东西,说实话最近开始有些卡文了。看来得找个系列再来一波….

关于pipenv

昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧。那么今天就拿它做一个例子,开发一款天气预报查询软件,然后打包部署到手机的Termux下。

天气预报

获取天气预报数据,离不开中国天气网

image.png

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

image.png

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

爬虫思路

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

from urllib.parse import quote
quote('西安', encoding='utf-8')
'%E8%A5%BF%E5%AE%89'

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



image.png

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

爬虫代码

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

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @JianShu  : 清风Python
# @Date     : 2019/7/19 1:56
# @Software : PyCharm
# @version  :Python 3.7.3
# @File     : weather.py
import requests
from urllib.parse import quote
import re
from bs4 import BeautifulSoup
class WeatherReport:
    def __init__(self, city):
        self.quote_city = quote(city, encoding='utf-8')
        self.result_info = []

    def get_city_code(self):
        r = requests.get('http://toy1.weather.com.cn/search?cityname=%s' % self.quote_city)
        response = eval(r.text)[0].get('ref')
        try:
            return re.search('[0-9]+', response).group()
        except AttributeError:
            return None

    def get_weather(self, code):
        r = requests.get('http://www.weather.com.cn/weather/%s.shtml' % code)
        r.encoding = 'utf-8'
        bs4 = BeautifulSoup(r.text, 'lxml')
        days = bs4.find('div', {'id': '7d'}).find('ul', {"class": "clearfix"}).findAll('li')
        for day in days:
            date = day.h1.text
            weather = day.find('p', {"class": "wea"}).text
            tmp = day.find('p', {"class": 'tem'}).text.strip()
            self.result_info.append("%s: %s %s" %(date,weather, tmp))
        return self.result_info

Web界面

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

image.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
    <title>清风python</title>
    <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
    <script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
</head>
<body>

<div class="container container-small">
    <div>
        <div>
            天气查询软件
        </div>
        <div>
            <div class="form-group has-success">
                <div>
                    <div>
                        城市:
                    </div>
                    <input id='name'/>

                </div>

            </div>
            <div class="form-group ">
                <button class="form-control btn-primary" id="load">查询</button>
            </div>
            <p></p>
            <script type="text/javascript">
                $(function () {
                    $('#load').click(function () {
                        let city = $('#name').val();
                        if (city.length > 0) {
                            $.ajax({
                                url: '/weather/' + city,
                                type: 'get',
                                success: function (data) {
                                    $('.result').html(data);
                                }
                            })
                        } else {
                            $('.result').html("请填写正确的城市名称...");
                        }
                    })
                })
            </script>
        </div>
    </div>
    <div>
        ©2019-欢迎关注我的公众号:<a href="https://www.jianshu.com/u/d23fd5012bed">清风Python</a>
    </div>
</div>
</body>
</html>

Flask路由

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

from flask import Flask, render_template
from weather import WeatherReport as wr
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/weather/<city>')
def weather(city):
    main_func = wr(city)
    city_code = main_func.get_city_code()
    if city_code:
        info = main_func.get_weather(city_code)
        return '<br>'.join(info)
    else:
        return "城市名称无效,请核查..."

image.png

pipenv部署

代码我们已经开发完了,那么如何在手机上部署呢?让我们看看项目目录:

image.png

我将代码提交到github…

image.png

现在我们从手机上下载代码,进行安装…

# 如果为安装pipenv,需要先进行安装操作

pip instlal pipenv

# 克隆代码

git clone https://github.com/KingUranus/WeatherForecast.git

# 进入代码目录

cd WeatherForecast

# 安装虚拟机及依赖模块

pipenv install

# 进入虚拟机

pipenv shell

# 启动flask

flask run

从安装到使用,你无需关注虚拟环境到底涉及什么模块,需要怎么安装,没错pipenv就是这么简单粗暴+无脑!放几张图吧:

image.png

别说,安装的这个小蛇还挺可爱的….

image.png

最终看看手机运行是否正常吧:

image.png

通过今天的练习,你们是否对pipenv有更深的理解了?简单方便又好用,是我对它中肯的评价,哈哈….

The End

明后两天,作为周末进行作息的调整,再学一些本人更关注的内容,就不更新了,提前祝大家周末快乐…

今天的内容就到这里,如果觉得内容对你有所帮助,欢迎点击文章右下角的在看。

期待你关注我的公众号清风Python,如果觉得不错,希望能动动手指转发给你身边的朋友们。

-----------------

作者:王翔|清风Python


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。