# python-weathersearchapp

**Repository Path**: shuimushisan/python-weathersearchapp

## Basic Information

- **Project Name**: python-weathersearchapp
- **Description**: No description available
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-24
- **Last Updated**: 2020-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# python-weathersearchapp

>嗨~欢迎来到天气占卜屋！ 

---  

## 天气查找系统  

利用了<mark>svg、html、python、js</mark>等结合高德API天气查询的功能制作的进行的一个带有<mark>用户日志系统</mark>的天气查询app  

---  

## 使用流程
### 1. 首页开屏

进入天气占卜屋的第一个页面，像类似app的开屏一样，采用与主题一致的各种天气变换的图标，向用户展现网站的作用。
> #### 动态显示
![动态显示](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/homepage.gif)   

> #### 静态显示
![静态显示](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/homepage-jingtai.png)  

- 代码亮点展示：[svg制作页面](https://gitee.com/shuimushisan/python-weathersearchapp/blob/master/templates/home.html)  
- app.py页面  
```
@app.route('/')
@app.route('/entry',methods=['GET','POST'])
def home():
    title = '欢迎来到天气占卜屋~'
    return render_template("home.html",
                           the_title=title,)

```
---
### 2.进入占卜屋

点击按钮则能够链接进入占卜屋，也就是第二个页面，此页面可以开始进行各地天气状况的占卜。并且在选择城市后，可以进行不同天气类型的选择，只要用户喜欢，他们还能选择自己喜欢的页面颜色~

![占卜屋](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/zhanbuwu.png)  
  
- 此处因为是利用同一组数据进行不同端口的链接，百度很多只利用html和python之间数据传递的方法后无果，因此使用了部分的<mark>js代码</mark>。  
- 展示如下:  
> 首先是base.html页面的
```
    <script language=javascript>
    function weather(){
        document.search.action="http://127.0.0.1:5000/weathersearch";
        document.search.submit();
    }
    function temperature() {
        document.search.action = "http://127.0.0.1:5000/temperature";
        document.search.submit();
    }
    function winddirection() {
        document.search.action = "http://127.0.0.1:5000/winddirection";
        document.search.submit();
    }
    function windpower() {
        document.search.action = "http://127.0.0.1:5000/windpower";
        document.search.submit();
    }
    function humidity() {
        document.search.action = "http://127.0.0.1:5000/humidity";
        document.search.submit();
    }
    function quanbu() {
        document.search.action = "http://127.0.0.1:5000/quanbu";
        document.search.submit();
    }
    </script>
```
> 接下来是weathersearch.html页面的  
```
<button class="button" onclick="weather()"/> 天气 </button>
<button class="button" onclick="temperature()"/> 温度 </button>
<button class="button" onclick="winddirection()"/> 风向 </button>
<button class="button" onclick="windpower()"/> 风力 </button>
<button class="button" onclick="humidity()"/> 湿度 </button>
<button class="button" onclick="quanbu()"/> 小孩子才做选择，我全都要知道 </button>
```
---

### 3. 结果页面

当客户选择了自己想要的占卜类型后，点击按钮则会跳转到下一个结果页面。页面有一个<mark>动态的svg图像</mark>，背景色会随着用户选择而进行渐变。同时，表格的边框也会随用户选择的第二个颜色随之变化。  

> #### 动态显示  
![动态](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/jieguo.gif)  

> #### 静态显示  
![静态](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/jieguo-jingtai.png)  

---
### 4. 用户日志系统

用户日志系统集合了用户的使用数据并以表格数据展示，方便后台人员记录与观察，并且与主页面一致采用了渐变风格。  

![viewlog](https://gitee.com/shuimushisan/python-weathersearchapp/raw/master/pic&vid/viewlog.png)  
- 代码如下：  
- app.py页面：
```
@app.route('/viewlog')
def view_the_log() -> 'html':
    """display the contents of thr log file as a html table"""
    contents = []
    with open('weather.log','r') as log:
        for line in log:
            contents.append([])
            for item in line.split('|'):
                contents[-1].append(escape(item))
    len(contents)
    titles = ('用户提交','远程地址','访问代理','用户结果')
    return render_template('viewlog.html',
                           the_title='日志系统后台',
                           the_row_title=titles,
                           the_data=contents)
```  
- 日志系统函数  
```
def log_request(req: 'flask_request',res: str) -> None:
    """log details of the web request and the results."""
    with open('weather.log', 'a') as log:
        print(req.form,req.remote_addr,req.user_agent,res,file=log,sep='|')
```