实践记录

170205

理解卡包内容

作业知识点

本周作业的几个知识点需要了解：

• Html、CSS
• Web框架Flask与浏览器的交互
• 内网可用应用（为什么要强调是内网可用？可以理解为本地服务）

Python下的Web框架

在Web端进行开发重来没有做过，卡包提到了先了解Python下的Web框架，然后运行MVP，这是后续要做的第一件事情。之后的卡包提到建立服务器和网页交互应该是Web框架下的具体应用了，其中的GET和POST方法和Chap3中的API的请求类似，后续继续探索。

Html页面

Html的内容略知一二，卡包中提到了一些模版，应该可以帮助我们更快的完成作业，自己可以琢磨一下。模版与页面美化，现在没有太多想法，可以后面再研究。

代码复用

前几次的代码都是可以复用的，但是Chap3的Review发现其他小伙伴的代码写的更好，准备进行重构。

移动端适配

移动端适配从来没研究过，等初步完成作业后研究。

大作业组队

目前自己还没有特别明确的想法，不过可以先列出来：

• 基于Github的API做一些功能开发
• 做一个开源包发布到PyPI去
• 查询飞机票信息的项目

如果其他小伙伴有更有意思的项目，自己也可以参与进去。

170208

Python下的Web框架

除了Flask，还有哪些框架呢，Google了"python web framework"，排名靠前的结果有WebFrameworks - Python Wiki和Django vs Flask vs Pyramid: Choosing a Python Web Framework相当一部分内容看的不是很明白，所以回到Flask和作业上来，以后再补充相关内容。

Flask

Flask最小的MVP代码实现比较容易实现。下面开始看文档。为啥好的开源项目都有制作如此简洁精良的文档呢，不禁感慨，工作中的IT项目让工程师写个文档简直是要了命了。不知道这是不是一流选手和其他选手的差异之一。

文档中的部分名词解释

• Werkzeug is a toolkit for WSGI（网关）, the standard Python interface between web applications and a variety of servers for both development and deployment
• Jinja2 renders templates
• virtualenv 是文档中建议使用的虚拟环境，自己没有实践过，先留着。

命名规则

做了这么久的作业，准备一次性明确命名规则。

• 知识点实践命名：01_XXX.py
• 正式代码命名：v00.00.py
  • 未发布统一为：v00.XX.py
  • 第一版本统一为：v01.00.py，后续小调整更新小版本
  • 后续正式发布的大版本为：vXX.00.py
• 回顾实践代码命名为：review_XX_XX.py
• 其他文件正常命名即可

170210

前两天因为换工作的事情耽误了，新工作事情多，现在已经是晚上11点了，继续任务，希望可以赶上交作业。

之前内容的补充

之前的代码探索实现了MVP，里面有一个@的符号，之前从来没有见过，自己搜索了一下"when python use character @app"

@符号相关

What does the at (@) symbol do in Python

name相关

What does if name == “main”: do?

170211

Flask

接上上回，从Quick Start开始，复现了文档中给出的案例，有几个注意点：

• 'export FLASK_APP=hello.py'中的FLASK大写，等号两边不能有空格
• 在这一小段代码中出现了之前完全没有见过的编程语法模式，后续注意深入研究，现在先略过继续

路径

Quick Start中Routing部分讲了多个页面的添加方式，通过对不同页面新增函数就可以实现。

案例

官方文档中前几个部分进展比较顺利，直到"HTTP Methods"部分，以及后面静态文件、模版渲染的内容代码无法直接运行，自己貌似缺少了不少的背景知识。所以想找一下已经有的代码案例，Google之"is there an example about flask"。

• frol/flask-restplus-server-example
• What are some open source Flask apps that are good examples for beginners?

• Flask by Example - Project Setup：看了这个，了解到了HeroKu，然后在这个教学网站顺藤摸瓜找到了Caching External API Requests，里面讲到了Github的API接口和Flask的应用，requests可以正常使用后把结果传到Flask模块的代码中再通过服务端进行展示。

• 补充一个还不错的案例The Flask Mega-Tutorial, Part II: Templates

反思

前面进行了大量的搜索，陷入了迷思，需要跳出来再整理一下思路，现在遇到的问题主要有两个，在服务搭起来之后，调用的模版静态文件怎么写文件如何配置，还有在获得了数据之后，如何通过request模块进行API的通信。以目前得到的信息量来看，如果这两部解决了，完成作业应该问题不大。 回到开智课程卡包继续寻找灵感，发现和我的思路是一样的，不过在静态文件的配置之前，可以先简单的写一个HTML的页面，为后续内容做好准备。

HTML

Button

作业视频中看到了Button，谷歌之"how to add button in html"看了一个小视频HTML - How to add a button in HTML 其实就是加入了html的button的标签。

制作页面

注意“不赞成使用的标签和属性“，以后要避免使用，特别是上了CSS之后（目前还没有上CSS，以后可以优化）。

• HTML 布局如果改动一下成为自己的天气预报页面情况会怎样呢，好处是可以实践css和html的框架内容，侧边栏除了可以展示查询的按钮之外，还可以加上热点城市等等内容。根据HTML 布局的说明，一些div的id可以符合h5的规范，所以是不是在移动端适配会有更好的效果？拭目以待。
• HTML 响应式 Web 设计提到了Bootstrap，有点儿懵，先把内容列在这里(w3schools)，继续向下看。
• HTML 脚本提到了JavaScript，并且给出了针对老版本浏览器的兼容处理方案。
• HTML 表单及后面的几个页面的内容帮助自己设计好了大致的页面。但是action还没有处理好。

JavaScript

html并没有解决动态的按钮操作的问题，根据教程可能需要引入php的内容，现在流行的JavaScript也许会帮忙，所以继续向下看JavaScript 教程看到后面感觉应该是可以解决问题的，所以继续研究。

误区

Java、JavaScript（JS）、JSP，三个单词都有特定的含义，注意区分。

点击按钮输出文本

新建了测试文件，尝试点击“帮助按钮”输出文字内容。但是遇到一个问题，如果把输出的字段放到form里，点击按钮之后内容不会一只存在，闪一下就消失了，拿出来就好了，但是格式效果不好，问题后续再优化。还遇到一个问题，点击“帮助”按钮输出的文本内容和前面的内容一起居中对齐的效果很难看，所以暂时巨左，以后再优化。

参数传递

现在还有一个问题，如何在python的代码和js之间进行数据传递。利用已有的pythonAPI代码可以得到结果，但是首先要把页面读到的数据传递给python，最后还要把api的数据传递到页面上。这里如果通了，整个内容应该就问题不大了。谷歌"how to pass value from javascript to flask"发现答案How can I pass data from Flask to JavaScript in a template?和Passing data from javascript into Flask，里面提到的变量传递回到了flask模块本身。

Jinja2

回到Flask的文档，发现Jinja2模块是关键，原来所谓的静态文件渲染，我可以理解为通过Jinja2的沙箱进行值传递的一个方法，这个值传递到html文件中，可以是html或者js直接调用。所以上面提到的参数传递，通过Jinja2模块和模版语言来落地。

相关搜索和查阅的资料如下： How to pass a list from Python, by Jinja2 to JavaScript Template Designer Documentation有语法解释。

170212

明天没有时间研究作业，所以今天一定要完成，接着昨天的内容，从值的传递开始。

Jinja2

英文文档的难度有点高（主要是背景知识欠缺较多，另外没有最佳实践的支撑），转换到中文文档，看了模板设计者文档和使用模板，其中通过用户名密码实现基础传值的案例非常不错，直接用代码实现后，终于有了实践经验。关于值的传递，使用双大括号在模版中设置好后，直接就传递过去了，如果要回传，使用 'username = request.form['username']'类似的request方法即可实现。

解决传值问题

下面开始尝试琢磨自己的作业实践，开始了各种报错的日子：

• 起服务成功，但是http500报错，包render_template没有导入，加入import解决
• js不生效，尚未解决，简单查了一下，应该是会生效的，没有说jinjia2不能用js，预估还是自己写错了
• 传值不成功，单独写的函数一直没有运行，还在找原因
• GET 还是 POST，我是根据使用模板的案例进行改写，增加了print的函数之后，感觉GET是从服务端取内容，POST强调从客户端回传内容，虽然信息的传递是双向的，但是还是会有一些区别。python代码修改后无果，怀疑是模版代码有问题，继续探索。Bingo！问题果然出现在模版代码里对form部分内容的响应方式（action和method）没有定义导致的，再结合python的代码methods的修改，终于传值成功！乘胜追击，尝试回传，之前一直没有达到效果，就是上面说到的js不生效等问题，因为自己的模版里已经按照jinja2的语法修改了值的部分，所以一直很奇怪，结果一次到位，值回传成功。在这一刻，再一次感受到了突破的快乐。

带入逻辑

开新版本v00.02，准备带入逻辑，完成作业。

尝试一下现有的逻辑，还是有问题，在html中可以正常运转的js效果不生效，主要是帮助的信息点击之后无法展示。先继续向下，把核心逻辑写出来，再处理其他问题。首先还是要对输入的内容进行校验，并且尽量保留之前的快捷键的功能。代码不好复用了，只能重写。 测试了一下，函数要么调用，要么渲染，最后结束程序时，必须要渲染模版，否则浏览器端会报错。 初步实现了API调用

优化功能

开新版本v00.03，开始优化功能

• API数据采集增加满足作业要求的风向、温度数据，由于心知天气免费暂不提供风向信息，删减该信息，保留城市、天气、温度数据。
• 增加历史数据记录log，新增前几个版本一直没有优化的功能，检查log文件是否存在，如果不存在，则新建log文件，再写入记录。
  • 如果不做逻辑判断文件是否存在，每一次输入时，都会重写log，不符合要求。但是用“a”就可以，也就是说系统会自动判断，如果没有，自动新建。
  • 最终解决方案是之前用过的办法，每一次启动服务前打开一次log清空，保证log数据不会无限增加。另外，不需要额外检查文件log是否存在，因为不存在会自动新建。
• 增加点击“历史”按钮输出历史记录
  • 之前卡在了html的button如何触发操作上，果断谷歌“how to click html button make flask run”，Python Flask calling functions using buttons和Flask Python Buttons給了启发，button也可以用form来做，这样实现起来比较容易。
  • 打了一个场外求助电话，前端专业人士给的建议是用js写按钮的监听，直接发送请求到服务端。
• 点击“帮助”显示帮助文档（利用js实现）
  • “无意插柳柳成阴”，上一个功能点没有解决完，看到了Flask – Overview，把之前js不生效的问题解决了，不生效是因为代码中的id错误，和服务没有关系。

其他

• 看张诗颖提到的阳老推荐的一个代码的工具
• 安装pycharm来debugger或者其他的调试工具

170213

昨天大妈的评论很在理，反思一下，也许是因为连续两天自己陷在里面，精力和耐力消耗过大。今天重整旗鼓，继续研究。

新版本

在新版本v00.04上继续开发。不一会就完成了。

有时间跟着博客做一下。