前端除了用js++css+html,还有没有其它办法?其实python也可以

1. 安装与基本流程

Python学习交流Q群:660193417###
安装 PyWebIO 和其他的第三方库一样使用pip install PyWebIO就行,没有任何难度,此处不做多讲。 但是在正式讲解一些常见的操作之前,我需要解释一下,为什么说用 PyWebIO 写页面就像数据分析一样。 回想一下我们使用Python进行数据分析的流程,启动 Jupyter Notebook 导入数据,进行数据预览、筛选、拆分合并等操作,得到
自己满意的结果,最后保存方便查看,更重要的是一行代码一个结果,方便调试。 而使用 PyWebIO 开发页面流程也是类似,我们不用过分关心CSS、JS等文件,全程我们只需要操作一个py脚本。 也不用关心数据库配置、前后端交互,就像上面的数据分析一样,创建一个空白页面,然后一行代码添加一部分内容,内容可以 实时编译输出,甚至可以在 ipython 中进行开发


与其说是第一个第三方库,我更愿意称它为一个 APP ,因为一行代码对应一个操作,例如可以调用 put_text() 、 put_image() 、put_table() 等函数输出文本、图片、表格等内容到浏览器!

当然,之所以能这么便捷高效的开发页面,基于别人封装好的,高度精准定义好的功能,因此使用场景十分有限,例如问卷调查、表单填写、数据报告展示等简单的、个人使用的,且对样式、特效等不做太高要求的场景。

关于它让人不爽的地方,我会在后面的系列文章中进行讲解,这不影响它确实是一个高效率的web开发库,下面让我对其常见操作进行讲解。

2. 来!现在就开发页面!

本节我将介绍使用 PyWebIO 开发页面中的一些常见操作。

当然,我深知阅读文档的枯燥与痛苦,所以我将以从 0 实现下面的页面为最终目标进行讲解!

插入文字

平时我们写 html 会用类似标签来控制标题,用
``这样的标签来输出文字。

在 PyWebIO 中可以使用 markdown 来实现类似效果,语法是put_markdown(),将markdown添加进去,就会自动渲染

put_markdown(("""#  我的第一个页面

    这是早起Python教我用Python写的第一个页面!

    写点什么呢?到底写一点什么好呢?好像真的没什么好写的,到底写什么呢?

    我也不知道该写点什么, 反正有点什么内容就好了!"""), lstrip=True)

效果如下

插入图片

静态元素是一个网页的重要组成部分,使用 PyWebIO 插入也是很简单,使用

put_image() 可以插入图片,代码如下
put_image(open('iShot2021-10-29 17.14.08.png', 'rb').read())

随手用手机拍了一张图片,效果如下

插入表格

传统html使用table插入表格,这里使用类似方法

    put_table([
['商品', '价格'],
['苹果', '5.5'],
['香蕉', '7'],
])

效果如下,后面如果表格内容需要变化,可以写个函数让他动态更新

插入代码

插入代码也是没有问题的

展示效果如下

交互 - 收集信息

上面都是常规的静态元素添加,其他一些库也能做到,甚至手写原生html都行,下面来点更高级的!

首先是简单的交互式输入框,开发者已经写好了,调用命令也很简单

name = input("你的名字是什么??")

只用一行代码,效果如下,当然这也意味着样式什么的不支持修改

这里我们选择将接收到消息打印出来,当然也是可以写一个函数,将数据进行保存,这会在后面带大家开发问卷系统讲到

交互 - 隐藏输入

如果我们在开发问卷系统,有些选项希望用户输入时可以隐藏输入,就像输入密码一样

password = input("不想让别人看见你的输入?", type=PASSWORD)


交互 - 输入代码

通过交互输入框接收代码也是可以的,后面我讲介绍如何让代码执行,下面是可以实现的样式

   code = textarea('Code Edit', code={
'mode': "python", # code language
'theme': 'darcula', # Codemirror theme
}, value='import something\n# Write your python code')


交互 - 按钮功能

其实上面说的存储数据也好,执行代码也好,本质上就是给这个提交按钮添加一个功能,我们来实现最简单的计算器。也就是点击提交,计算两数相加

   data = input_group("做个计算器", [
input('第一个数字', name='num1', type=NUMBER),
input('第二个数字', name='num2', type=NUMBER)
])
put_text(f"计算结果是{data['num1']} + {data['num2']} = {data['num1'] + data['num2']} ")


因为简单,连函数都不用定义,直接 f-string 就解决了,如果需要复杂的功能,就可以定义一个函数,点击按钮就执行这个函数

如何渲染页面

从上面的介绍不难看出,用 PyWebIO 就好比往一张白纸里面塞东西。

但我还没说,如何创建一张白纸以及如何渲染页面,下面是一个本文用的最简单的框架

from pywebio import *
from pywebio.input import *
from pywebio.output import * def myfirstpage(): something if __name__ == '__main__': start_server(myfirstpage,port=8082,auto_open_webbrowser=True)

可以看到,我们只要定义一个函数,然后往里面塞各种内容,最后通过start_server()指定端口启动就行。

好了,以上就是 pywebio 的简单使用,可以覆盖绝大多数的临时页面开发需求,对于经常有这方面需求可以先学习一波。

python写个前端,这不是轻轻松松~的更多相关文章

  1. Python音频处理基础知识,这不是轻轻松松~~~

    大家好鸭,我是小熊猫 咱今天来讲一讲音频处理的基础知识上才艺~~~ 1.声音的基础 2.python读取.wav音频 欢迎加入白嫖Q群:660193417### import wave import ...

  2. python写红包的原理流程包含random,lambda其中的使用和见简单介绍

    Python写红包的原理流程 首先来说说要用到的知识点,第一个要说的是扩展包random,random模块一般用来生成一个随机数 今天要用到ramdom中unifrom的方法用于生成一个指定范围的随机 ...

  3. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  4. Python写地铁的到站的原理简易版

    Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...

  5. Python开发【前端】:jQuery

    jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...

  6. Python开发【前端】:JavaScript

    JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  7. Python开发【前端】:CSS

    css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...

  8. Python开发【前端】:HTML

    HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...

  9. 【Python】如何基于Python写一个TCP反向连接后门

    首发安全客 如何基于Python写一个TCP反向连接后门 https://www.anquanke.com/post/id/92401 0x0 介绍 在Linux系统做未授权测试,我们须准备一个安全的 ...

随机推荐

  1. 11.Flink实时项目之支付宽表

    支付宽表 支付宽表的目的,最主要的原因是支付表没有到订单明细,支付金额没有细分到商品上, 没有办法统计商品级的支付状况. 所以本次宽表的核心就是要把支付表的信息与订单明细关联上. 解决方案有两个 一个 ...

  2. kubeadm 搭建 K8s

    kubeadm 搭建 K8s 本篇主要记录一下 使用 kubeadm 搭建 k8s 详细过程 ,环境使用 VirtualBox 构建的3台虚拟机 1.环境准备 操作系统:Centos7 (CentOS ...

  3. 让交互更加生动!有意思的鼠标跟随 3D 旋转动效

    今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文,就将讲述如何使用纯 ...

  4. 关闭BottomSheetDialogFragment从后台返回后的动画

    问题 显示BottomSheetDialogFragment后.将当前应用放于后台,切换到其他APP,然后再返回当前应用.此时会看到BottomSheetDialogFragment从下而上的动画再次 ...

  5. 【PyHacker】编写WAF指纹探测与Sqlmap相结合

    使用Python编写探测WAF指纹脚本,再结合到Sqlmap中,这样以后再探测网站时,如果识别到此WAF指纹,就会显示出来.本文属于巡安似海PyHacker系列课程   编写探测识别WAF脚本 00x ...

  6. pytorch入门--土堆深度学习快速入门教程

    工具函数 dir函数,让我们直到工具箱,以及工具箱中的分隔区有什么东西 help函数,让我们直到每个工具是如何使用的,工具的使用方法 示例:在pycharm的console环境,输入 import t ...

  7. Ruby 趣学笔记(二)

    Ruby 趣学笔记(二) 本文写于 2020 年 5 月 7 日 类的继承 之前忘记写了,Ruby 的继承写法是: class IPhone < Phone def initialize(id, ...

  8. 论文阅读 DyREP:Learning Representations Over Dynamic Graphs

    5 DyREP:Learning Representations Over Dynamic Graphs link:https://scholar.google.com/scholar_url?url ...

  9. 482. License Key Formatting - LeetCode

    Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符 ...

  10. Johnson 全源最短路

    学这个是为了支持在带负权值的图上跑 Dijkstra. 为了这个我们要考虑把负的权值搞正. 那么先把我们先人已经得到的结论摆出来.我们考虑先用 SPFA 对着一个满足三角形不等式的图跑一次最短路,具体 ...