简易网页搭建小记

学校课程作业，制作一个移动气象站，要在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，并在阿里云的安全组中打开对应端口，即可在对应地址显示网页。