# 产品设计-寻梦环游记-Flask与pythonanywhere创意网站

**Repository Path**: zhang_jie_lin/python-final-project

## Basic Information

- **Project Name**: 产品设计-寻梦环游记-Flask与pythonanywhere创意网站
- **Description**: 基于Flask与pythonanywhere创意网站
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-19
- **Last Updated**: 2022-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目名称：“再见”
## 项目标题：用轻量级的Web框架结合最流行最强大的Python库，借助Bootstrap网页模板开发出一个小型网站，并部署到Pythonanywhere。
## 项目意义：换一种方式看待死亡
 > ## 死亡不是生命的终点，遗忘才是————[《寻梦环游记》](https://movie.douban.com/subject/20495023/)
 - ### 在你生命中有没有过一个人，从这个世界走的匆忙，你还来不及好好的跟ta告个别，希望在这里，你们可以“再见”。 
 - ### 这是一个关于死亡、遗忘、重逢的网站。我们对于生命的逝去总是很悲伤很沉重，但其实，在天边的ta们一定希望我们想起ta们时，是愉悦温暖的。ta们并没有真正的离开，只要没有被遗忘，ta们就一直鲜活着。 通过黑白照片的修复，我们能看到ta们更真实的样子，ta们一定希望留存在我们脑海里的是ta们最美丽的样子。通过答案之书，跟ta们对话。通过数据的窗户，看到无数个世界上的另一个你，以及每一个希望被记住的亡魂。
 - ### 所以我们需要做的，就是认真跟ta们告别，还有永久的记住ta们。
## 功能框架结构图
 **请点开大图查看** 
![输入图片说明](https://images.gitee.com/uploads/images/2021/0119/203939_3a7a40b6_5329187.png "页面流程图2.png")
# 问题描述
## 用户画像
![输入图片说明](https://images.gitee.com/uploads/images/2021/0119/212418_5e955955_5329187.png "用户画像.png")
## 价值主张画布
![输入图片说明](https://images.gitee.com/uploads/images/2021/0119/212505_b5af4e70_5329187.png "价值主张.png")
# 解决方案表述
## 整体项目规划基本描述
### 规划过程：找到要解决的问题——>对应问题的功能——>实现功能需要的Python知识点
![输入图片说明](https://images.gitee.com/uploads/images/2021/0119/235738_226113cb_5329187.png "知识图谱.png")
## 编程功能的基本描述
* 关于函数、列表、字典等基本知识点，[点击这里](https://gitee.com/zhang_jie_lin/python-interim-knowledge-point)，是基础知识点的总结
### API  占比%10
- ### 优化使适应项目情况：【难度:star: :star: :star: :star: :star: 】
    - 由于项目部署在云端，将原来【提交图片——>经过API返回图片——>存到本地文件夹——>用本地url在html页面打开】改为【提交图片外部链接——>转化为64进制编码——>经过API返回64进制编码——>由64进制编码在网页渲染成图片】
    ```
    def repic(url):
        '''黑白图像上色'''
        request_url = "https://aip.baidubce.com/rest/2.0/image-process/v1/colourize"
        access_token = '24.1a48279a4bee98289e66edee0b655e94.2592000.1612973336.282335-23527384' #'[调用鉴权接口获取的token]'，每个账号不一样，且每30天需要重新拉取【现1.18日】
        obtain=requests.get(url)
        transform=obtain.content
        img = base64.b64encode(transform) # 将黑白图片的外部链接转为64编码
        params = {"image":img}
        request_url = request_url + "?access_token=" + access_token
        headers = {'content-type': 'application/x-www-form-urlencoded'}
        response = requests.post(request_url, data=params, headers=headers)
        base64_str = response.json()  # 得到彩色照片的64编码
        return base64_str
    ```
### 数据库 占比%15
- #### 用于实现登录的功能
- #### 学习成本：
    - 安装mysql数据库【难度:star: :star:】
        - 参考网络文章，[我的踩坑文章](https://blog.csdn.net/ruthywei/article/details/78433074)
    - 在数据库里增加信息，在这里可以简化为手动添加（因为是测试号，还未添加注册功能）【难度1】
    - Flask项目链接数据库【难度:star: :star: :star: :star: :star: :star: :star:】
        - 在每一个使用到数据库的.py文件中需要： `from pymysql import connect`
        - 函数1——查询：  
           ```
            def look_over():
                con = connect(host="127.0.0.1",port=3306,user="root",password="自己数据库的密码",db="user") 
                cursor1 = con.cursor()
                sql = "select * from student"
                cursor1.execute(sql)
                res = cursor1.fetchall()
                print(res)
                return res
            ```
        - 函数2——判断：  
           ```
            def panduan_login(name, password):
	        """判断用户输入的账号密码是否在数据库中有对应值"""
        	for item in login_information:
        		print(item)
        		if item[1] == name and item[2] == password:
        			return "true"

            def panduan_liebiao():
            	a = login_information
            	return a
            
            ```
        - 函数2——登录：  
           ```
            @app.route('/start',methods=['POST'])
            def start():
                """登录-数据库"""
                Name = request.form.get("inputName")
                Password = request.form.get("inputPassword")
                print(Name,Password) 
                a = panduan_login(Name, Password)
                print(a)
                log_request(request,a)  # 链接日志系统
                if a == "true":
                    student_title = ["id","student_name","gender","class"]
                    res=look_over()
                    return render_template('start.html')
                else:
                    return "登录失败"
            ```
### 条件语句 占比10%
- #### 用于登录功能（如上）【难度:star: :star: :star:】
- #### 用于列表的遍历
- #### 用于HTML中数据绑定的表格呈现【难度:star: :star: :star:】
    ```
    <div class="row">
            <div class="col-md-6">
              <table class="table" border="1">
                  <tr>
                      {% for item_title in the_title %}
                    <td>{{ item_title }}</td>
                      {% endfor %}
                  </tr>
                  {% for item in the_data %}
                  {% for i in item %}
                  <tr>
                      {% for j in i %}
                    <td>{{ j }} </td>
                      {% endfor %}
                  </tr>
                  {% endfor %}
                  {% endfor %}            
              </table>
            </div>
      </div>      
    ```
### 列表 占比30%
- #### 增、改、删、查【难度:star: :star: :star:】 
- #### 切片【难度:star: :star: 】

### 函数 占比30%
- #### python自带函数【难度:star: :star: :star: :star: :star: 】
    - 学习成本：确定需要的功能——找到对应的函数或方法——网络搜索该函数的用法用例
    ```
    from flask import Flask, render_template, request,jsonify,escape,url_for
    from pymysql import connect # 数据库
    from werkzeug.utils import secure_filename # 使用这个是为了确保filename是安全的
    from os import path
    import requests
    import base64
    import matplotlib.pyplot as plt # plt 用于显示图片
    import matplotlib.image as mpimg # mpimg 用于读取图片
    import pandas as pd 
    import lxml
    # 导入自己写的函数
    from panduan import panduan_login
    from function import repic,answerbook
    from death import total_death,yunfu_death,baby_death
    
    # 全局取消证书验证
    import ssl
    ssl._create_default_https_context = ssl._create_unverified_context
    
    # 设置最大深度 10的5次方
    import sys
    sys.setrecursionlimit(10**5)  
    ```
- #### 自定义函数【难度:star: :star: :star: :star: 】
    - 学习成本：了解封装函数的格式——PEP8代码要求 
    - 调用API封装成函数:
    ```
    def repic(url):
    '''黑白图像上色'''
    request_url = "https://aip.baidubce.com/rest/2.0/image-process/v1/colourize"
    access_token = '24.1a48279a4bee98289e66edee0b655e94.2592000.1612973336.282335-23527384' #'[调用鉴权接口获取的token]'，每个账号不一样，且每30天需要重新拉取【现1.18日】
    obtain=requests.get(url)
    transform=obtain.content
    img = base64.b64encode(transform) # 将黑白图片的外部链接转为64编码
    params = {"image":img}
    request_url = request_url + "?access_token=" + access_token
    headers = {'content-type': 'application/x-www-form-urlencoded'}
    response = requests.post(request_url, data=params, headers=headers)
    base64_str = response.json()  # 得到彩色照片的64编码
    return base64_str
    ```
    - “答案之书”函数：
    ```
    def answerbook():
    '''仿答案之书，对用户的问题随机生成一个答案。【答案数据来源网络】'''
        answer_all = ["找个人给你意见","算了吧","请教你的妈妈","当然咯","谁说得准呢，先观望着","千万别傻","保持你的好奇心，去挖掘真相","把心揣怀里","答案在镜子        里","不","这事儿不靠谱","天上要掉馅饼了","有好运","要有耐心","你需要知道真相","还有另一种情况","观望","别让它影响到你","是","信任","列个清单","时机不对","照你想的那样去做","量力而行","但行好事，莫问前程","抛弃首选方案","走容易走的路","最佳方案不一定可行","不会作就不会死","试试卖萌","借助他人的经验","再多考虑","注意细节","说出来吧","不要犹豫","机会稍纵即逝","制订了一个新计划","GO","谁都不能保证","情况很快就会发生变化","不要陷得太深","转移你的注意力","至关重要","告诉自己什么是最重要的","为什么不","别傻等了","不要忘记","为什么不呢","去解决","寻找更多的选择","上帝为你关一扇门，必定会为你打开一扇窗","随波逐流未必是好事","问天问大地，不如问自己","你就是答案","去争取机会","改变不了世界，改变自己","主动一点，人生会大不相同","学会妥协","掌握更多信息","相信你最初的想法","勿忘初心，放得始终","扫除障碍","把重心放在工作/学习上","培养一项新的爱好","对他人慷慨","不放赌一把","去做其他的事情","观察形势","休息，休息一会","这是你最后的机会","再考虑一下","并不明智","等待更好的","很快就能解决","重要","是的","采取行动","去做","不要过火","事情开始变得有趣了","保存你的实力","这是一定的","不确定的因素有点多","结果不错","你可能不得不放弃其他东西","不要犹豫","不需要","去倾诉","告诉别人这对你意味着什么","无论你做何种选择，结果都是对的","保持头脑清醒","制定计划","很麻烦","克服困难","实际一点","你需要一点帮助","协作","需找更多的选择","负责","阻止","你必须现在就行动","遵守规则","坚持","你不会失望的","需要花费点时间","不要迫于压力而改变初衷","显而易见","不雅忽略身边的人","抗拒","不值得斗争","玩得开心就好","毋庸置疑","你也许会失望","去改变","一个强有力的承诺会换回更好的结果","也许有更好的解决方案","不要害怕","想法太多，选择太少","是的","一笑而过","取决于你的选择","随TA去","你需要考虑其他方面","一年后就不那么重要了","醒醒吧，别做梦了","意义非凡","默数十秒再问我","去行动","发挥你的想象力","对的","为了确保最好的结果，保持冷静","等待","你必须弥补这个缺点","你会后悔的","毫无疑问","当然","现在比以往任何时候的情况都要好","相信你的直觉","这是一个机会","去问你爸爸","从来没有","寻找一个指路人","去尝试","没有","错的","别不自量力","荒谬","不赌","不值得冒险","不妥协","关注你的家庭生活","肯定","不可预测","绝对不","我确定","尽早完成","令人期待的事情马上要发生","你需要适应","表示怀疑","它会带来好运","要有耐心","看看会发生什么","记录下来","不宜在这个时候","决定了就去做","别要求太多","放弃第一个方案","HOLD不住","谨慎小心","注意细节","注意身后","不要犹豫","继续前进","情况很快就会发生改变","不要被情绪左右","转移注意力","着眼未来","问自己什么是最重要的","不要等了","保持乐观","没有更好的选择","列出原因","抓住机会","改变自己","你需要主动","妥协","有比这更重要的东西","你需要掌握更多的信息","删除记忆","能让你快乐的那个决定","你需要考虑其他方面","你会后悔的","毫无疑问","当然","相信自己的直觉","这是一个机会","形势不明","先让自己休息","重新考虑","不明智","抓住机会","等待机会","不要做得太过分","保持现状","不要忧虑","有意料之外的事会发生，不妨等待","你会失望的","花更多的时间来决定","你开心就好"]
        answer = answer_all[random.randint(0, 209)]
        return answer
    ```
### 文件处理 占比10%
- #### 用于日志系统：【难度 :star: :star: :star:】
    ```
    # 日志系统
    def log_request(req:"flask_request",res:str) -> None:
        with open("view.log","a") as log:
            print(req.form,req.remote_addr,req.user_agent,res,file=log,sep='|')
    ```
    
### 数据抓取 占比15%
- ### pandas抓取网页表格数据【难度 :star: 】
    ```
    pd.read_html('https://www.cia.gov/the-world-factbook/field/death-rate/country-comparison')
    ```

### 数据分析 占比30%
- ### 提取需要的数据信息：使用列表的查找与切片【难度:star: :star:】
    ```
    def total_death():
        """数据来自cia官网，比较了各国的死亡率"""
        total_ = pd.read_html('https://www.cia.gov/the-world-factbook/field/death-rate/country-comparison')[0]
        title = total_.columns.tolist() 
        content = []
        for i in range(21): # 有21行数据，将其每一个遍历进一个列表
            content.append(total_[i:i+1].T[i].tolist())
        return title,content
    ```
- ### 可视化图表：
     - pyecharts的使用【难度:star: :star: :star:】
    ```
    import pyecharts.options as opts
    from pyecharts.charts import Line
    from pyecharts.faker import Faker
    import pandas as pd 
    
    yf = pd.read_html('https://www.cia.gov/the-world-factbook/field/death-rate/country-comparison')[0]
    
    
    x = yf["Country"].tolist()
    y = yf["deaths/100,000 live births"].tolist()
    
    c = (
        Line()
        .add_xaxis(x)
        .add_yaxis("xxx", y, is_connect_nones=True)
        .set_global_opts(title_opts=opts.TitleOpts(title=""))
        .render("templates/vis1.html")
    )
    ```
### 云端部署 占比10%
- #### pythonanywhere【难度:star: :star: :star: :star: :star: :star: :star: :star:】

## 云端项目部署的基本描述
### 带数据流程的页面功能流程图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0120/104323_59bf6eb1_5329187.png "页面流程图 的副本.png")
### 个人编写的函数数据流程图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/145243_0c3362be_5329187.png "流程图1.png")
### 主要页面展示及功能介绍：
#### [首页](http://kalyn.pythonanywhere.com/)
##### 网址：http://kalyn.pythonanywhere.com/
##### 介绍：
    * 氛围感的网站封面和简短的文字——说明网址内容，激发用户可欲性
    * 按钮——登录跳转，位置突出（那么大个封面明晃晃一个按钮我就不信你不想点）
##### 展示图：![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/095130_c1a15cfd_5329187.png "屏幕截图.png")


#### 登录页
##### 网址：http://kalyn.pythonanywhere.com/login【请先登录】
##### 介绍：
    * 没啥好说的，登就完事
##### 展示图：![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/102530_95c39b8d_5329187.png "屏幕截图.png")


#### 开始页
##### 网址：http://kalyn.pythonanywhere.com/start【请先登录】
##### 介绍：
    * 点明主题，提到“死亡”“告别”
    * 三个功能模块的简短引语，提高用户可欲性
    * 按钮——跳转三个功能页面
    * 顶部导航栏——可点击跳转至日志界面或返回首页
##### 展示图：![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/105928_f5dde36e_5329187.png "屏幕截图.png")


#### 全球各国死亡统计-数据分析
##### 网址：http://kalyn.pythonanywhere.com/part1【请先登录】
##### 介绍：
    * 轮播图，点击每个轮播页的按钮显示根据各自主题制作的数据可视化【折线图】网页
    * 三个子主题的介绍，点击介绍文字下方的按钮跳转至各主题网页
##### 展示图：![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/105917_3ed7a7ba_5329187.png "屏幕截图.png")




#### 主题页-举例为‘全球死亡率’的主题页
##### 网址：http://kalyn.pythonanywhere.com/death_total【请先登录】
##### 介绍：
    * 说明页面主题与统计算法
    * 爬取[美国中情局CIA官网](https://www.cia.gov/the-world-factbook/field/death-rate/country-comparison)的公开数据，可视化为表格
    * 按钮——点击显示借助pyecharts制作的折线图
##### 展示图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/111611_34894d0d_5329187.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/111643_305a74a9_5329187.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/115104_230de07d_5329187.png "屏幕截图.png")



#### 照片修复
##### 网址：http://kalyn.pythonanywhere.com/up【请先登录】，http://kalyn.pythonanywhere.com/showpic 【请先登录】
##### 介绍：
    * 用户输入黑白图片链接，点击提交，修复为彩色图片
    * [示例黑白照片原图](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1949907219,264756681&fm=26&gp=0.jpg)
##### 展示图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/112749_0da75fbe_5329187.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/113251_a168cd93_5329187.png "屏幕截图.png")



#### 答案之书
##### 网址：http://kalyn.pythonanywhere.com/ask【请先登录】，http://kalyn.pythonanywhere.com/answer【请先登录】
##### 介绍：
    * 用户输入想问的问题（对ta说的话），得到禅意的回复。
##### 展示图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/113828_c5588607_5329187.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/114124_0e0f1d81_5329187.png "屏幕截图.png")



### 云端部署心得：
#### [有帮助的文章](https://blog.csdn.net/qq_36264495/article/details/82666309?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control)
#### 出现了什么问题：
首先感谢你看到这里，如果你访问了我在pythonanywhere中部署的flask项目网址的话，你应该发现有部分网页打不开，比如应该显示爬虫数据表格的页面以及调用API转化为彩色照片的页面。
#### 为什么出现这个问题：
[图片上传失败(image-uMK9lEHaSvRWQcGtix90)]
为什么呢？  
因为， **pythonanywhere不允许普通用户连接白名单以外的网站。** 
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/134804_3d5955e6_5329187.png "屏幕截图.png")
在无数次的搜索问题解决方法的时候，我看到了这个，突然醒悟。   
打不开的页面1【爬虫数据可视化为表格】：  
在运行该功能的代码时，需要连接CIA的官网，举例代码如下图：

```
import pandas as pd
import lxml

def total_death():
    """数据来自cia官网，比较了各国的死亡率"""
    total_ = pd.read_html('https://www.cia.gov/the-world-factbook/field/death-rate/country-comparison')[0]
    title = total_.columns.tolist() 
    content = []
    for i in range(21): # 有21行数据，将其每一个遍历进一个列表
        content.append(total_[i:i+1].T[i].tolist())
    return title,content

```

打不开的页面2【转化为彩色照片】:
* 小插曲，实现该功能需要调用开放API接口，但问题不处于此（开始我就以为问题出在这里），因为如果调用的API接口不在pythonanywhere默认的白名单中，可以以邮件的形式告知他们，工作人员会给你回复，他们会让你提供该API的官方文档链接，在确认有效合法后，会把它加入到你的白名单里。（别问我为什么知道，因为我跨时差发了两天的英文邮件）
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/134952_ac043ec5_5329187.png "屏幕截图.png")
* 真正原因：工作人员回复我，已经添加道白名单后，我发现网页依旧打不开，我突然想起来，在运行过程中还有一处需要连接到外部链接的地方。就是在提交照片时，用户提交的是照片的网页链接，需要访问的是这张照片的链接，就是这里出了错误。
* 在再次发邮件请求过后，很遗憾，他们不允许加入除了API以外的链接进入白名单。
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/135018_57e159c9_5329187.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0123/135104_c473089c_5329187.png "屏幕截图.png")


#### 最后：经过测试，我的falsk项目可以在主机上运行完整，也就是说代码无误。（实在是没料想到pythonanywhere会有这种限制，很遗憾做了这么久的项目不能完美的展示）很抱歉不能让你便捷的直接打开网页链接就体验到我的小网站（非常抱歉），如果你对“再见”还感兴趣的话，欢迎下载源码到本地，完整的体验它。（如果你能理解，我会很感激，非常感激！）
# 学习/实践心得总结及感谢
## 说点什么：
学习Python是完全从0开始的，从一点点的害怕到一点点的兴趣之间有不短的一段路，非常感谢在这段路上帮助过我的老师【鸽鸽老师对我们太有耐心了！】、同学【我的同学们都很优秀！ 】、当然还有伟大的互联网和菜但不放弃的自己。 
在学习Python的路上，我认为对我帮助最大的有两点。
第一是“多花时间在它身上”。谈到时间大家都普遍联系一个词，“效率”。我认为在我们现在的情况下——一个电脑编程的新手，其实用不着去考虑事半功倍还是事倍功半的问题。因为编程很特殊，很多情况下两三天都解决不了一个小小的报错，不能简单的用时间成本来计算效率。很多人会对它害怕，我认为时间就是克服恐惧最好的办法，时间让我跟Python之间熟悉起来，它开始变得像我的伙伴，一个可以帮助我实现想法的伙伴（“死亡不是终点遗忘才是”，这句话非常非常触动我，这次可以把它拓展成为一个“实物”我很开心）。  
第二是“利用好网络”，互联网真的很伟大O,那么多的网友在CSDN、简书、脚本之家这样的平台上，写文章总结经验、提问和回答。你很大概率不是第一个遇到这个报错的人（即使你很绝望但你绝对不孤单）。如果恰巧没有人回答，那么也还有办法，有太多的开源代码可以让我们参考和借鉴。这个行业的分享精神实在太酷。  

## 踩坑/参考链接：
* [答案之书的答案数据来源](https://github.com/D1N910/answers-of-my-life)
* [关于用户画像](https://zhuanlan.zhihu.com/p/36395328?from_voters_page=true)
* [百度照片修复API文档](https://cloud.baidu.com/doc/IMAGEPROCESS/s/Bk3bclns3)
* [css div居中问题](https://blog.csdn.net/learning_web/article/details/89602364)
* [HTML input美化](https://www.cnblogs.com/w3cdream/p/4995164.html)
* [网站封面背景图](https://www.pexels.com/zh-tw/photo/4913514/)
* [python转换url对应的图片为base64](https://blog.csdn.net/abc15766228491/article/details/78901336)
* [pyecharts的折线图示例](https://gallery.pyecharts.org/#/Line/temperature_change_line_chart)
* [CIA官网](https://www.cia.gov)
* [html代码 文字漂浮于图片上面](https://zhidao.baidu.com/question/1732100550521582267.html)8 
* [求问maximum recursion depth exceeded怎么解决](https://zhidao.baidu.com/question/328134112975653325.html)
* [发现python不允许访问外部链接](https://blog.csdn.net/qq_41228872/article/details/78678055)
* [Flask中如何实现文件的上传](http://ddrv.cn/a/200609)
* [有关pandas](https://www.jianshu.com/p/840ba135df30)
* [图片修复和答案之书 修改自我的上一个原创flask项目](https://gitee.com/zhang_jie_lin/python_flaskweb)
以上链接真的帮了一个卑微的小白很多，感谢互联网 :pray: