Flask实践:计算器

MargretCole 3年前
   <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>