用Python写了一个前端,轻轻松松实现前端梦

article/2025/10/8 19:53:25

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

在这里插入图片描述

1. 安装与基本流程

Python学习交流Q群:906715085###
安装 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():somethingif __name__ == '__main__':start_server(myfirstpage,port=8082,auto_open_webbrowser=True)

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

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

在这里插入图片描述


http://chatgpt.dhexx.cn/article/gOJRBIPm.shtml

相关文章

Pyscript,使用Python编写前端脚本

介绍 Anaconda的CEO Peter Wang在前两个月的时候发布了Pyscript,实现了在HTML支持Python的使用,整个引用过程甚至不需要安装任何环境,只需要使用link和script标签即可引用实现Python在HTML中运行的功能,在HTML中也可以运行和使用…

python前端界面实现交互,python的交互模式是什么

如何进入python交互界面 Python交互模式有两种:图形化的交互模式或者命令行的交互模式。打开步骤:首先点击开始菜单。 然后在搜索栏中输入Python,即可看到图形化的交互模式(IDLE(Python 3.7 64-bit)&…

前端运行python代码几种方式_前端和python

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 如果您细心对比过 json python sdk 和 xml python sdk 的文档,您会发现并不是一个简单的增量更新。 xml python sdk 在架构、可用性和安全性上有了非常大的提升…

逆袭之路——python 前端开发之基础部分【day38】

今日内容概要 前端简介HTTP简介HTTP协议HTML简介head内常见标签body内基本标签body内特殊符号body内常见标签标签的两大重要参数列表标签表格标签 今日内容详细 一、前端简介 什么是前端 什么是后端? 前端: 任何与用户直接打交道的界面都可以…

用Python写前端

分享一个让开发交互式 Web app 超级简单的工具。不会 HTML,CSS,JAVASCRIPT 也没事。交互式 Web app 非常实用,比如说做一个问卷调查页面、一个投票系统、一个信息收集表单,上传文件等等,因为网页是可视化的&#xff0c…

jsp物流配送管理系统

jsp物流配送管理 emmmm 本系统带程序说明书 有需要的可以去我上传的资源里面找,找不到的话,评论我,或者站内私信留下邮箱, 我看到机会给你发,也可以主动联系我博客名。 因为最近太忙一直没有上传完。我会尽快传完…

中小企业物流配送管理系统SSM开发MYSQL数据库javaweb项目j2ee实现

本项目使用IDEA JavaBean Servlet MVC和MYSQL开发,需要eclipse SSM SpringSpringMVCMyBatis或SQL server数据库的请联系QQ1978519681 1 数据库概念设计 2 功能 功能包含:货物种类 货物信息管理 入库 出库 库存盘点 车辆管理 物流配送管理 客户管理 员工管理 3 效果演示

基于SSH的物流配送信息管理平台设计与实现

目 录 1 引言 3 1.1 目的 3 1.2 背景 3 1.3 参考资料 3 1.4 术语 3 2 任务概述 4 2.1 目标 4 3 需求规定 4 3.1 一般性需求 4 3.2 功能性需求 4 6、 中心库房管理员:存放公司所配送的货物,是公司货物的入口。 4 3.2.2 整体业务流程描述 5 1、 客服接收客…

物流管理系统需要的服务器,物流业务管理系统

erp系统物流门店收银方案概述 连锁门店在国内的兴起,服务好,品牌一致,在工作效率上已经不能靠从前的记账方式。现成于条码技术,可以解决现在管理中快速的定位,集中处理,少出错等问题。采用GPRS无线网络,可以解决各个分店到总部的数据远程实时传输。便于集中统一管理,货…

物流配送管理系统(ssm,mysql)

可以实现数据的图形展示、报表展示、报表的导出、打印。 1、仓储数据分析: 将2018年12月1日青岛仓出库量与 1、 仓储主题 仓库分为冷冻仓和冷藏仓,仓库地点至少三个,一个地点有多个冷冻仓和冷藏仓。时间为日、月、季度、年。商品为具体的生鲜产品。仓库设置仓库维度、时间…

【附源码】计算机毕业设计SSM物流配送系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

快递配送管理系统毕业设计

技术:Java、JSP等 摘要:本快递配送管理系统是使用JSP编程语言和SQL Server2008数据库共同来完成的,采用面向对象方法,对快递配送管理系统进行设计与实现。分析设计了快递配送管理系统的静态模型和动态模型,完成了系统开…

基于C语言Win32API窗口实现的物流配送信息管理系统

一、题目 物流配送管理信息系统 二、系统功能模块结构图 2.1 函数程序模块结构图如图 1 所示: 图 1 2.2 录入子菜单功能结构图如图 2 所示: 图 2 2.3 插入的子菜单的功能结构图如图 3 所示: 图 3 2.4 修改的子菜单的功能结构图如图 4 所…

【附源码】计算机毕业设计SSM物流配送中心管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

python基于PHP+MySQL的物流配送管理系统平台

随着时代的发展,物流显得越来越重要。尤其是在网购这样的大环境冲击之下基本上物流已经充满了我们生活的每一个角落。尽管如此,但是对于那种大型的货物和车辆,仍然没有一个很好的信息共享平台。经常会出现出主找不到货源,货主找不到车源的情况。车主和货主之间形成了严重的信息…

基于PHP+MySQL的物流配送管理系统平台

随着时代的发展,物流显得越来越重要。尤其是在网购这样的大环境冲击之下基本上物流已经充满了我们生活的每一个角落。尽管如此,但是对于那种大型的货物和车辆,仍然没有一个很好的信息共享平台。经常会出现出主找不到货源,货主找不到车源的情况。车主和货主之间形成了严重的信息…

物流 计算机管理 好处,物流配送管理系统的好处与可行性分析

原标题:物流配送管理系统的好处与可行性分析 物流配送是物流业的基本职能之一。它在物流活动中具有重要的地位和作用。它反映了物流的最终效果。选择正确的配送路线不仅可以提高配送效率,还可以更好地为客户服务。提供贴心的送货服务。 使用物流配送系统…

物流配送信息管理系统java_基于jsp的物流配送管理系统-JavaEE实现物流配送管理系统 - java项目源码...

基于jspservletpojomysql实现一个javaee/javaweb的物流配送管理系统, 该项目可用各类java课程设计大作业中, 物流配送管理系统的系统架构分为前后台两部分, 最终实现在线上进行物流配送管理系统各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类物流配送管…

基于Springboot+Vue+ElementUI物流配送管理系统

程序开发软件: Eclipse/Idea Vscode Mysql Redis 采用技术: Springboot Vue ElementUI 本系统实现一个物流管理系统。具体功能描述如下: 1.系统其它信息管理:主要是针对系统的其他的信息进行管理,实现了系统的模块…

java物流管理系统代码_Java物流配送管理系统 Spring 源码下载

生鲜配送管理系统功能概要 l 系统整体流程图 l 订单管理 流程描述 功能描述 订单来源主要有微信商城、网站商城、客服录入、餐桌计划的自动下单。 订单主要分回馈类订单、正常订单。回馈类订单又有卡、券之分,正常订单有预付款、卡(固定搭配,自由搭配)…