Demo体验：计时器 – Hello, Flask!
难度：1
涉及知识点：URL变量
计时界面
– – – – –
我们经常在一些网站上看到倒计时，比如购物网站上的秒杀倒计时，或是考试网站上的距离高考还剩多少天……
我们今天就用Flask和JavaScript（jQuery）来实现一个在线计时器，具体的User Strory：
- 可以在首页点击不同的时间按钮进入计时
- 计时结束后会有弹窗和铃声提示
- 可以在输入框里输入参数进入相应的计时，比如“34、23s、20m、2h”
- 可以通过在url里传入时间来开始计时，比如：
- “timertimer.herokuapp.com/10s”会进入一个10秒的计时。
- “timertimer.herokuapp.com/25m”会进入一个25分钟的计时。
- “timertimer.herokuapp.com/2h”会进入一个2小时的计时。
项目结构
|-Timer-Flask 项目名称
|-app.py
|-templates/ 模板文件夹
|-index.html
|-static/
|-beep.mp3 计时结束铃声
|-favicon.ico 站点图标
|-style.css
|-js/
|-progressbar.js
|-jquery.min.js
|-venv/ 虚拟环境
实现代码
主程序：app.py
import re
from flask import Flask, render_template, url_for, redirect, request, flash
app = Flask(__name__)
app.config['SECRET_KEY'] = 'a very secret string'
@app.route('/')
def index():
return redirect(url_for('timer', num=11*60+11))
@app.route('/<int:num>s')
@app.route('/<int:num>')
def timer(num):
return render_template('index.html', num=num)
@app.route('/custom', methods=['GET', 'POST'])
def custom():
time = request.form.get('time', 180)
# 使用正则表达式来验证输入的字符
m = re.match('\d+[smh]?$', time)
if m is None:
flash(u'请输入一个有效的时间，例如34、20s、15m、2h')
return redirect(url_for('index'))
if time[-1] not in 'smh':
return redirect(url_for('timer', num=int(time)))
else:
type = {'s': 'timer', 'm': 'minutes', 'h': 'hours'}
return redirect(url_for(type[time[-1]], num=int(time[:-1])))
@app.route('/<int:num>m')
def minutes(num):
return redirect(url_for('timer', num=num*60))
@app.route('/<int:num>h')
def hours(num):
return redirect(url_for('timer', num=num*3600))
@app.errorhandler(404)
def page_not_fouond(e):
flash(u'访问地址出错了，鼠标放在问号上了解更多: )')
return redirect(url_for('timer', num=244))
计时的功能主要用JavaScript（jQuery）实现，在index.html，传递变量给JavaScript：
{% block scripts %}
<script>
var Minutes = {{ num }};
</script>
{% endblock %}
另外，在这个APP里，因为表单很小，所以没有使用Flask-WTF。表单部分：
<form method="POST" action="{{ url_for('custom') }}" style="display:inline">
<input name="time" class="time-input" placeholder="example: 12/30s/20m/2h">
<input type="submit" class="startButton" value="START">
</form>
然后在视图函数里，我使用request来获取数据，使用正则表达式验证数据：
@app.route('/custom', methods=['GET', 'POST'])
def custom():
# 设置180为默认值，避免提交空白表单产生400错误
time = request.form.get('time', 180)
# 使用正则表达式验证数据
m = re.match('\d+[smh]?$', time)
if m is None:
flash(u'请输入一个有效的时间，例如34、20s、15m、2h')
return redirect(url_for('index'))
if time[-1] not in 'smh':
return redirect(url_for('timer', num=int(time)))
else:
type = {'s': 'timer', 'm': 'minutes', 'h': 'hours'}
return redirect(url_for(type[time[-1]], num=int(time[:-1])))
下一次会谈一下表单的几种不同的验证方式和一些处理技巧。
完整的实现见源码（链接在底部），欢迎fork和patch（或是star：）。
相关知识点
- URL变量
大部分现代的网站（app）都会有一个美观简洁的URL，比如http://www.example.com/user/kitty。在Flask里，我们通过在URL里设置变量来实现这个功能，比如说上面的URL，对应的路由就是：
app.route('/user/<username>')
这个<variable_name>可以作为参数传递到视图函数里，我们还可以使用Flask提供的转换器，以<converter:variable_name>的形式来转换变量：
@app.route('/user/<username>') def show_user_profile(username): # show the user profile for that user return 'User %s' % username @app.route('/post/<int:post_id>') def show_post(post_id): # show the post with the given id, the id is an integer return 'Post %d' % post_id
下面是Flask支持的转换器：
| string | accepts any text without a slash (the default) |
| int | accepts integers |
| float | like int but for floating point values |
| path | like the default but also accepts slashes |
| any | matches one of the items provided |
| uuid | accepts UUID strings |
使用这个特性，计时器实现了在地址后填入参数就可以进入相应的计时。
相关链接
DEMO：http://timertimer.herokuapp.com/
源码：https://github.com/helloflask/timer-flask
– – – – –
更多关于Flask的优质内容，欢迎关注Hello, Flask! – 知乎专栏。
