PyScript：让Python在HTML中运行

家好，我是DD，已经是封闭在家的第51天了！

最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）两个原创专栏，其他方向内容的动态关注少了。昨天天晚上刷推的时候，瞄到了这个神奇的东西，觉得挺cool的，拿出来分享下：

相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑python代码了！

看到好多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

如果你懒得自己敲代码的话，本文的两个案例代码我打包放在公众号了，需要的朋友可以关注公众号“程序猿DD”，回复：pyscript 获取。

第二个案例，数据定义 + 数据展示

先创建一个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应用的小伙伴来说，可能将会是个不错的选择，那你觉得这个框架如何？未来会不会火？留言区聊聊吧！

面介绍过Django项目创建app，里面演示时直接返回了一个HttpResponse。但是实际开发中很少直接返回一个HttpResponse，一般都是使用html。这里就来介绍一下具体怎么使用。

创建html

在app的目录下面新建一个templates文件夹，在这个文件夹中可以新建html：

新建模板文件

使用html

直接在view.py中通过render方法加载：

加载模板文件

这里运行的时候可能会遇到找不到html的报错。具体原因不清楚，但是解决方法比较简单，直接到settings.py文件指定一下templates的地址：

指定templates地址

运行一次之后，就可以删除了，之后运行都会自动到当前app目录下的templates文件夹下面找html。一般这个DIRS是配置根目录的templates地址的，不知道为什么第一次运行的时候没有到当前app下找templates。

静态文件引用

html的中经常要引用一些静态文件，这些静态文件必须放到同一个app下面的static文件夹里面：

引用静态文件

不过上面这种引用方式比较死板，直接将静态文件的地址写死了。比较推荐的方式是这种方式：

引用静态文件

这里加载的static，其实是settings.py中的这个变量：

静态文件夹地址

这样引用静态文件的好处是万一路径变更，可以直接改STATIC_URL，不用改模板文件中的引用。

最终运行的效果是一样的：

运行效果

总结

现在实际工作中基本都是前后端分离的，django项目主要是作为后端工程，很少需要python工程师写html及其他静态文件。不过作为初学者，了解一下django中静态文件的使用也是可以的。

像我最近的工作中几个测开做测试平台，没有前端工程师支持，就只能自己写html，毕竟老话说的好，技多不压身。

Web 浏览器中运行 Python 有两种主要方法：

Brython 是 Python 3 的实现，可用于在浏览器中运行 Python 代码。这是一个 JavaScript 库，它将 Python 代码编译为 JavaScript，然后浏览器可以执行。
PyScript 是一个新框架，它允许您直接在浏览器中运行 Python 代码，而无需 JavaScript 解释器。它建立在 WebAssembly 之上，WebAssembly 是一项允许原生代码在浏览器中运行的新技术。

以下是如何使用 Brython 在 Web 浏览器中运行 Python 的步骤：

安装 Bryton。您可以通过在终端中运行以下命令来执行此操作：

pip install brython

创建新的 HTML 文件。此文件将包含您的 Python 代码。
在 HTML 文件中，将以下代码添加到 head 部分：

<script src=”https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>

在 HTML 文件中，将以下代码添加到 body 部分：

<script>
// This is your Python code.
</script>

保存 HTML 文件。
在浏览器中打开HTML文件。

Python 代码现在将在浏览器中执行。

以下是如何使用 PyScript 在 Web 浏览器中运行 Python 的步骤：

安装 PyScript。您可以通过在终端中运行以下命令来执行此操作：

npm install -g pyscript

创建新的 HTML 文件。此文件将包含您的 Python 代码。
在 HTML 文件中，将以下代码添加到 head 部分：

<script src=”https://unpkg.com/pyscript@0.1.25/dist/pyscript.js"></script>

在 HTML 文件中，将以下代码添加到 body 部分：

<py-script>
// This is your Python code.
</py-script>

保存 HTML 文件。
在浏览器中打开HTML文件。 Python 代码现在将在浏览器中执行。

对于在 Web 浏览器上运行 Python 的两种主要方式，将提供示例代码：

Brython :

<!DOCTYPE html>
<html>
<head>
<title>Brython Example</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>
</head>
<body>
<script>
# This is the Brython code.

import random

def generate_lorem_ipsum():
 “””Generates a lorem ipsum paragraph.”””
 words = [“Lorem”, “ipsum”, “dolor”, “sit”, “amet”, “consectetur”, “adipiscing”, “elit”, “sed”, “do”]
 return “”.join(random.choice(words) for _ in range(100))

# This is the HTML code.

<div id=”content”>
<h1>Brython Example</h1>
<p>This is a paragraph generated by Brython.</p>
<p id=”lorem_ipsum”>
{{ generate_lorem_ipsum() }}
</p>
</div>
</script>
</body>
</html>

PyScript的

<!DOCTYPE html>
<html>
<head>
<title>PyScript Example</title>
<script src=”https://unpkg.com/pyscript@0.1.25/dist/pyscript.js"></script>
</head>
<body>
<py-script>
# This is the PyScript code.

import random

def generate_lorem_ipsum():
 “””Generates a lorem ipsum paragraph.”””
 words = [“Lorem”, “ipsum”, “dolor”, “sit”, “amet”, “consectetur”, “adipiscing”, “elit”, “sed”, “do”]
 return “”.join(random.choice(words) for _ in range(100))

# This is the HTML code.

<div id=”content”>
<h1>PyScript Example</h1>
<p>This is a paragraph generated by PyScript.</p>
<p id=”lorem_ipsum”>
{{ generate_lorem_ipsum() }}
</p>
</div>
</py-script>
</body>
</html>

Brython 和 PyScript 都是在 Web 浏览器中运行 Python 的绝佳选择。Brython 是一种更成熟的技术，但 PyScript 较新，并且具有 Brython 所没有的一些功能，例如与 DOM 交互的能力。

在线咨询

上一篇：得物AppH5秒开优化实战
下一篇：1分钟，彻底弄懂浏览器缓存策略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商