flask html 得到文本框 input的内容_Flask实践：计算器

功能相同但使用JS实现的版本：https://greyli.github.io/calculator/
源码：https://github.com/helloflask/calculator

什么是单页应用（SPA）？

照字面理解，单页应用（Single Page Application）就是只有一个页面的应用，这意味着所有的操作和交互都要在单页里实现。借助上一篇文章介绍的AJAX技术，这种应用可以很容易实现。请求和数据交换都在后台处理，节省了重复加载页面浪费的时间，可以让用户体验更流畅。

尽管如此，因为Heroku的网络问题，Demo体验起来并不流畅……你可以在本地安装，体验会更好。

计算器

这个计算器的视图函数和上篇文章里的那个差不多，只多了一个操作符。

@app.route

在模板里，使用三个隐藏字段（input）来存储两个操作数和一个操作符，当按下等于按钮后发送GET请求，获得计算结果后做相应的处理（完整代码见Github上的源码）：

$

其实这个计算器用JavaScript实现就够了……没太多要说了，补一些用到的CSS技巧吧。

让按钮更真实

在这个计算器里，用到了几个处理技巧，可以让按钮更真实。

按下效果

其实是设置按钮的box-shadow，按下时把box-shadow设为none，同时按钮向下移动

button 

按钮上的字不可选择

双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性

.

去掉按钮被选中后的蓝色边线

button

相关链接

• Demo：http://calculator3.herokuapp.com（不流畅，建议体验下面的JS版本，功能相同）
• JavaScript版本：https://greyli.github.io/calculator/
• 源码：https://github.com/helloflask/calculator

- - - - -

更多关于Flask和Web开发的优质原创内容，欢迎关注Hello, Flask! - 知乎专栏。