Pyscript，使用Python编写前端脚本

article/2025/10/8 20:03:15

介绍

Anaconda的CEO Peter Wang在前两个月的时候发布了Pyscript，实现了在HTML支持Python的使用，整个引用过程甚至不需要安装任何环境，只需要使用link和script标签即可引用实现Python在HTML中运行的功能，在HTML中也可以运行和使用各种数据分算法析、matlabplot可视化等功能

如何让HTML支持Python代码

目前Pyscript主要使用css和js代码实现，如果要使用Pyscript实现在HTML中运行Python代码，需要在head部分添加link和script引用Pyscript源

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

当然也可以直接在将连接的代码下载到本地，在本地引用
不过考虑到目前pyscript还会有很多的更新，在本地引用需要定时下载最新的源代码到本地

<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>

首先运行一个简单的Python脚本

使用py-script直接在HTML文件编写Python脚本，在body里面写一段

<h1>Simple Python Script</h1>
<py-script>
print("hello pyscript")
</py-script>

在页面上就可以看到“hello pyscript”了
在这里插入图片描述
注意在HTML文件中编写的Python代码需要保持Python的正确格式缩进

引用编写好的Python模块，而不是在HTML中编写Python代码

在HTML中编写Python代码不会有IDE编写Python代码时的补全提示，因此我们需要一种容易编写的方式来实现HTML引用Python代码

<!--demo1.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pyscript Demo</title><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1>Simple Python Script</h1>
<py-script src="./simple_script.py"></py-script>
</body>
</html>

# simple_script.py
import math
print([math.sqrt(i) for i in range(5)])

页面展示效果：
在这里插入图片描述
也就是说，可以直接在py-script标签中指定引用Python模块，print就会将结果展示到页面上（关于如何渲染成想要的效果，比如一个下拉列表、一张表格和弹出动画等，会在后续逐步学习panel库+pyscript的使用来实现这些功能，结尾也介绍了一个使用Python的panel库+pyscript实现下拉列表的示例）

在页面上展示Python交互式命令行py-repl

在页面上展示类似anaconda的运行Python的交互命令行py-repl(Python Read-Evaluate-Print-Loop)，在body中加入以下代码

<h2>Interactive REPL</h2>
<py-repl id="repl-demo" auto-generate="true"></py-repl>

auto-generate选项只要提供，在Python REPL按shift+enter执行就会生成新的一行
展示效果：
在这里插入图片描述
输入Python代码，按shift+enter运行

在HTML中使用py-env提前定义好要使用的Python第三方扩展库

前面的simple_scipt中引用了Python内置的math库，直接按照平常写Python代码一样import然后使用即可，但是如果是第三方库，比如我想使用pandas（已经提前使用pip安装好了pandas）：

# simple_script.py
import pandas as pddf = pd.DataFrame({"a": [1, 2]})
print(df)

html文件仍然和前面的demo1.html一样，然后在前端展示时会发现报错了：
在这里插入图片描述
为了使用第三方库，除了使用pip为Python安装以外，还需要在head中加入以下代码：

<py-env>- pandas
</py-env>

当然在Python代码使用之前的body中添加都可以
展示效果：
在这里插入图片描述

图表可视化操作展示到前端页面

在前端展示matplotlib画出来的图表，以往matplotlib的画图都只是在本地弹出一个图像展示，现在，可以把它渲染到前端，还能做各种移动、放大和保存等操作
在实现之前，先引用js相关的画图脚本
在head添加引用bokeh依赖包（这个包是一个画图用的包，可能类似matlab之类的，或者更厉害），这里bokeh中有引用panel，所以需要一同引用，这里的panel是js的依赖包，需要和py-env中Python的panel库引用区分开来

    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js"></script>

Python可视化画图脚本

# visualization.py
import asyncio
import pandas as pd
import numpy as np
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from panel.io.pyodide import showloop = asyncio.get_event_loop()
df = pd.DataFrame(np.random.randn(10, 4), columns=list("ABCD")).cumsum()
p = figure(height=450, width=600)
cds = ColumnDataSource(data=ColumnDataSource.from_df(df))
p.line('index', 'A', source=cds, line_color='firebrick')
p.line('index', 'B', source=cds, line_color='dodgerblue')
p.line('index', 'C', source=cds, line_color='goldenrod')
p.line('index', 'D', source=cds, line_color='purple')
loop.run_until_complete(show(p, 'plot-demo'))

这里的Python代码与图像可视化有关，如果不熟悉不需要在意，如果有需要可以细入学习bokeh相关的可视化知识

在head中的py-env标签中添加Python代码中引用到的bokeh和panel依赖库

    <py-env>- pandas- bokeh- panel</py-env>

然后在body中添加如下代码，引用visualization.py的代码

<h3>Visualization</h3>
<div id="plot-demo"></div>
<py-script src="./visualization.py"></py-script>

得到完整的html代码：

<!--demo1.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pyscript Demo</title><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js"></script><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script><py-env>- pandas- bokeh- panel</py-env>
</head>
<body>
<h1>Simple Python Script</h1>
<py-script src="./simple_script.py"></py-script>
<h2>Interactive REPL</h2>
<py-repl id="repl-demo" auto-generate="true"></py-repl>
</br>
<h3>Visualization</h3>
<div id="plot-demo"></div>
<py-script src="./visualization.py"></py-script>
</body>
</html>

查看页面展示效果：
在这里插入图片描述
这个图像支持拖拽、放大缩小和下载成png等操作，如果需要更多的展示需求还可以在bokeh官方资源站学习

练习：在页面上展示下拉列表

# main.py
import panel as pndef show_dropdown_list():pn.extension()select = pn.widgets.select.Selectcharacter_list = ["Aria", "Tiger", "Shana", "Louise", "Nagi"]s = select(name="Character List", options=character_list)pn.FlexBox(s).servable(target="select-list")show_dropdown_list()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js"></script><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script><title>PyScript Practice</title>
</head>
<py-env>- panel- pandas
</py-env>
<body>
<div id="select-list"></div>
<py-script src="./main.py"></py-script>
</body>
</html>

展示效果：
在这里插入图片描述
参考panel使用文档：https://panel.holoviz.org/reference/widgets/Select.html

总结
本篇文章所包含的内容

  1. 在HTML引入pyscript的js支持在HTML中编写Python代码以及在HTML中导入编写好的Python脚本
  2. 注意在py-env标签中提前声明pyscript的依赖包（bokeh是一个画图用的依赖包，需要区分Python的库和js的依赖）
  3. py-repl(Read-Evaluate-Print-Loop)提供类似shell的交互式python命令行
  4. 用pyscript+bokeh+panel做页面图像可视化
  5. 一个pyscript实现的下拉列表展示练习

pyscript让HTML支持直接使用或引用Python，这让HTML能够使用Python很多的特有功能和强大的库，但就目前来看pyscript仍处于需要大量开发的阶段，存在不少的问题，这一点从官网的陈述中也可以看出，所以目前并不建议现在投入到实际生产环境中，虽然但是，pyscript可以用来写一些简单的网站，比如我最近要写一个自用的自动化脚本，需要一些支持手动输入，但又要保持一定的纠错能力，还得需要一些交互，学习js要花不少的时间，但用pyscript就能很快的上手


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

相关文章

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

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

如何进入python交互界面 Python交互模式有两种&#xff1a;图形化的交互模式或者命令行的交互模式。打开步骤&#xff1a;首先点击开始菜单。 然后在搜索栏中输入Python&#xff0c;即可看到图形化的交互模式&#xff08;IDLE&#xff08;Python 3.7 64-bit&#xff09;&…
阅读更多...
前端运行python代码几种方式_前端和python

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

广告关闭 腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！ 如果您细心对比过 json python sdk 和 xml python sdk 的文档，您会发现并不是一个简单的增量更新。 xml python sdk 在架构、可用性和安全性上有了非常大的提升…
阅读更多...
逆袭之路——python 前端开发之基础部分【day38】

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

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

用Python写前端

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

jsp物流配送管理系统

jsp物流配送管理 emmmm 本系统带程序说明书 有需要的可以去我上传的资源里面找&#xff0c;找不到的话&#xff0c;评论我&#xff0c;或者站内私信留下邮箱&#xff0c; 我看到机会给你发&#xff0c;也可以主动联系我博客名。 因为最近太忙一直没有上传完。我会尽快传完…
阅读更多...
中小企业物流配送管理系统SSM开发MYSQL数据库javaweb项目j2ee实现

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

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

基于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、 中心库房管理员&#xff1a;存放公司所配送的货物&#xff0c;是公司货物的入口。 4 3.2.2 整体业务流程描述 5 1、 客服接收客…
阅读更多...
物流管理系统需要的服务器,物流业务管理系统

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

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

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

可以实现数据的图形展示、报表展示、报表的导出、打印。 1、仓储数据分析： 将2018年12月1日青岛仓出库量与 1、 仓储主题 仓库分为冷冻仓和冷藏仓，仓库地点至少三个，一个地点有多个冷冻仓和冷藏仓。时间为日、月、季度、年。商品为具体的生鲜产品。仓库设置仓库维度、时间…
阅读更多...
【附源码】计算机毕业设计SSM物流配送系统

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

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
快递配送管理系统毕业设计

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

技术&#xff1a;Java、JSP等 摘要&#xff1a;本快递配送管理系统是使用JSP编程语言和SQL Server2008数据库共同来完成的&#xff0c;采用面向对象方法&#xff0c;对快递配送管理系统进行设计与实现。分析设计了快递配送管理系统的静态模型和动态模型&#xff0c;完成了系统开…
阅读更多...
基于C语言Win32API窗口实现的物流配送信息管理系统

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

一、题目 物流配送管理信息系统 二、系统功能模块结构图 2.1 函数程序模块结构图如图 1 所示&#xff1a; 图 1 2.2 录入子菜单功能结构图如图 2 所示&#xff1a; 图 2 2.3 插入的子菜单的功能结构图如图 3 所示&#xff1a; 图 3 2.4 修改的子菜单的功能结构图如图 4 所…
阅读更多...
【附源码】计算机毕业设计SSM物流配送中心管理系统

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

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
python基于PHP+MySQL的物流配送管理系统平台

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

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

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

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

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

原标题&#xff1a;物流配送管理系统的好处与可行性分析 物流配送是物流业的基本职能之一。它在物流活动中具有重要的地位和作用。它反映了物流的最终效果。选择正确的配送路线不仅可以提高配送效率&#xff0c;还可以更好地为客户服务。提供贴心的送货服务。 使用物流配送系统…
阅读更多...
物流配送信息管理系统java_基于jsp的物流配送管理系统-JavaEE实现物流配送管理系统 - java项目源码...

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

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

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

程序开发软件&#xff1a; Eclipse/Idea Vscode Mysql Redis 采用技术&#xff1a; Springboot Vue ElementUI 本系统实现一个物流管理系统。具体功能描述如下&#xff1a; 1.系统其它信息管理&#xff1a;主要是针对系统的其他的信息进行管理&#xff0c;实现了系统的模块…
阅读更多...
java物流管理系统代码_Java物流配送管理系统 Spring 源码下载

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

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

JAVAWeb物流快递管理系统

把JAVA作为开发语言&#xff0c;sql作为数据库&#xff0c;按照软件工程的方法开发物流管理系统。系统主要分为功能模块和管理模块&#xff0c;其中功能模块主要包括登录、退出、登录密码修改&#xff1b;管理模块包括系统用户管理、客户信息管理、货物信息管理、接货单管理、车…
阅读更多...
推荐文章

Copyright @ 2022~2023