Pyscript，使用Python编写前端脚本

介绍

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://www.mzph.cn/news/469394.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何把应用程序app编译进android系统

如何把应用程序app编译进android系统

转载&#xff1a;http://ywxiao66.blog.163.com/blog/static/175482055201152710441106/------------------------------------------------------------------把常用的应用程序编译到img文件中&#xff0c;就成了系统的一部分&#xff0c;用户不必自己安装&#xff0c;当然也卸…
阅读更多...
【Pytorch神经网络实战案例】08 识别黑白图中的服装图案(Fashion-MNIST)

【Pytorch神经网络实战案例】08 识别黑白图中的服装图案(Fashion-MNIST)

1 Fashion-MNIST简介 FashionMNIST 是一个替代 MNIST 手写数字集 的图像数据集。 它是由 Zalando&#xff08;一家德国的时尚科技公司&#xff09;旗下的研究部门提供。其涵盖了来自 10 种类别的共 7 万个不同商品的正面图片。 FashionMNIST 的大小、格式和训练集/测试集划分与…
阅读更多...
PHP list的赋值

PHP list的赋值

List右边的赋值对象是一个以数值为索引的数组&#xff0c;左边的变量的位置和赋值对象的键值一一对应&#xff0c;有些位置的变量可以省略不写。非末尾的被赋值变量省略时&#xff0c;分隔的逗号不能省略。左边变量被赋值的顺序是从右到左的。 1 list($a, ,$b,$c[],$c[]) [1,2…
阅读更多...
Pyscript，创建一个能执行crud操作的网页应用

Pyscript，创建一个能执行crud操作的网页应用

目录 实现一个添加邀请客人名单的功能 循序渐进&#xff0c;逐步实现&#xff1a; 输入客人名称&#xff0c;按下enter键添加客人名单点击客人名单在名单上添加或者取消添加删除线&#xff0c;表示已经检查客人到场或未到场 checkbox&#xff0c;点击客人名单或者点击checkb…
阅读更多...
爬虫实战学习笔记_1 爬虫基础+HTTP原理

爬虫实战学习笔记_1 爬虫基础+HTTP原理

1 爬虫简介 网络爬虫&#xff08;又被称作网络蜘蛛、网络机器人&#xff0c;在某些社区中也经常被称为网页追逐者)可以按照指定的规则&#xff08;网络爬虫的算法&#xff09;自动浏览或抓取网络中的信息。 1.1 Web网页存在方式 表层网页指的是不需要提交表单&#xff0c;使…
阅读更多...
LeetCode | HouseCode 算法题

LeetCode | HouseCode 算法题

题目&#xff1a; You are a professional robber planning to rob houses along a street. Each house has a certain amount of money stashed, the only constraint stopping you from robbing each of them is that adjacent houses have security system connected and it…
阅读更多...
爬虫实战学习笔记_2 网络请求urllib模块+设置请求头+Cookie+模拟登陆

爬虫实战学习笔记_2 网络请求urllib模块+设置请求头+Cookie+模拟登陆

1 urllib模块 1.1 urllib模块简介 Python3中将urib与urllib2模块的功能组合&#xff0c;并且命名为urllib。Python3中的urllib模块中包含多个功能的子模块&#xff0c;具体内容如下。 urllib.request&#xff1a;用于实现基本HTTP请求的模块。urlb.error&#xff1a;异常处理…
阅读更多...
Python解决多个进程服务重复运行定时任务的问题

Python解决多个进程服务重复运行定时任务的问题

记录多实例服务定时任务出现运行多次的问题 问题&#xff1a;web项目运行多个实例时&#xff0c;定时任务会被执行多次的问题 举例来说 我使用库APScheduler排定了一个定时任务taskA在每天的晚上9点需要执行一次&#xff0c;我的web服务使用分布式运行了8个实例&#xff0c;于…
阅读更多...
java----IO和NIO的区别

java----IO和NIO的区别

概念&#xff1a;NIO即New IO&#xff0c;这个库是在JDK1.4中才引入的。NIO和IO有相同的作用和目的&#xff0c;但实现方式不同&#xff0c;NIO主要用到的是块&#xff0c;所以NIO的效率要比IO高很多。在Java API中提供了两套NIO&#xff0c;一套是针对标准输入输出NIO&#xf…
阅读更多...
【Pytorch神经网络理论篇】 11 卷积网络模型+Sobel算子原理

【Pytorch神经网络理论篇】 11 卷积网络模型+Sobel算子原理

同学你好&#xff01;本文章于2021年末编写&#xff0c;已与实际存在较大的偏差&#xff01; 故在2022年末对本系列进行填充与更新&#xff0c;欢迎大家订阅最新的专栏&#xff0c;获取基于Pytorch1.10版本的理论代码(2023版)实现&#xff0c; Pytorch深度学习理论篇(2023版)…
阅读更多...
ubuntu 14.04中文显示乱码问题

ubuntu 14.04中文显示乱码问题

乱码显示如下&#xff1a; [<E9><97><AE><E9><A2><98><E6><8F><8F><E8><BF><B0>]:<E5><A2><9E><E5><8A><A0>tm100<E9><A1><B9><E7><…
阅读更多...
DataFrame高效处理行列数据/倒三角型数据/处理阶梯型数据/根据列的值确定行的值

DataFrame高效处理行列数据/倒三角型数据/处理阶梯型数据/根据列的值确定行的值

锲子 在使用pandas处理数据时&#xff0c;遇到了一种要按照留存天数来处理的数据&#xff0c;当列所对应的日期超过了最晚的“今天”那么数据就要置为0&#xff0c;举个例子&#xff1a; 在这个DataFrame中&#xff0c;需要将超过了今天2022-10-30的数据置为“-”&#xff0c…
阅读更多...
转载 ---资深HR告诉你：我如何筛选简历与选择人员的

转载 ---资深HR告诉你：我如何筛选简历与选择人员的

资深HR告诉你&#xff1a;我如何筛选简历与选择人员的 有个公司HR看简历 先直接丢掉一半 理由是不要运气不好的应聘者。 当然这可能只是某些HR面对太多的简历产生了偷懒的情绪&#xff0c;但是不论是Manager&#xff0c;亦或是Team Leader&#xff0c;都会遇到招聘的问题&#…
阅读更多...
爬虫实战学习笔记_3 网络请求urllib模块：设置IP代理+处理请求异常+解析URL+解码+编码+组合URL+URL连接

爬虫实战学习笔记_3 网络请求urllib模块：设置IP代理+处理请求异常+解析URL+解码+编码+组合URL+URL连接

1 设置IP代理 1.1 方法论述 使用urllib模块设置代理IP是比较简单的&#xff0c;首先需要创建ProxyHandler对象&#xff0c;其参数为字典类型的代理IP&#xff0c;键名为协议类型&#xff08;如HTTP或者HTTPS)&#xff0c;值为代理链接。然后利用ProxyHandler对象与buildopene…
阅读更多...
vim 插件cscope　使用

vim 插件cscope　使用

&#xff11;&#xff0e;安装　sudo apt-get install cscope &#xff12;&#xff0e;初始化　cscope -Rbq　你想在哪个目录下面用这个功能&#xff0c;就在哪个目录下面运行这个命令 &#xff13;&#xff0e;vim kpd.c &#xff14;&#xff0e;输入　:cs add cscope.o…
阅读更多...
Sanic服务启动失败，报错Cannot finalize with no routes defined

Sanic服务启动失败，报错Cannot finalize with no routes defined

Sanic服务启动失败&#xff0c;记录解决方法 问题描述 Sanic服务启动失败&#xff0c;同样的代码和python版本在之前的win10系统上运行的好好的&#xff0c;换了台win11的机器就跑不起来了&#xff0c;不知道是系统原因还是因为换了执行pycharm等其他原因 在尝试启动时总是会…
阅读更多...
打一波鸡血

打一波鸡血

在朋友圈看的一首诗&#xff0c;觉得很励志&#xff0c;如下&#xff1a;问题在于过度担心未来总是埋怨现在不断惋惜过往内心不知足想法逾现实行动很迟缓时间可贵青春难再审视脚下的路充实度日一日尚短庸碌混迹一日便长无妄的借口只会难上加难脚踏实地走才能遇难成祥守住时光用…
阅读更多...
【Pytorch神经网络理论篇】 12 卷积神经网络实现+卷积计算的图解

【Pytorch神经网络理论篇】 12 卷积神经网络实现+卷积计算的图解

同学你好&#xff01;本文章于2021年末编写&#xff0c;获得广泛的好评&#xff01; 故在2022年末对本系列进行填充与更新&#xff0c;欢迎大家订阅最新的专栏&#xff0c;获取基于Pytorch1.10版本的理论代码(2023版)实现&#xff0c; Pytorch深度学习理论篇(2023版)目录地址…
阅读更多...
vim 函数列表插件

vim 函数列表插件

&#xff11;&#xff0e;apt-get install exuberant-ctags &#xff12;&#xff0e;unzip taglist_42.zip　　把解压出来的文件放到 /home/weiqifa(自己的用户名)/.vim/　　资源下载&#xff1a; http://download.csdn.net/detail/weiqifa0/9137283&#xff13;&#xff0e;s…
阅读更多...
【Pytorch神经网络实战案例】09 使用卷积提取图片的轮廓信息（手动模拟Sobel算子）

【Pytorch神经网络实战案例】09 使用卷积提取图片的轮廓信息（手动模拟Sobel算子）

1 载入图片并显示 import matplotlib.pyplot as plt import matplotlib.image as mpimg import torch import torchvision.transforms as transforms import os os.environ["KMP_DUPLICATE_LIB_OK"]"TRUE" ### 1 载入图片并显示 myimg mpimg.imread(img.…
阅读更多...
最新文章

Copyright @ 2022~2023