Flask實踐：計算器

功能相同但使用JS實現的版本：https://greyli.github.io/calculator/

什麼是單頁應用（SPA）？

照字面理解，單頁應用（Single Page Application）就是只有一個頁面的應用，這意味著所有的操作和交互都要在單頁里實現。藉助上一篇文章介紹的AJAX技術，這種應用可以很容易實現。請求和數據交換都在後台處理，節省了重複載入頁面浪費的時間，可以讓用戶體驗更流暢。

儘管如此，因為Heroku的網路問題，Demo體驗起來並不流暢……你可以在本地安裝，體驗會更好。

計算器

這個計算器的視圖函數和上篇文章里的那個差不多，只多了一個操作符。

@app.route("/_calculate")def calculate(): a = request.args.get("num1", "0") operator = request.args.get("operator", "+") b = request.args.get("num2", "0") if operator == "/": result = eval(a + operator + str(float(b))) else: result = eval(a + operator + b) return jsonify(result=result)

在模板里，使用三個隱藏欄位（input）來存儲兩個操作數和一個操作符，當按下等於按鈕後發送GET請求，獲得計算結果後做相應的處理（完整代碼見Github上的源碼）：

$("#resultButton").click(function() { // 等於按鈕 $.getJSON($SCRIPT_ROOT + "/_calculate", { num1: $("#num1").val(), operator: $("#operator").val(), // 操作符 num2: $("#num2").val() }, function(data) {if (data.result.toString().length > 16) { // 驗證計算結果長度 $("#output").html("Reach Digit Limit"); } else { $("#output").html(data.result); // 顯示計算結果 } });});

其實這個計算器用JavaScript實現就夠了……沒太多要說了，補一些用到的CSS技巧吧。

讓按鈕更真實

在這個計算器里，用到了幾個處理技巧，可以讓按鈕更真實。

按下效果

其實是設置按鈕的box-shadow，按下時把box-shadow設為none，同時按鈕向下移動

button { box-shadow: 1px 2px #666;}button:active { box-shadow: none; transform: translateY(4px);}

按鈕上的字不可選擇

雙擊按鈕或是拖動按鈕選擇會出現藍色背景色，設置user-select去掉這個特性

.un-selectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

去掉按鈕被選中後的藍色邊線

button:focus {outline:0;} /* 設為none效果相同，或加上 !important */

相關鏈接

• Demo：http://calculator3.herokuapp.com（不流暢，建議體驗下面的JS版本，功能相同）
• JavaScript版本：https://greyli.github.io/calculator/
• 源碼：https://github.com/helloflask/calculator

- - - - -

更多關於Flask和Web開發的優質原創內容，歡迎關注Hello, Flask! - 知乎專欄。