Flask實踐：猜數字

Demo體驗：猜數字 - Flask

難度：1

使用擴展：Flask-Bootstrap、Flask-WTF

- - - - -

每個學編程的人大概都寫過猜數字遊戲，今天我們用Flask來做一個Web版本的猜數字。功能很簡單，只有兩個路由，三個模板和一個表單組成。擴展的版本見項目的Github頁面。

項目結構

|-GuesstheNumber 項目名稱n |-app.pyn |-templates/ 模板文件夾n |-index.html n |-guess.htmln |-base.html 基模板n |-venv/ 虛擬環境n

實現代碼

app.py

# -*- coding: utf-8 -*-nimport randomnnfrom flask import Flask, render_template, flash, redirect, url_for, sessionnfrom flask_wtf import Formnfrom wtforms import IntegerField, SubmitFieldnfrom wtforms.validators import Required, NumberRangenfrom flask_bootstrap import Bootstrapnnapp = Flask(__name__)napp.config[SECRET_KEY] = very hard to guess string #設置secret keynbootstrap = Bootstrap(app) # 初始化Flask-Bootstap擴展nnn@app.route(/)ndef index():n # 生成一個0~1000的隨機數，存儲到session變數里。n session[number] = random.randint(0, 1000) n session[times] = 10n return render_template(index.html)nnn@app.route(/guess, methods=[GET, POST])ndef guess():n times = session[times] # 從session變數里獲取次數n # 從session變數里獲取在index函數里生成的隨機數字n result = session.get(number) n form = GuessNumberForm()n if form.validate_on_submit():n times -= 1n session[times] = times # 更新次數值n if times == 0:n flash(u你輸啦……o(>﹏<)o)n return redirect(url_for(index))n answer = form.number.datan if answer > result:n flash(u太大了！你還剩下%s次機會 % times)n elif answer < result:n flash(u太小了！你還剩下%s次機會 % times)n else:n flash(u啊哈，你贏了！V(＾－＾)V)n return redirect(url_for(index))n return redirect(url_for(guess))n return render_template(guess.html, form=form)nnnclass GuessNumberForm(Form):n number = IntegerField(u輸入數字(0~1000)：, validators=[n # 傳入驗證函數和相應的錯誤提示信息。n Required(u輸入一個有效的數字！),n NumberRange(0, 1000, u請輸入0~1000以內的數字！)])n submit = SubmitField(u提交)nnnif __name__ == __main__: # 用於heroku部署，本地可省略n app.run()n

index.html

{% extends "base.html" %}nn{% block page_content %}n<!-- 傳入url_for的參數是視圖函數的名稱 -->n<a class="btn btn-success btn-lg" href="{{ url_for(guess) }}">開始遊戲</a>n{% endblock %}n

guess.html

{% extends "base.html" %} <!-- 引入基模板 -->n{% import "bootstrap/wtf.html" as wtf %}nn{% block page_content %}n <!-- 使用Flask-Bootstrap提供的函數來生成默認樣式的表單 -->n {{ wtf.quick_form(form) }}n{% endblock %}n

完整的項目見源碼（底部）。

相關知識

• session（會話）

session是Flask的上下文（context）全局變數，可以用來存儲（用字典的形式）請求之間需要「記住」的值。在這個猜數字遊戲里，我使用它來存儲生成的隨機數和剩餘的機會次數。

要使用session，得先設置一個secret key，這用來給Cookie簽名以加密session，這樣做的效果是用戶可以看到cookie但不能篡改它。儘管如此，session並不是安全的，不能用來存儲密碼，這個視頻演示了一個破解session的過程：https://youtu.be/mhcnBTDLxCI。下圖是Cookie的信息：

更多細節見：http://flask.pocoo.org/docs/0.11/quickstart/#sessions

安裝和運行

源碼地址：https://github.com/helloflask/guess

下載或使用git命令克隆項目後，切換到程序根目錄。使用virtualenv創建一個虛擬環境，激活後使用pip安裝所需依賴：

pip install -r requirements.txtn

然後運行：

set FLASK_APP=app.py nflask runn

訪問： http://127.0.0.1:5000/

上面的代碼實現的效果：

稍微美化一下，變成了下面這樣：

源碼：https://github.com/helloflask/guess

Demo：http://guessguess.herokuapp.com/

更多關於Flask的優質內容，歡迎關注Hello, Flask! - 知乎專欄。
推薦閱讀：