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

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

# 1. 安装与基本流程

安装 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 会用类似<h1>标签来控制标题,用<p>``<span>这样的标签来输出文字。

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

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

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

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

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

效果如下

插入图片

静态元素是一个网页的重要组成部分,使用 PyWebIO 插入也是很简单,使用 put_image() 可以插入图片,代码如下

插入表格

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

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

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

插入代码

插入代码也是没有问题的

展示效果如下

交互 - 收集信息

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

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

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

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

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

交互 - 隐藏输入

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

交互 - 输入代码

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

    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']}  

如何渲染页面

从上面的介绍不难看出,用 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 的简单使用,可以覆盖绝大多数的临时页面开发需求,对于经常有这方面需求可以先学习一波。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)
如需 WordPress 优化加速、二次开发、网站维护、企业网站建设托管等服务,可联系我购买付费服务:点此联系我 | 近期站内热门福利推荐:

:本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可, 转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 1798582342@qq.com 进行处理!

文章版权及转载声明

作者:有趣本文地址:https://www.zyhao.net/290479.html最后更新时间为 2022年02月05日 星期六 18:56:44
文章转载或复制请以超链接形式并注明来源出处 有趣源码
声明:某些文章或资源具有时效性,若有 错误 或 所需下载资源 已失效,请联系客服QQ:11210980

有趣源码,优质资源分享网

常见问题
  • 本站所有资源版权均属于原作者所有,均只能用于参考学习,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,建议提前注册好百度网盘账号,使用百度网盘客户端下载
查看详情

相关文章