让 Python 在浏览器中运行——使用 PyScript

让 Python 在浏览器中运行——使用 PyScript

让我们建立一个倒计时网页。

介绍

有一个新的浪潮！作为数据科学、机器学习和后端语言，Python 一直是第二大和最受喜爱的语言，JavaScript 在前端和后端语言中均位居首位。现在 python 想要靠近前端或者最好还是将后端远离服务器。所以它不会是服务器代码，它只是脚本，它将在浏览器中运行。

本质上，在浏览器中使用 python，您的后端代码被下载一次并继续在浏览器中运行，就像 JavaScript 一样。所以服务器只提供一次，就像它提供任何其他文件、css、javascript图像一样。

这是通过一种称为 Web Assembly 的新技术实现的。

网络上的 WhatsApp 与我们手机上的非常不同。 PyScript 可以解决这个问题。 NetFlix 可以利用压缩技术来确保数据成本不会妨碍潜在客户，甚至 YouTube 和其他流媒体服务也可以利用这一点。那些允许下载的也可以为他们的用户提供不同的文件类型和大小。我真的认为 PyScript 在多媒体和网络方面占有一席之地。

安装

对于安装，PyScript 并不真正需要安装，您只需将其链接到您的网页。要将所有 python 代码放在 html 中，您不需要服务器，但要在单独的 python 文件中运行一些代码，您将需要服务器。所以我们将安装一个服务器，一个轻量级的。在我们可以在服务器上运行 python 之前，我们需要一个 ASGI Web 框架。我们不会真正在服务器上运行 python，但服务器将向浏览器提供文件，因为它向浏览器提供图像、css、javascript 和 html。 python 将在浏览器中运行。所以我们将使用这些库或技术。

• FastAPI — 速度最快、增长最快的 Python 框架之一
• Uvicorn — FastAPI 推荐的服务器。
• W3.css — 互联网上最小的 css 框架。最适合我们的用例

快速API

要安装 FastAPI，请打开命令提示符或终端并执行

$ pip 安装 fastapi

优维康

要安装 Uvicorn，请打开命令提示符或终端并执行

$ pip install "uvicorn[标准]"

W3.css

我们将从这里将 w3.css 链接到 webapp 关联 ，您也可以将其下载到本地计算机上。

PyScript

PyScript 提供了两个文件供您链接。一个是一个 css 文件，它只在页面上绘制一个加载器，而 PyScript 正在准备其组件。另一个是作为 Javascript 文件的入口点。

PyScript 自己的网站 PyScript.net 上提供了获取这些文件的链接。从那里，您可以选择安装选项并获取这两个文件。

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

背景图片

使用的背景图片是 Hasan Albari 的照片： https://www.pexels.com/photo/silver-and-black-laptop-computer-1229861 .

下载它，或者您可以在您的计算机上使用任何合适的图像。复制到文件夹 ** 图片** 或者你可以只使用链接。

全部完成安装和设置 .

设置目录结构

为 Web 应用程序创建一个文件夹，命名为； ** 启动页面。** 在其中创建另一个文件夹，将其命名 ** 静止的** ，然后创建一些其他 3 个文件夹，名为 ** css** , ** 图片** ， 和 ** Python** , 并将它们直接放在 ** 静止的** 文件夹。这 ** Python** 文件夹将包含您自己的 python 代码。所以你的文件夹结构应该是这样的：

启动页面
/- 静止的
--css
- 图片
- Python

前端

现在，在我们编写 Python 代码之前，我们应该先用 HTML 和 CSS 编写一个前端。

在项目目录下创建一个文件并将其命名为 index.html。

启动页面
- index.html
/- 静止的
--css
- 图片
- Python

打开 ** 索引.html** 并用这段代码填充它

索引.html

快来了！

10 天 12 小时 15 分钟 45 秒

更多的

上面的代码是一个普通的html文档，在里面声明了几行css ** 风格** 标签。身体的背景是来自 Hasan Albari 的图像。图片的 url 是一个相对路径，现在我们在前面使用一个点。这是在我们使用服务器提供服务之前。除了图像，我们要做的只有两个文本，即将推出和我们的模拟时间字符串。请注意， ** _

_** 声明我们的时间字符串的标签有一个 id，即 ** 时间_p** . ID 是脚本语言通常与 HTML 元素进行通信的方式。

右键单击该文件，然后选择打开方式，然后选择您喜欢的浏览器，您应该会在浏览器中看到与此类似的内容。

现在我们的前端已经完成。很短吧？

后端

对于 PyScript，后端是短时间的后端，因为它实际上会在浏览器中运行。我们不能说的是，“服务器端代码”，后端是允许的。所以让我们继续我们的后端。

在启动页文件夹中创建一个文件并将其命名为 main.py，因此您的目录结构应该如下所示

启动页面
- index.html
- 主要.py
/- 静止的
--css
- 图片
- Python

打开 main.py 并使用此代码填充它

主文件

从 fastapi 导入 FastAPI
从 fastapi.responses 导入 HTMLResponse
从 fastapi.staticfiles 导入静态文件
应用程序 = FastAPI() app.mount('/static', StaticFiles(directory='static'), name='static')
@app.get("/", response_class=HTMLResponse)
def read_root():
使用 open('index.html', 'r') 作为 ind：
数据 = ind.read()
返回 HTMLResponse(数据)

在上面的代码中，我们有我们的 python 导入语句。这 ** 快速API** 是主界面， ** HTML响应** 与 JSON 响应或其他形式或响应不同，这意味着响应不会被格式化为默认的 JSON。这 ** 应用挂载** 代码保证当url以'/static'（'https://domain.com/static'）开头时，应作为Static Files目录处理，其中目录为'static'，表示静态文件夹与我们的 main.py 文件在同一个文件夹中。最复杂的代码，也许是 ** @app.get** 装饰器，这意味着当用户使用 '/' ('https://domain.com/') 路径的 get 请求查询服务器时，它应该运行 ** 读根** 功能。在里面 ** 读根** 函数我们读取 index.html 并将内容作为 HTML 返回给用户

然后在 index.html 中使用 ./static 更新任何 URL 并将其更改为 /static。

...

快来了！

10 天 12 小时 15 分钟 45 秒

更多的

print('你好浏览器')

上面的代码链接了 PyScript 的 css 和 JavaScript。然后我们有一个 ** _ _** 标签，我们可以从里面运行python代码，现在我们只打印' ** 你好浏览器** '

由于 Uvicorn 是使用 reload 参数调用的，因此您应该能够刷新页面并看到如下所示的内容。如果您已关闭它，请再次在终端中运行 Uvicorn 代码，然后刷新您的浏览器

就目前而言 你好浏览器 ，打印在我们定义的地方 ** ** 标记，在父级之后 div 的 跨度 .但在未来，我们将对现有的 html 元素进行更改。

创建新文件 countdown.py。所以你的目录结构应该是这样的：

启动页面
- index.html
- 主要.py
/- 静止的
--css
- 图片
/- Python
- 倒计时.py

打开 countdown.py 文件并使用以下代码填充它。

倒计时.py

从日期时间导入日期时间
DATE_MAP = ('s', 'mns', 'Hrs', 'Days', 'Months', 'Years')
def get_time() -> str:
dt = 日期时间（2022, 10, 1, 0, 0, 0）
delta = dt - datetime.now()
clean_delta = str(delta).replace('days, ', '😂
deltas = clean_delta.split('.')[0].split('😂
x = len（增量）
stmts = [] 对于范围（x）中的 i：
指数 = x - 1 - 我
stmt = deltas[i] + DATE_MAP[ind]
stmts.append(stmt) 返回''.join（stmts）

在上面的代码中，我们有一个元组，它以简短的形式存储秒、分钟和小时以及完整的日期名称，完全没有偏见，只是常规的。然后是从 2022 年 10 月 1 日减去当前日期的函数，以查看我们还剩下多少天、多少小时等。它将结果作为字符串返回

现在导入 倒计时.py 文件到 index.html

索引.html

...


- 路径：
- /静态/python/countdown.py
...

在上面的代码中，我们添加了一个 ** _ ** 里面的标签 ** _ ** 然后导入我们的 ** 倒计时.py** ，考虑到我们在 main.py 文件中为 FastAPI 配置的静态文件夹设置。

现在删除 hello 浏览器代码并像在 python 中一样导入这个文件

主文件

... 更多的


从倒计时导入 get_time


...

现在使用 ** 异步** ，让我们调用我们的 ** 获取时间** 内部声明的函数 ** 倒计时.py** 每秒给我们剩余的时间字符串。

主文件

...
从倒计时导入 get_time
导入异步
异步定义tell_time（）：
而真：
time_p = Element('time_p').write(get_time())
等待 asyncio.sleep(1)
pyscript.run_until_complete(tell_time()) ...

在上面的代码中，我们使用 ** 异步** 关键词。这个函数调用我们的 ** 获取时间** 函数并将其写入返回字符串作为 ** 时间_p** ， 哪一个是 ** _

_** 有'的标签 ** 10 天 12 小时 15 分钟 45 秒** ' 前。它在一个 ** 尽管** 循环，永远运行。它只休眠一秒钟，因此当此代码运行时，时间字符串将每秒更改一次。然后我们调用 ** pyscript.run_until_complete** 运行 ** 异步** 功能 ** 告诉时间** .在这种情况下，它永远不会完成。这证明python确实在浏览器中运行，因为您可以关闭服务器，在页面加载完成后，您仍然会永远获得时间更新。

现在完整的 index.html 文件应该看起来像

索引.html

- 路径：
- /静态/python/countdown.py

快来了！

10 天 12 小时 15 分钟 45 秒

更多的

从倒计时导入 get_time
导入异步
异步定义tell_time（）：
而真：
time_p = Element('time_p').write(get_time())
等待 asyncio.sleep(1)
pyscript.run_until_complete(tell_time())

现在，当您刷新页面或重新运行 uvicorn 时，您应该会看到如下内容：

全部完成！

最后的想法

目前 PyScript 正在大力开发中，而且还有些不稳定。将其安装在您的服务器上以增加加载时间还没有完全完成。但这很快就会完成，加载时间会更快。文档也很害怕，但 python 社区正在反对这一点。

虽然 PyScript 处于实验模式，但潜在的改编也应该处于实验模式，在您的家庭和办公室中，作为爱好项目和资金充足的研究。未来是光明的。

再见。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23102/50360913