序
前面介绍过网页html的一些技术实现和大体架构，但对于后端boy，还是不太想计较那么多html方面的事，所以想把注意力集中回原先的python体系。针对简单的html的动态生成和一些个底层tcp/udp乃至上层http连接，都不用关注，只需要编写对应的接口响应函数，这种技术叫做WSGI，Web Server Gateway Interface。通常编写样式都是这样：
def application(environ, start_response):
start_response('200 OK', [('content-type', 'text/html')])
return [b'<h1>Hello, wsgi!</h1>']
这么一个接口就编写完毕，但还需要进行调用，另有一个python内置了的WSGI的服务实现，叫wsgiref，可以通过这个库来调用自己编写的WSGI接口，如下：
from wsgiref.simple_server import make_server
# 引入自己编写的接口
from wsgiapp import application
# 实现一个监听8080端口、引用application自定义接口处理的server对象
httpd = make_server('', 8080, application)
print('servint http on port 8080...')
# 持续跑起来
httpd.serve_forever()
和很多程序一样，想要让它停止，就crtl+c(windows)，linux就用crtl+z来终止运行。
如上就是简单的WSGI的web app效果，不用自己编写html，它会动态生成html，客户在浏览器访问127.0.0.1:8080/就可以得到服务，当然127.0.0.1就决定了客户只能是本机PC了，哈哈哈。
重写一下application，使其功能丰富点：
def application(environ, start_response):
start_response('200 OK', [('content-type', 'text/html')])
# 读取url中传入信息，再构造响应
body = '<h1>Hello, {}!</h1>'.format(environ['PATH_INFO'][1:] or 'web')
return [body.encode('utf-8')]
上面的框架还是比较的难维护，因为上面还没添加请求方式和不同路由的判断就还是比较简短，所以现在大多数都是用的比较流行的web框架。
一、轻便的flask
flask的使用，和上面的比较相似，都是编写对应的接口处理函数，但在使用形式上还是有差异，毕竟flask作为轻便式实现，提供了许多便利的装饰器，使用前准备：
pip install flask
from flask import Flask
app = Flask(__name__)
@app.route('/')
def sayhello():
return 'Hello, web!'
if __name__ == '__main__':
app.run()
上面flask的代码实现了和最初始的web页面一样的效果，都是简单输出h1标签对应样式的hello，一开始就定义了app对象，其后的路由定义都是在app的route装饰器进行，定义完处理函数后，就run，大致就是这么个流程，如果是命令行跑起来，就需要强行要求脚本命名为app.py，如果想要自定义运行端口、ip等参数，就需要在run函数中传参了。
@app.route('/<name>')
def sayhi(name):
return '<h1>welcome, {}</h1>'.format(name)
嗯，简单实现就这样，再来多点。
1.1 flask的各种接口的实现
一个登录页面的实现
from flask import Flask
from flask import request
app = Flask(__name__)
@app.route('/')
def index():
# 下面的html是一个用户登录页面的实现，form标签的action属性指明了请求url，method指定请求方法
return """<form action="sign" method="post" style="text-align: center;">
<p>用户名：<input name="username"></p>
<p>密码：<input name="password" type="password"></p>
<p><button type="submit">sign in</button></p>
</form>"""
@app.route('/sign', methods=["POST"])
def sign():
# 如果是admin用户且密码为admin就返回登录后页面，否则回应登录失败。
if request.form['username'] == 'admin' and request.form['password'] == 'admin':
return '<h1>Welcome to the first page!</h1>'
return '<h1>Failed in Authentication</h1>'
if __name__ == '__main__':
app.run()
效果如下：
一个图片上传实现
from flask import jsonify
from flask import redirect
import os
app.config['UPLOAD_FOLDER'] = 'upload'
@app.route('/')
@app.route('/home')
def home():
return """<form action="upload" enctype="multipart/form-data" method="post">
<input type="file" name="fiiii">
<input type="submit" value="上传">
</form>"""
@app.route('/upload', methods=["POST"])
def upload():
if not os.path.exists('upload'):
os.makedirs('upload')
f = request.files['fiiii']
print(app.config['UPLOAD_FOLDER'], f.filename)
upload_path = os.path.join('upload', f.filename)
f.save(upload_path)
if os.path.exists(upload_path):
return jsonify({'errno':0, 'msg':'上传成功'})
else:
return jsonify({'errno':110, 'errmsg':'上传失败'})
关于save接口，最好拼接好保存文件名再传给save参数，不然容易出现permission error，另外就是jsonify返回响应信息中文乱码的问题，有介绍app.config['JSON_AS_ASCII'] = False可以，但不管用。加点东西，上传图片成功后就显示图片：
@app.route('/upload', methods=["POST"])
def upload():
if not os.path.exists('upload'):
os.makedirs('upload')
f = request.files['fiiii']
print(app.config['UPLOAD_FOLDER'], f.filename)
upload_path = os.path.join('upload', f.filename)
f.save(upload_path)
if os.path.exists(upload_path):
return redirect('show/{}'.format(upload_path))
else:
back_msg = {'errno':110, 'errmsg':'上传失败'}
return jsonify(back_msg)
@app.route('/show/<name>')
def display(name):
html = '<img src="{}" alt="{}" height="400", width="auto">'.format(name, name.split('\\')[-1].split('.')[0])
print(html)
return html
但在上传成功后返回图片页面，但直接构造html img的办法好像不管用，还是要手动来构造响应，或者使用template，返回构造的html模板页面。在项目中创建templates文件夹并放置下面index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<img src="{{path}}", alt="{{alt_name}}", height="400", width="auto"/>
</body>
</html>
接口的return语句修改一下
from flask import render_template
@app.route('/upload', methods=["POST"])
def upload():
if not os.path.exists('upload'):
os.makedirs('upload')
f = request.files['fiiii']
upload_path = os.path.join('upload', f.filename)
f.save(upload_path)
if os.path.exists(upload_path):
return render_template('index.html', path=upload_path, alt_name=f.filename.split('.')[0])
else:
back_msg = {'errno':110, 'errmsg':'上传失败'}
return jsonify(back_msg)
不过这样也不行，总是在get请求图片的时候失败，不知道为什么，单独构造html的时候也没问题啊，难受，只能用构造response的方法了。
@app.route('/upload', methods=["POST"])
def upload():
if not os.path.exists('upload'):
os.makedirs('upload')
f = request.files['fiiii']
upload_path = os.path.join('upload', f.filename)
f.save(upload_path)
if os.path.exists(upload_path):
with open(upload_path, 'rb') as f:
response = make_response(f.read())
response.headers['content-type'] = 'image/png'
return response
else:
back_msg = {'errno':110, 'errmsg':'上传失败'}
return jsonify(back_msg)
百度了不少，对口答案太少了，后面根据日志输出确定了图片的获取是会另外请求，而没有编写这个路由就导致了图片的html加载不完全：
@app.route('/upload', methods=["POST"])
def upload():
f = request.files['fiiii']
name = f.filename
upload_path = os.path.join('upload', name)
f.save(upload_path)
if os.path.exists(upload_path):
return render_template('index.html',
path=name,
alt_name=name.split('.')[0])
else:
back_msg = {'errno':110, 'errmsg':'上传失败'}
return jsonify(back_msg)
# 错开一点，防止同名路由访问，顺带还需要修改一下index.html
@app.route('/img/<name>')
def send_file(name):
with open('upload/'+name, 'rb') as f:
response = make_response(f.read())
response.headers['content-type'] = 'image/png'
return response
因为index.html中设定img的src来源为upload_path，也即是upload/pic路径，所以要针对性写一个这样的url路由，这就是send_file的来源。
本地测试html总让我有种错觉就是，html和内部的img是一体的，这个习惯要改一改。功能能跑了，完善一下，只允许图片的上传，并且根据jinja2语法加个判断，因为gif和普通图片的img属性略有不同，再修改一下样式使得它居中：
from flask import Flask
from flask import request
from flask import jsonify
from flask import render_template
from flask import make_response
import os
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'upload'
app.config['JSON_AS_ASCII'] = False
ALLOW_PICS = ['png', 'jpeg', 'jpg', 'PNG', 'JPG', 'JPEG', 'gif', 'GIF']
@app.route('/sign')
def sign():
# 下面的html是一个用户登录页面的实现，form标签的action属性指明了请求url，method指定请求方法
return """<form action="sign" method="post" style="text-align: center;">
<p>用户名：<input name="username"></p>
<p>密码：<input name="password" type="password"></p>
<p><button type="submit">sign in</button></p>
</form>"""
@app.route('/sign', methods=["POST"])
def signin():
# 如果是admin用户且密码为admin就返回登录后页面，否则回应登录失败。
if request.form['username'] == 'admin' and request.form['password'] == 'admin':
return '<h1>Welcome to the first page!</h1>'
return '<h1>Failed in Authentication</h1>'
@app.route('/')
@app.route('/home')
def home():
return """<form action="upload" enctype="multipart/form-data" method="post">
<input type="file" name="fiiii">
<input type="submit" value="上传">
</form>"""
@app.route('/upload', methods=["POST"])
def upload():
f = request.files['fiiii']
name = f.filename
upload_path = os.path.join('upload', name)
if f and name.split('.')[-1] in ALLOW_PICS:
if 'gif' or 'GIF' in name:
is_gif = True
else:
is_gif = False
f.save(upload_path)
if os.path.exists(upload_path):
return render_template('index.html',
is_gif = is_gif,
path=upload_path,
name=name.split('.')[0])
else:
jsonify({'errno':1101, 'errmsg':'failed in saving'})
else:
return jsonify({'errno':110, 'errmsg':'failed to upload, check the format'})
@app.route('/upload/<name>')
def send_file(name):
with open('upload/'+name, 'rb') as f:
response = make_response(f.read())
response.headers['content-type'] = 'image/png'
return response
if __name__ == '__main__':
app.run()
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
{% if is_gif %}
<div style="text-align:center;"><img src="{{path}}", alt="{{name}}", height="400", width="auto" loop="true" autoplay="true"/><p>{{name}}</p></div>
{% else %}
<div style="text-align:center"><img src="{{path}}", alt="{{name}}", height="400", width="auto"/><p>{{name}}</p></div>
{% endif %}
<br/>
<form action="upload" enctype="multipart/form-data" method="post" align="center">
<input type="file" name="fiiii">
<input type="submit" value="上传">
</form>
</body>
</html>
好了，效果上就是每次上传图片成功都会展示，并且还可以继续上传图片。
1.2 摸一摸jinja2语法
首要的简单语法：
- {{ ... }}，标记html中的变量，和语言沟通的变量实体；
- {% ... %}，标记语句，各种逻辑语句诸如if、for等，都用这个，标记了开头需要标记结束；
- {# ... #}，用来写注释语句。
简单的使用语句：
变量
<body>
<!--name变量，在python脚本中就直接在render_template中传入指定参数即可-->
<p>hello, {{name}}</p>
</body>
分支
<body>
{% if is_or_not %}
<p>is_or_not为true</p>
{% else %}
<p>is_or_not为false</p>
{% endif %}
</body>
<body>
{% for comment in comments %}
<li>{{comment.id, comment.name}}</li>
{% endfor %}
</body>
注释就自然不用多言了，很明了了。继续展开，针对变量，不同类型的变量，存储的信息也不同，比如针对python的各种标准对象诸如字典、列表等等，在python里面怎么用，在这里就怎么用。除此以外，jinja2的特色就是针对变量有着过滤器的功能，形式就是{{变量|过滤器}}，具体语义如下：
| 过滤器名 |
说明 |
| safe |
不转义 |
| capitalize |
变量首字母大写，其余小写 |
| lower |
变量小写 |
| upper |
变量大写 |
| title |
变量中每个单词首字母大写 |
| trim |
变量首尾空格去除 |
| striptags |
去除变量中的html标签 |
它的样式是变量后加上管道符|然后接api，就有点像过滤的样子才叫过滤器吧，更多的看官网吧。
模板继承
和面向对象的特性那样，jinja语法提供模板的继承，在应用当中，可以提供一个base模板，这个模板只提供关于UI界面的简单界定划分，后续的内容填充，都交给子模板。看了jinja中文网的例子，大致是这样：
给定一个base，
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
block和endblock包起来的区域就是可操作区域，对于我来说就是相当于另类的虚函数，可以被子模板重写。针对base的子模板扩展：
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
上面的extends表明继承于某某，super就有点类似python了，一样的意思，然后用上和base相同的block，再选择性重写里面的内容就ok了。因为引入了block的使用，它也支持嵌套概念，所以为了可读性的需求，运行在endblock的时候添加命名。
针对循环
在for循环中，有着方便查询当前迭代在循环中的位置的接口：
| 变量 |
描述 |
| loop.index |
当前循环迭代的次数，从1开始 |
| loop.indexo |
从0开始计数的当前循环迭代次数 |
| loop.revindex |
到循环结束还需要迭代的次数，从1开始 |
| loop.revindexo |
到循环结束还需要迭代的次数，从0开始 |
| loop.first |
判断是否是第一次迭代 |
| loop.last |
判断是否是最后一次迭代 |
| loop.length |
循环需要迭代的次数 |
除此以外，还有一些辅助性的特殊函数，比如range、cycler等，这种接口可以查看中文网。另外也还有更多的可用功能，但这里不想详述太多，烦人，要查的时候再看中文网吧。
二、全面点的django
时间不够，先留白。
总结
现在轻量级的flask大多用来简单建立web服务，提供几个提供业务处理的创建、信息查询、结果查询等接口，用来做起一个网站终究是少，以前的个人认识，它是简单提供web服务的一个后台框架，前台需要用vue，而后台的业务处理中，则是需要用另外的异步库诸如tornado，所以早期的认识是一个完好的网站web就是前台vue+flask+tornado，但深入了就发现，其实flask本身就能支撑起前台后台，最多就是异步的处理不太够。另外vue也不简单，它只能算是nodejs的前台部分，各种ui设计各个大公司都有着自己独特的脚手架可以搭建，nodejs也能提供简单的后台支持。现在全栈的实现方式越来越多，更多的选择也使得不少人越来越卷，一人兼备多种能力更吃香嘛。
个人发展还是准备熟悉框架，不是具体的flask这种框架，而是各种web框架的大体骨骼，抓住不变的本质就能更快上手明了其他框架，就是所谓的一法通万法，说白了呈现出来的也就一个样子，最多就是随着访问量的提升对并发的要求的指数递增。当实现一个网站非常熟练的时候，就应该有拿得出手的深入到底层的调优处理了。
再往深层一点的挖掘，估计就是个人的深度学习框架的实现，这种才需要结合到实际的数理科学，不然，其实说白了，coder也还是一个组装工程师，不能算更好的实现个人价值，这个算是个人观点吧。