# Python-FL

**Repository Path**: zhou-yonggang/python-fl

## Basic Information

- **Project Name**: Python-FL
- **Description**: 出行小助手：实时天气信息与行车路况——基于python-flask于pythonanywhere部署的web项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-02-12
- **Last Updated**: 2021-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 出行小助手

## 一、项目介绍
- [**项目链接**](http://secyly.pythonanywhere.com/)

### 价值宣言
通过出行小助手的[**天气查询**](http://secyly.pythonanywhere.com/entry/)和[**路况查询**](http://secyly.pythonanywhere.com/traffic/)给驾车出行的人提供实时的天气与路况信息，同时[**出行笔记**](http://secyly.pythonanywhere.com/get_traffic/)为用户提供更多当地的出行攻略，给用户出行提供最大的方便。

### 加值宣言
- **高德天气查询api**：平台运用[高德天气查询api](https://lbs.amap.com/api/webservice/guide/api/weatherinfo)，为用户提供实时天气查询功能，解决因突发天气出行困难的痛点。
- **高德交通势态api**：平台运用[高德交通势态api](https://lbs.amap.com/api/webservice/guide/api/trafficstatus)，为用户提供实时路况查询功能，帮助用户规划道路行程。

### 项目web网站架构图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0124/203806_63c7dd57_3043318.png "架构.PNG")

### 项目web功能流程图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0124/200639_5bb0a956_3043318.png "网站架构图.PNG")

## 二、问题表述
### [用户画像](https://cloud.tencent.com/developer/article/1632833)
突然出行或在行程中，想要查询天气以及道路交通情况，计划行程的22岁-60岁的人

### 使用场景
当用户突然出门或在行程中，不清楚天气情况与道路状况，没有很好的出行规划时，[**出行小助手**](http://secyly.pythonanywhere.com/)可实时查询天气情况和交通势态、路况，为用户的出行规划提供帮助

### [用户痛点](http://www.woshipm.com/pmd/4288713.html)
- 出行无法预知天气情况
- 出行无法预知交通势态
- 出行没有很好的行程规划

## 三、解决方案表述
### 项目规划（主要功能）
- [**天气查询**](http://secyly.pythonanywhere.com/entry/)
- [**路况查询**](http://secyly.pythonanywhere.com/traffic/)
- [**日志系统**](http://secyly.pythonanywhere.com/viewlog/)
### Python基础知识
本项目主要是三个功能，以[**Python**](https://www.python.org/)语言为后台基础的[**Flask**](https://dormousehole.readthedocs.io/en/latest/)框架搭建的web程序。页面基础语言为[**HTML**](https://www.w3school.com.cn/html/index.asp)和[**CSS**](https://www.w3school.com.cn/css/index.asp)，通过[**Jinja2**](http://docs.jinkan.org/docs/jinja2/)传递模板及数据，并配合[**Bootstrp**](https://v3.bootcss.com/getting-started/#download)渲染页面外观，已达到web项目实现可用性和交互性。

![输入图片说明](https://images.gitee.com/uploads/images/2021/0124/203945_60d7774f_3043318.png "知识点.PNG")

## 四、编程功能的基本描述
### A.天气查询
- 运用高德天气查询api，为用户提供实时天气查询功能，解决因突发天气出行困难的痛点。
1. 使用API前先在[高德地图API申请注册账号](https://console.amap.com/dev/key/app)，获得自己的Key。
2. 使用HTML表单，获取用户请求数据

``` HTML
<div>
    <form method="post" action="/get_weather">
        <input type="text" required="required" name="city" id="city" class="form-control" placeholder="例如：北京" required autofocus>
        <button class="btn btn-lg btn-primary btn-block" type="submit">查询</button>
    </form>
</div>
```

2. 使用[requests模块](https://www.w3school.com.cn/python/python_module_requests.asp)结合高德api，实现天气查询

```python
import requests
url = 'https://restapi.amap.com/v3/weather/weatherInfo?parameters'
params = {
    'key': '请输入你的key',
    'city': '北京',
    
}
response = requests.get(url,params)
results = response.json()
results
```

    {'status': '1',
     'count': '1',
     'info': 'OK',
     'infocode': '10000',
     'lives': [{'province': '北京',
       'city': '北京市',
       'adcode': '110000',
       'weather': '霾',
       'temperature': '-2',
       'winddirection': '东北',
       'windpower': '≤3',
       'humidity': '66',
       'reporttime': '2021-01-25 02:30:15'}]}

3. 取值获取的结果数据[字典](https://www.runoob.com/python/python-dictionary.html)，再将所需要的实时数据传送至页面

```python
@app.route("/get_weather", methods=["post"])
def get_weather():
    city = request.form.get("city")# 获取的城市信息
    results = weather(city)# 请求结果
    row_city = results['lives'][0]['city']# 城市
    row_weather = results['lives'][0]['weather']# 天气
    ……
    log_request(request, results)# 日志记录
    return render_template('get_weather.html',
                           the_row_city=str(row_city),
                           ……
                           the_row_reporttime=str(row_reporttime))
```

### B.路况查询
运用高德交通势态api，为用户提供实时路况查询功能，帮助用户规划道路行程。与天气查询类似
1. 使用[requests模块](https://www.w3school.com.cn/python/python_module_requests.asp)结合高德api，实现路况查询

```python
url = 'https://restapi.amap.com/v3/traffic/status/road?'
params = {'key': '请输入你的key','name': '白云大道北','city': '广州市',
}
response = requests.get(url,params)
result = response.json()
result
```

    {'status': '1',
     'info': 'OK',
     'infocode': '10000',
     'trafficinfo': {'description': '白云大道北：双向畅通。',
      'evaluation': {'expedite': '100.00%',
       'congested': '0.00%',
       'blocked': '0.00%',
       'unknown': '0.00%',
       'status': '1',
       'description': '畅通'}}}

2. 取值获取的结果数据字典，再将所需要的实时数据传送至页面

```python
# 交通路况查询页
@app.route("/get_traffic", methods=["post"])
def get_traffic():
    city = request.form.get("now_city")# 获取的城市信息
    name = request.form.get("name")# 获取的道路信息
    results = traffic(name,city)# 请求结果
    row_tr_description = results['trafficinfo']['description'] ## 描述：具体道路描述
    row_expedite = results['trafficinfo']['evaluation']['expedite']# 畅通所占百分比
   ……
    row_description=results['trafficinfo']['evaluation']['description']# 路况判断
    log_request(request, results)# 记录日志
    return render_template('get_traffic.html',
                           the_name=name,
                           the_row_tr_description=str(row_tr_description),
                           the_row_expedite=row_expedite,
                           ……
                           the_row_description=str(row_description))
```

### C.日志系统
- 记录网页用户的请求情况
1. 日志系统存入数据，输出数据函数

```python
# 编写日志，打开**viewlog.log**文件记录日志数据
def log_request(req: "flask request", res: str):
    with open("viewlog.log", "a") as log:
        print(req.form, req.remote_addr, req.user_agent, res, file=log, sep="|")
```

2. 结合[**for**循环](https://www.runoob.com/python/python-for-loop.html)，将日志数据传至前端页面
  - 将数据进行整理排列，将各项数据对应置如表格中

``` HTML
<table>
    ……
<tr>
    {%for row_title in the_titles%}
    <td>{{ row_title }}</td>
    {%endfor%}
</tr>
{%for log_row in the_data%}
<tr>
    {%for item in log_row%}
    <td>{{ item }}</td>
    {% endfor %}
</tr>     
{% endfor %}
    ……
 </table>
```

### D.优化web前端界面
使用[**Bootstrp**](https://v3.bootcss.com/getting-started/#download)统一的页面模板，渲染优化页面布局

1. 用[**pip**](https://www.runoob.com/w3cnote/python-pip-install-usage.html)安装

```python
pip install flask-bootstrap
```

2. 引入模块

```python
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
```

3. **Bootstrap**基础继承运用
  - 套用继承模板，运用**Bootstrap**可运用已有样式

```HTML
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}<div><!-- ... --></div>{% endblock %}

{% block content %}<h1>Hello, Bootstrap</h1>{% endblock %}
```

4. 运用**Bootstrap**组件实现数据可视化
  - 路况查询的一下结果为百分比数，通过运用**Bootstrap**进度条的组件，实现数据可视化效果，让用户更加清晰可观道路路况

```HTML

<tr>
    <td  style="width: 200px;text-align: center"><div><h4>车辆畅通</h4></div></td>
    <td>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{ the_row_expedite }}"><span class="sr-only">40% Complete (success)</span></div></div></td></tr>
<tr>
    <td style="text-align: center"><div ><h4>车辆缓行</h4></div></td>
    <td>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{ the_row_congested }}"><span class="sr-only">60% Complete (warning)</span></div></div></td></tr>
<tr>
    <td style="text-align: center"><div ><h4>车辆拥堵</h4></div></td>
    <td><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:{{ the_row_blocked }}"><span class="sr-only">80% Complete (danger)</span></div></div></td>
</tr>
```

效果

![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025222_c92dc7ae_3043318.png "可视化.PNG")

### E.自定义[模块](https://www.runoob.com/python/python-modules.html)、[函数](https://www.runoob.com/python/python-functions.html)
避免**app.py**文件代码臃肿，将api调用的函数代码封装模块，分别为**weather.py**（天气）和**treaffic.py**（路况）

```python
from weather import weather
from traffic import traffic
```

### D.Bug报错
1. [Python经常出现的报错类型](https://www.runoob.com/python/python-exceptions.html)
2. 问题较突出的Bug情况

|Bug报错|原因|解决|
|-|-|-|
|查询结果页404|base.html中已经继承了Bootstrap的基础模板，其他页面重复继承会出现错误|除base.html中的{% extends "bootstrap/base.html" %}外，其他页面改为{% base.html" %}|
|路况查询页404| @app.route('/traffic', methods=['post', 'get'])的代码块至于@app.route('/')@app.route("/login", methods=['get'])的代码块下方出现页面出现404 | 将@app.route('/traffic', methods=['post', 'get'])的代码块至于@app.route('/')@app.route("/login", methods=['get'])的代码块上方 |

## 五、云端项目部署的基本描述
### 使用[Pythonanywhere](https://www.pythonanywhere.com/)部署
1. 压缩项目上传文件

![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025308_05b0def6_3043318.png "压缩.PNG")

2. 生成个人web,生成url

![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025349_fd051d70_3043318.png "web.PNG")

3. 将项目文件传至mysite文件夹中
4. 更改配置文件，让Pythonanywhere部署web时，执行的是项目的程序文件
  - 在web下找到/var/www/secyly_pythonanywhere_com_wsgi.py目录，将Flask_app改为自己的项目程序的.py文件

![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025411_36998eaa_3043318.png "配置.PNG")
  
5. 报错日志
  - 浏览Pythonanywhere系统的日志文件可以找到你在部署网站时的报错信息

![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025428_7e84af58_3043318.png "log.PNG")

### Pythonanywhere所有页面链接（共7个页面）
- **登录页**：http://secyly.pythonanywhere.com/login
- **天气查询页（首页）**：http://secyly.pythonanywhere.com/entry 
  - **天气查询结果页**：http://secyly.pythonanywhere.com/get_weather  (实现api调用才可实现页面) 
- **路况查询页**：http://secyly.pythonanywhere.com/traffic
  - **路况查询结果页**：http://secyly.pythonanywhere.com/get_traffic  (实现api调用才可实现页面) 
- **出行笔记页**：http://secyly.pythonanywhere.com/blog
- **系统日志页**：http://secyly.pythonanywhere.com/viewlog

### 页面功能流程图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025454_709bcc25_3043318.png "网站架构图.PNG")

### 页面结构图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/025508_3230113f_3043318.png "结.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0125/032040_7b82558a_3043318.png "构.PNG")

### 页面功能描述
- **登录页**：输入来访用户名
- **天气查询页（首页）**：输入想查询天气的城市名称，开始调用api，导航可跳转至其他功能也
  - **天气查询结果页**：输出天气查询结果，可返回首页  (实现api调用才可实现页面) 
- **路况查询页**：输入想查询天气的道路所在城市和道路名称，开始调用api，导航可跳转至其他功能
  - **路况查询结果页**：输出路况查询结果，可返回首页  (实现api调用才可实现页面) 
- **出行笔记页**：提供出行笔记，为用户出行提供规划参考
- **系统日志页**：记录输出所有用户的查询结果与请求行为

### 项目的云端功能和部署心得
在本地可实现的功能，在云端部署中不一定能实现，可能会出现数据传输错误，但相对于其他的服务器，如[阿里云](https://cn.aliyun.com/)、[腾讯云](https://cloud.tencent.com/)，pythonanywhere已经自我配置了环境，携带了很多功能模块，同时其文件变及自带语法纠错，且日志系统同样为web部署提供了很大的帮助

## 六、学习/实践心得总结及感谢
- 这一次web部署让我觉得很重要的一点，就是要理清数据流的传输，从api请求得到数据，在清洗之后有传输到前端页面，其中数据字典、[列表](https://www.runoob.com/python/python-lists.html)、提取[字符串](https://www.runoob.com/python/python-strings.html)等等的转化都要清楚把握
- 另外更重要的一点，出现bug时，一定要返回代码仔细查找错漏，很多时候只是一点点的的不一样，就会让结果出现不可控的变化
- 感谢智超老师一个学期的教学

## 七、外部Url链接23个