Flask實踐：計算器

什么是單頁應用（SPA）？

照字面理解，單頁應用（ S ingle P age A pplication）就是只有一個頁面的應用，這意味著所有的操作和交互都要在單頁里實現。借助上一篇文章介紹的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 */