python写个前端,这不是轻轻松松~
前端除了用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写个前端,这不是轻轻松松~的更多相关文章
- Python音频处理基础知识,这不是轻轻松松~~~
大家好鸭,我是小熊猫 咱今天来讲一讲音频处理的基础知识上才艺~~~ 1.声音的基础 2.python读取.wav音频 欢迎加入白嫖Q群:660193417### import wave import ...
- python写红包的原理流程包含random,lambda其中的使用和见简单介绍
Python写红包的原理流程 首先来说说要用到的知识点,第一个要说的是扩展包random,random模块一般用来生成一个随机数 今天要用到ramdom中unifrom的方法用于生成一个指定范围的随机 ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- Python写地铁的到站的原理简易版
Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...
- Python开发【前端】:jQuery
jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...
- Python开发【前端】:JavaScript
JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Python开发【前端】:CSS
css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...
- Python开发【前端】:HTML
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- 【Python】如何基于Python写一个TCP反向连接后门
首发安全客 如何基于Python写一个TCP反向连接后门 https://www.anquanke.com/post/id/92401 0x0 介绍 在Linux系统做未授权测试,我们须准备一个安全的 ...
随机推荐
- 输入一个字符串,内有数字和非数字字符。例如:a123x456 17960 302tab5876。将其中连续的数字作为一个整数,依次存放到一维数组a中,例如123放在a[0],456放在a[1]……统计共有多少个整数,并输出这些数。
题目内容:输入一个字符串,内有数字和非数字字符.例如:a123x456 17960 302tab5876.将其中连续的数字作为一个整数,依次存放到一维数组a中,例如123放在a[0],456放在a[1 ...
- Android第1-2周作业
作业1:安装环境,截图编程界面,截图运行界面 作业2:九宫格 <?xml version="1.0" encoding="utf-8"?> < ...
- mmdetection训练出现nan
训练出现nan 在使用MMDetection训练模型时,发现打印信息中出现了很多nan.现象是,loss在正常训练下降的过程中,突然变为nan. 梯度裁减 在模型配置中加上grad_clip: opt ...
- Git&Gitee
目录 Git Git介绍 安装 命令学习 Git的作用 git与svn比较 Git,GitHub,GitLab,Gitee Git工作流程 Git常用命令 在仓库目录终端下 - 设置全局用户 在仓库目 ...
- Python求解线性规划——PuLP使用教程
简洁是智慧的灵魂,冗长是肤浅的藻饰.--莎士比亚<哈姆雷特> 1 PuLP 库的安装 如果您使用的是 Anaconda[1] 的话(事实上我也更推荐这样做),需要先激活你想要安装的虚拟环境 ...
- Tensorflow 窗口时间序列数据的处理
Tensorflow 时间序列数据的处理 数据集简介 数据来源:Kaggle Ubiquant Market Prediction 数据集描述了多个投资项目在一个时间序列下的300个匿名特征(&quo ...
- LeetCode数组刷题——448、48、240、769
1.[LeetCode448]:448. 找到所有数组中消失的数字 题目分析: 1-n之间有重复的,有没出现的,有出现一次.使用hashmap,空间复杂度为O(n) 方法一:哈希表,但是空间复杂度超过 ...
- Ping原理详解
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 Ping是排除设备访问故障的常见方法.它使用Internet控制消息协议ICMP(Int ...
- 如何使用Shell写一个显示目录结构的命令?
公众号关注 「开源Linux」 回复「学习」,有我为您特别筛选的学习资料~ 在Linux中使用Shell写一个显示目录结构的命令,快速寻找目录结构. 1.代码 #!/usr/bin/env bash ...
- 图解 Git 工作原理
此页图解 git 中的最常用命令.如果你稍微理解git的工作原理,这篇文章能够让你理解的更透彻. 基本用法 上面的四条命令在工作目录.暂存目录(也叫做索引)和仓库之间复制文件. git add fil ...