简易网页搭建小记
学校课程作业，制作一个移动气象站，要在web端监视数据，经过断断续续一学期的制作终于过了检验，这篇博客是我搭建网页的简单过程记录。下文不涉及网页绘制代码，只讲述搭建步骤。
准备
| 材料 | 作用 |
|---|---|
| flask | 已支持py3 |
| python3/anaconda | anaconda是一个python虚拟环境工具，你可以用它为不同的工程创建特定的python环境，避免依赖冲突。直接在系统上装python3则更简单一点。 |
| 阿里云 | 用于加入公网，除了学生版都挺贵 |
| 网页模板 | 快速得到精美的网页，没必要自己画 |
步骤
构建本地工作目录
目录命名比较清楚，其中css保存网页样式，js保存脚本，templates保存html文件（调用css和js下的文件以完成样式和效果）。
如果你使用网页模板，模板的结构可能跟我不一样，建议改一下。
创建基本文件
- 创建./run.py
#-*- coding:utf-8 -*-
from app import app
app.config.update(dict(
SECRET_KEY="powerful secretkey",
WTF_CSRF_SECRET_KEY="a csrf secret key"
))
app.run(host="0.0.0.0",port=2333)最后一行的参数，host是“主机地址”，填0.0.0.0可以暴露给外网，填localhost只能本地回环访问，对于没加入公网的主机，哪个都一样，port是端口。另外加入debug=True可以开启调试模式。
- 创建./app/init.py
#-*- coding:utf-8 -*-
from flask import Flask
app = Flask(__name__)
from app import views- 创建./app/views.py
#-*- coding:utf-8 -*-
from app import app
from flask import render_template,flash,redirect
from forms import SearchForm#表单模块
@app.route('/', methods = ['GET','POST'])#表示地址在/，接受get、post两种方法的请求。
def index():
form = SearchForm()#生成表单
return render_template('index.html',form = form)#表单传入view.py是包含视图函数的文件，里面定义的index()用于响应客户端请求。文件中表单有关的东西（注释）都是非必需的，只是一个如何修改视图函数的示例，但通常视图函数远比这里示例的复杂，而且不止一个函数，取决于你的设计。具体看教程。如果你学完了所有教程大概不用再往下看了。
修改网页样式
把找到的网页模板的文件按类型分类存放。一般网页模板已经分类放好了，但是可能跟我们想要的不一样。
| 类型 | 路径 | 作用 |
|---|---|---|
| .html | ./app/templates/ | 基本的布局文件，网页主体绘制都在这里完成。因为html是静态的，没有变量等概念，所以需要很多东西来辅助实现动态效果。 |
| .css | ./app/static/css | 用于修改html中一些控件的属性，使之更灵活和丰富 |
| .js | ./app/static/js | 添加一些动态效果，比如图表动态绘制。 |
| 字体文件 | ./app/static/fonts | 不同计算机、浏览器安装的字体都不一样，提供字体文件可以让网页的显示效果稳定一点。 |
| 图片 | ./app/static/images | 背景图片等存放位置。 |
html文件里常常插入脚本、使用特殊的逻辑控制语句、从render_template函数中传入自定义的变量等，是最杂乱的。css、js也都需要学习对应的语法。建议能利用模板的话就不要自己写了，如果要改请参考教程。
调试网页效果
在anaconda虚拟环境下安装flask：
conda create -n flask python=3.6#创建名为flask的虚拟环境
pip3 install flask#安装flask或者直接装：
pip3 install flask#安装flask运行网页（注意在./下）：
python3 run.py在浏览器中打开localhost:2333，可以看到网页渲染后的效果。之后的调试都在这里参考效果。有两种调试方法：
- 修改本地文件后运行网页
即每次修改之后重启网页（但有些修改不需要重启即可看到更新），在浏览器中查看。注意有些浏览器会缓存部分网页内容，如样式，导致修改后的代码不能被执行，可以进入该浏览器的开发者模式，关闭缓存功能。
如果你开启了flask的调试功能，在出现一些重要错误如下标越界时，网页会显示错误堆栈，而不是单纯报错。另外开发者模式也可以提供一些额外的信息。 - 在浏览器的开发者模式下调试
有些浏览器支持直接修改代码并更新显示。但不会同步到源文件。
搭建数据库
到上一步为止，网页已经基本完成了。因为我做的是数据监视，需要存取数据，所以还搭了一个mysql数据库。其实数据库的操作和网页是可以完全割离的。比如我自定义一个database类用于操作数据库，那么只要在views.py中调用相关函数获得结果，并传入render_template()即可。换句话说，有什么想添加的模块，最后都可以通过views.py对接到网页上。
部署到阿里云
上传代码
scp -r gen/ usr@address:/destination关闭debug模式，把host改为0.0.0.0，和本地一样运行run.py，并在阿里云的安全组中打开对应端口，即可在对应地址显示网页。