开发交互式Web应用，从未如此简单

今天分享一个让开发交互式 Web app 超级简单的工具。不会 HTML，CSS，JAVASCRIPT 也没事。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、网站设计、茂名网络推广、微信小程序开发、茂名网络营销、茂名企业策划、茂名品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供茂名建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

交互式 Web app 非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。

如果你有这样的开发需求，那用 Python 真的是太简单了。

借助于 PyWebIO(pip install pywebio)，你可以分分钟实现网页的信息录入，可以看下面的动图：

上面的页面，也就仅仅用了这 6 行代码：

 
 
 
 
    
  
  
  
  
  1. from pywebio.input import * 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. input("This is a simple text input") 
    4. 
  
  
  
  
  4. select("This is a drop down menu", ['Option1', 'Option2']) 
    5. 
  
  
  
  
  5. checkbox("Multiple Choices!", options=["a",'b','c','d']) 
    6. 
  
  
  
  
  6. radio("Select any one", options=['1', '2', '3']) 
    7. 
  
  
  
  
  7. textarea('Text Area', rows=3, placeholder='Multiple line text input') 
    8.

要让网页输出想要的信息也是非常简单，代码如下，函数功能已经做了相关注释，你很容易看懂：

 
 
 
 
    
  
  
  
  
  1. from pywebio.output import * 
    2. 
  
  
  
  
  2. from pywebio import session 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. # 网页上显示纯文本 
    5. 
  
  
  
  
  5. put_text("Hello friend!") 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. # 网页上显示表格 
    8. 
  
  
  
  
  8. put_table([ 
    9. 
  
  
  
  
  9.     ['Object', 'Unit'], 
    10. 
  
  
  
  
  10.     ['A', '55'], 
    11. 
  
  
  
  
  11.     ['B', '73'], 
    12. 
  
  
  
  
  12. ]) 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. # 网页上显示 MarkDown 
    15. 
  
  
  
  
  15. put_markdown('~~PyWebIO~~') 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17. # 网页上显示下载文件的链接 
    18. 
  
  
  
  
  18. put_file('output_file.txt', b'You can put anything here') 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. # 网页上显示图片 
    21. 
  
  
  
  
  21. put_image(open('python_logo.png', 'rb').read()) 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. # 网页上显示弹窗 
    24. 
  
  
  
  
  24. popup('popup title', 'popup text content') 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26. # 保持回话是打开状态，否则页面显示完毕程序退出 
    27. 
  
  
  
  
  27. session.hold() 
    28.

运行的效果如下：

以上，几行代码就实现了一个带有输入输出的 Web 应用，是不是很神奇?

构建基于浏览器的 GUI 程序

PyWebIO 提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出，将浏览器变成了一个“富文本终端”，可以用于构建简单的 Web 应用或基于浏览器的 GUI 应用。

比如计算 BMI 指数的脚本：

 
 
 
 
    
  
  
  
  
  1. from pywebio import start_server 
    2. 
  
  
  
  
  2. from pywebio.input import input, FLOAT 
    3. 
  
  
  
  
  3. from pywebio.output import put_text 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. def bmi(): 
    6. 
  
  
  
  
  6.     height = input("请输入你的身高(cm)：", type=FLOAT) 
    7. 
  
  
  
  
  7.     weight = input("请输入你的体重(kg)：", type=FLOAT) 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.     BMI = weight / (height / 100) ** 2 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.     top_status = [(14.9, '极瘦'), (18.4, '偏瘦'), 
    12. 
  
  
  
  
  12.                   (22.9, '正常'), (27.5, '过重'), 
    13. 
  
  
  
  
  13.                   (40.0, '肥胖'), (float('inf'), '非常肥胖')] 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.     for top, status in top_status: 
    16. 
  
  
  
  
  16.         if BMI <= top: 
    17. 
  
  
  
  
  17.             put_text('你的 BMI 值: %.1f，身体状态：%s' % (BMI, status)) 
    18. 
  
  
  
  
  18.             break 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. if __name__ == '__main__': 
    21. 
  
  
  
  
  21.     start_server(bmi, port=80) 
    22.

效果：

更多示例：

基本 demo

  • 聊天室[1]: 和当前所有在线的人聊天 (不到 90 行代码实现)
  • Markdown 实时预览[2]: 可以实时预览的在线 Markdown 编辑器 (不到 40 行代码实现)
  • 在线五子棋游戏[3]: 多人协作对战的五子棋游戏 (不到 100 行代码实现)
  • 输入演示[4]: 演示 PyWebIO 输入模块的用法
  • 输出演示[5]: 演示 PyWebIO 输出模块的用法

数据可视化 demo

PyWebIO 还支持使用第三方库进行数据可视化

  • 使用 bokeh 进行数据可视化[6]
  • 使用 plotly 进行数据可视化[7]
  • 使用 pyecharts 创建基于 Echarts 的图表[8]
  • 使用 pyg2plot 创建基于 G2Plot 的图表[9]
  • 使用 cutecharts.py 创建卡通风格图表[10]

数据可视化效果图：

与现有框架集成

PyWebIO 还可以方便地整合进现有的 Web 服务，让你不需要编写 HTML 和 JS 代码，就可以构建出具有良好可用性的应用。目前支持与 Flask、Django、Tornado、aiohttp、FastAPI 框架集成。

比如说与 Tornado 应用整合：

 
 
 
 
    
  
  
  
  
  1. import tornado.ioloop 
    2. 
  
  
  
  
  2. import tornado.web 
    3. 
  
  
  
  
  3. from pywebio.platform.tornado import webio_handler 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. class MainHandler(tornado.web.RequestHandler): 
    6. 
  
  
  
  
  6.     def get(self): 
    7. 
  
  
  
  
  7.         self.write("Hello, world") 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. if __name__ == "__main__": 
    10. 
  
  
  
  
  10.     application = tornado.web.Application([ 
    11. 
  
  
  
  
  11.         (r"/", MainHandler), 
    12. 
  
  
  
  
  12.         (r"/bmi", webio_handler(bmi)),  # bmi 即为上文计算BMI指数的函数 
    13. 
  
  
  
  
  13.     ]) 
    14. 
  
  
  
  
  14.     application.listen(port=80, address='localhost') 
    15. 
  
  
  
  
  15.     tornado.ioloop.IOLoop.current().start() 
    16.

与 Django 整合：

 
 
 
 
    
  
  
  
  
  1. # urls.py 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. from django.urls import path 
    4. 
  
  
  
  
  4. from pywebio.platform.django import webio_view 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. # `task_func` is PyWebIO task function 
    7. 
  
  
  
  
  7. webio_view_func = webio_view(task_func) 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. urlpatterns = [ 
    10. 
  
  
  
  
  10.     path(r"tool", webio_view_func), 
    11. 
  
  
  
  
  11. ] 
    12.

与更多框架的整合见文档[11]

最后

PyWebIO 使用同步而不是基于回调的方式获取输入，代码编写逻辑更自然，非声明式布局，布局方式简单高效，代码侵入性小，旧脚本代码仅需修改输入输出逻辑便可改造为 Web 服务，还可以整合到现有的主流 Web 框架。同时支持基于线程的执行模型和基于协程的执行模型，支持结合第三方库实现数据可视化，更多知识请阅读官方文档[12]

一句话，PyWebIO 让交互式的 Web 开发变得更加简单，特别适合开发简单的 GUI 程序及数据可视化。

本文转载自微信公众号「Python七号」，可以通过以下二维码关注。转载本文请联系Python七号公众号。

新闻名称：开发交互式Web应用，从未如此简单
标题URL：http://www.shufengxianlan.com/qtweb/news47/303297.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

分类信息网站

成都免费网站建设公司　　 　营销型网站建设　　 　网站优化公司　　 　搜索引擎优化　　 　成都响应式网站建设　　 　木包装箱　　 　成都网站制作　　 　温江电信机房　　 　奢侈品网站建设方案　　 　支点广告　　 　定制网站开发　　 　成都网站建设　　 　成都网站营销推广　　 　网站空间　　 　手机网站建设　　 　光华村机房　　 　眉山主机托管　　 　郫县明安消防器材　　 　装饰公司网站建设方案　　 　网上商城管理系统