抛掉 JavaScript，用 HTML 和 Python 做网站

这是「进击的Coder」的第 614 篇技术分享

作者：kingname

来源：未闻 Code

“

阅读本文大概需要 5 分钟。

”

有时候，我们的电脑上没有安装 Python，但你需要验证一段 Python 代码的运行效果。

又有时候，你想做一个网页，但是你只会 HTML 和 Python。那么如果要做一个带有一些复杂逻辑的网页，只能去学 JavaScript 吗？

其实未必。如果你不考虑网页美观的话，你可以用 HTML + Python 实现一个简单的网页。

今天我们要介绍的东西，叫做PyScript，使用它，不需要安装任何软件。只要有一个记事本，就能写一段 HTML+Python 的代码。写完以后，双击这个 HTML 文件，用浏览器打开，就能直接看到 Python 代码的运行结果。

假设我现在要写一段代码，使用高效的算法计算斐波那契数列前 10 项的值。现在我已经把代码写好了，想验证一下它是否正确：

def fib(n):
    if n in [1, 2]:
        return 1
    a = 1
    b = 1
    for _ in range(2, n):
        a, b = b, a + b
    return b

我的电脑上没有 Python，我也不知道任何在线的 Python 解释器。怎么办呢？这个时候，你只需要在这个 Python 代码的前后再添加一些 HTML 代码，把它保存成一个.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>
def fib(n):
    if n in [1, 2]:
        return 1
    a = 1
    b = 1
    for _ in range(2, n):
        a, b = b, a + b
    return b

for i in range(1, 11):
    print(f'第{i}项的结果是：{fib(i)}')
    py-script>
  body>
html>

保存以后，双击这个 HTML 文件，用浏览器打开，就可以看到运行结果了，如下图所示：

到目前为止，似乎跟那些在线的 Python 运行环境没什么区别。但 PyScript 更厉害的是，它自带了一些常见的第三方库，例如 numpy 或者 Matplot，甚至它还可以手动安装第三方库。

对于它自带的 numpy 和 matplotlib，可以直接使用标签声明：




    
<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
      py-env>
    head>

  <body>
    <h1>Let's plot random numbersh1>
    <div id="plot">div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    py-script>
  body>
html>

运行效果如下图所示：

如果你想安装第三方库，只需要去下载这个库对应的.whl文件，把它跟 HTML 文件放到一起，然后在中使用相对路径导入就可以了。但经过我的测试，导入的 requests 工作起来有点问题。因此就不多介绍了。看看官方是否会修复这个 bug 吧。

PyScript 的Github^[1]上，给了不少 Demo，甚至可以用它来做超级马里奥的网页游戏。大家有兴趣可以看看。

总结

目前仅仅从运行 Python 代码这个小功能上，PyScript 做的比 Jupyter 还是差远了。但是 PyScript 可以编辑修改 HTML 元素，这样它就可以在一定程度上替代 JavaScript，从而配合 HTML 实现一些功能复杂的网页。

参考资料

[1]

Github: https://github.com/pyscript/pyscript

End

崔庆才的新书《Python3网络爬虫开发实战（第二版）》已经正式上市了！书中详细介绍了零基础用 Python 开发爬虫的各方面知识，同时相比第一版新增了 JavaScript 逆向、Android 逆向、异步爬虫、深度学习、Kubernetes 相关内容，‍同时本书已经获得 Python 之父 Guido 的推荐，目前本书正在七折促销中！

内容介绍：《Python3网络爬虫开发实战（第二版）》内容介绍

扫码购买

好文和朋友一起看~