如何让Python在HTML中运行
作者:程序猿DD 发布时间:2023-06-13 08:21:28
最近一直在更新Java新特性和IDEA Tips两个专栏,其他方向内容的动态关注少了。昨天天晚上刷推的时候,瞄到了这个神奇的东西,觉得挺cool的,拿出来分享下:
相信你看到图,不用我说,你也猜到是啥了吧?html里可以跑python代码了!
看到好多知识已经开始猛吹未来了,但乍看怎么觉得有点像JSP?或者一些模版引擎?是进步还是倒退呢?与其瞎想,不如仔细看看这个东东的能力吧!
根据官方介绍,这个名为PyScript的框架,其核心目标是为开发者提供在标准HTML中嵌入Python代码的能力,使用 Python调用JavaScript函数库,并以此实现利用Python创建Web应用的功能。
看到介绍里提到了调用JavaScript函数库的能力,看来跟JSP或者模版引擎还是有区别的。
PyScript 快速体验
官方给了一个例子,可以帮助我们观的感受这个开发框架的能力,不妨跟着DD看看,它能做啥吧!
第一个案例,hello world
代码很简单,就下面这几行。你只需要创建一个html文件,然后复制进去就可以了。
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
print('Hello, World!')
</py-script>
</body>
</html>
保存好之后,在浏览器里打开就能看到这样的页面了:
回头再看看这个html里的内容,三个核心内容:
引入pyscript的样式文件:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
引入pyscript的脚本文件:
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
标签中写具体的python代码来输出Hello World
如果你懒得自己敲代码的话,本文的两个案例代码可以从百度网盘获取。
第二个案例,数据定义 + 数据展示
先创建一个data.py
文件,然后加入前面的代码。功能很简单,就是随机生成(x,y)的坐标
import numpy as np
def make_x_and_y(n):
x = np.random.randn(n)
y = np.random.randn(n)
return x, y
再创建一个html文件,加入下面的代码
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- matplotlib
- paths:
- /data.py
</py-env>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
from data import make_x_and_y
x, y = make_x_and_y(n=1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>
这里就稍微复杂一些了,除了hello world中的几个要点外,这里还有这几个要关注的地方:
<py-env>
标签:这里声明要引入的包和要引入的文件(上面创建的data.py
)<py-script output="plot">
:这里定义了要在<div id="plot"></div>
中输出的内容,可以看到这里的逻辑都是用python写的
这个页面的执行效果是这样的:
是不是很神奇呢?整个过程中都没有大家熟悉的cs、js内容,就完成了这样一个图的页面实现。
小结
最后,谈谈在整个尝试过程中,给我的几个感受:
开发体验上高度统一,对于python开发者来说,开发Web应用的门槛可以更低了
感觉性能上似乎有所不足,几个复杂的案例执行有点慢,开始以为是部分国外cdn的缘故,后来移到本地后,还是慢。这部分可能还需要进一步优化。
这个开发框架目前还只是alpha版本,未来一定还会有更多特性与优化出来,总体上我觉得这个框架还是非常cool的,尤其对于刚学会Python,或者只会Python,但又想快速开发Web应用的小伙伴来说,可能将会是个不错的选择,那你觉得这个框架如何?未来会不会火?留言区聊聊吧!
本文的两个案例代码放在百度网盘了,需要的点击获取吧。
链接: https://pan.baidu.com/s/18KV0P7Ly_rRvTn0xi3zCWQ
提取码: 4wzd
来源:https://blog.csdn.net/dyc87112/article/details/124679441
猜你喜欢
- 逐步回归的基本思想是将变量逐个引入模型,每引入一个解释变量后都要进行F检验,并对已经选入的解释变量逐个进行t检验,当原来引入的解释变量由于后
- pinyinEngine ™v0.1JavaScript拼音搜索引擎应用场景:可对本地缓存数据进行拼音匹配,如SNS网站好友快速查找、地区匹
- python脚本替换指定行实现步骤 本文主要介
- 小编语:小编我最早使用的网页制作工作就是FrontPage啦,FrongPage方便简单,会用Word就能做网页。如果你对网页制作要求不高,
- python版本: Python 2.7.61: sys是python自带模块. 利用 import 语句输入sys 模块。当执行impor
- if语句用来检验一个条件, 如果 条件为真,我们运行一块语句(称为 if-块 ), 否则 我们处理另外一块语句(称为 else-块 )。 e
- 马氏距离区别于欧式距离,如百度知道中所言:马氏距离(Mahalanobis distance)是由印度统计学家马哈拉诺比斯(P. C. Ma
- 阅读上一篇:交互设计模式(二)-Pagination(分页,标记页数) Tagging(标签)问题摘要用户往往想通过流行或最详尽的主题来浏览
- 如何制作一个文本文件编辑器?我们也来做一个:newdoc.asp<%@ Language=VBScript %&g
- PHP hebrev() 函数实例反向显示希伯来字符:<?php echo hebrev("á çù&
- 交待:使用的软硬件环境为Win XP SP2、SQL Server 2000 SP2个人版、普通双核台式机、1000M局域网,A机为已使用的
- jxdawei的blog:http://www.iwcn.net/本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合
- 具体代码如下所示:<?php//在子类或类内部用“::”调用本类或父类时,不是静态调用方法,而是范围解析操作符。class Paren
- 创建类from django.forms import ModelFormfrom django.forms import widgets
- 本文实例讲述了PHP实现的curl批量请求操作。分享给大家供大家参考,具体如下:<?php$ch = array();$res = a
- PyQtGraph是纯Python的,只是它底层调用的是PyQt,也就是Qt的Python封装,底层用C/C++语言开发的库,它是在PyQt
- 查看Tensor尺寸及查看数据类型Tensor尺寸查看命令:x.shape例子:input = torch.randn(20,16,50,3
- 本文实例讲述了python实现超简单端口转发的方法。分享给大家供大家参考。具体如下:代码非常简单,实现了简单的端口数据转发功能,用于真实环境
- Delphi连接MySQL真麻烦,研究了一天,从网上找了无数文章,下载了无数插件都没解决。最后返璞归真,老老实实用ADO来连接,发现也不是很
- Python提供了一些内建函数用于基本对象类型:cmp(),repr(),str(),type()和等同于repr()的('