本文記錄使用 Flask 快速完成一個 簡易天氣查詢 MVP 程序的探索，學習過程。程序采用Flask+Jinja2實現，其中Flask擴展包括：1、flask-bootstrap，2、Flask-WTF。前端使用 jQuery Ajax 提交 Post，jQuery DOM 操作實現局部刷新顯示 JSON 數據。實時天氣數據使用心知天氣 API 獲取。

需求

完成一個網頁版天氣查詢程序

實現以下功能：

基本功能

輸入城市名，獲取該城市最新天氣情況

點擊「幫助」，獲取幫助信息

點擊「歷史」，獲取歷史查詢信息

部署在命令行界面

實現

搭建開發環境

假定已安裝Python3.5；pip3和virtualenv，這里所說的開發環境搭建指本程序所需的依賴包安裝。使用virtualenv創建虛擬環境，默認情況下，虛擬環境會依賴系統環境中的site packages，就是說系統中已經安裝好的第三方package也會安裝在虛擬環境中，所發請加上--no-site-packages 參數，表示不包括系統全局的Python安裝包，這樣會令環境更干凈。在虛擬環境執行如下語句：

pip install flask

pip install Flask-WTF

pip install flask-bootstrap

首先安裝 flask Python web 框架，然后安裝 Flask-WTF 表單擴展，最后是安裝 flask-bootstrap 集成 Twitter Bootstrap 前端框架。

項目文件結構

project

├─static

│ ├─css

│ ├─img

│ └─js

└─templates

考慮到這是一個簡單的 Web 應用，而沒有按照 Flask 大型應用的方式組織項目文件結構，這里主要是構建了放置靜態文件和模板文件的目錄，方便管理前端文件。

代碼實現

編寫業務邏輯

本應用的核心業務是通過 API 獲取實時天氣數據，作為一個練習的應用，會考慮免費的天氣 API ，考慮到網絡問題，也傾向于選擇國內的 API 服務。綜上，這里選擇心知天氣API提供實時數據。心知天氣 API 提供 Python Demo ，返回 JSON 格式數據。根據需求，我們對返回數據進行重新組裝，如果數據復雜的話還需要創建為實體對象保存，傳遞。業務類保存為 weather_servers.py 文件。

編寫 Flask 路由

需求中的三個功能點只有獲取該城市最新天氣情況和獲取歷史查詢信息是動態數，幫助作為靜態信息是無需向服務器請求的。所以這里只需要編寫兩個路由。保存在 weather_app.py 文件中。為了提升用戶體驗，另外還加了一個錯誤處理的路由，找不到資源時返回 404 頁面。

編寫 Flask-WTF 表單

搭建網頁時，如果需要和用戶交互，就會用到表單。使用 Flask-WTF 能簡化我們的工作。如字段驗證，使用宏渲染大量字段等。本應用由于表單并不復雜，只用到了字段驗證功能。保存在 WeatherForm.py 文件中。

編寫前端

前端中 Html 部分主要包含主頁面 index.html ，404 頁面的 404.html ，‘_data’后綴的 Html 文件是顯 示動態數據的模板。主頁面初始時顯示幫助信息，當點擊不同按鈕采用 jQuery DOM 操作隱藏，顯示相應 的數據。主頁頁通過 繼承 Bootstrap 基礎頁面使用 Flask-Bootstrap 模板。

使用 Flask-Bootstrap 模板

因為需要引入 其他 JS 和 CSS 文件，使用了Jinja2 提供的super() 函數。 如：

{{ super() }}

這里引用了 bootswatch 主題樣式。

程序發布

Python項目中必須包含一個 requirements.txt 文件，用于記錄所有依賴包及其精確的版本號。以便新環境部署。運行如下命令生成 requirements.txt 文件：

pip freeze >requirements.txt

當需要創建這個虛擬環境的完全副本，可以創建一個新的虛擬環境，并在其上運行以下命令：

pip install -r requirements.txt

效果圖

頁頁初始狀態(幫助)

天氣查詢

歷史信息

代碼

代碼托管在 GitHub 中，安裝 requirements.txt 文件指定的依賴庫，進入 weather_app.py 文件所在的目錄，運行 piython weather_app.py 命令即可部署。

參考

CHANGELOG

170903 添加效果圖

170901 創建

總結

以上是生活随笔為你收集整理的python 实现简单查询页面_python web 实现简易天气查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。