Flask实践：计算器

   <p style="text-align:center"><img src="https://simg.open-open.com/show/e4cd096d5e5f117436c02c08f2300683.png"></p>    <h2><strong>什么是单页应用（SPA）？</strong></h2>    <p>照字面理解，单页应用（ <strong>S</strong> ingle <strong>P</strong> age <strong>A</strong> pplication）就是只有一个页面的应用，这意味着所有的操作和交互都要在单页里实现。借助上一篇文章介绍的AJAX技术，这种应用可以很容易实现。请求和数据交换都在后台处理，节省了重复加载页面浪费的时间，可以让用户体验更流畅。</p>    <p>尽管如此，因为Heroku的网络问题，Demo体验起来并不流畅……你可以在本地安装，体验会更好。</p>    <h2><strong>计算器</strong></h2>    <p>这个计算器的视图函数和上篇文章里的那个差不多，只多了一个操作符。</p>    <pre>  <code class="language-python">@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)</code></pre>    <p>在模板里，使用三个隐藏字段（input）来存储两个操作数和一个操作符，当按下等于按钮后发送GET请求，获得计算结果后做相应的处理（完整代码见Github上的源码）：</p>    <pre>  <code class="language-python">$('#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);  // 显示计算结果      }    });  });</code></pre>    <p>其实这个计算器用JavaScript实现就够了……没太多要说了，补一些用到的CSS技巧吧。</p>    <h2><strong>让按钮更真实</strong></h2>    <p>在这个计算器里，用到了几个处理技巧，可以让按钮更真实。</p>    <p><strong>按下效果</strong></p>    <p>其实是设置按钮的box-shadow，按下时把box-shadow设为none，同时按钮向下移动</p>    <pre>  <code class="language-python">button {    box-shadow: 1px 2px #666;  }    button:active {    box-shadow: none;    transform: translateY(4px);  }</code></pre>    <p><strong>按钮上的字不可选择</strong></p>    <p>双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性</p>    <pre>  <code class="language-python">.un-selectable {    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  }</code></pre>    <p><strong>去掉按钮被选中后的蓝色边线</strong></p>    <pre>  <code class="language-python">button:focus {outline:0;}  /* 设为none效果相同，或加上 !important */</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8d46e0d3cb177f88696c65942655af7f.png"></p>    <p> </p>    <p> </p>    <p> </p>    <p> </p>