让 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
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>启动页面</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> <style>
html，正文 {
高度：100%；
宽度：100%；
} 身体 {
背景图像： url('./static/images/pexels.jpg');
背景尺寸：封面；
白颜色;
} 主要的 {
宽度：100%；
高度：100%；
显示：弯曲；
对齐项目：居中；
证明内容：中心；
} .time-con {
显示：弯曲；
弹性包装：无包装；
对齐项目：基线；
证明内容：中心；
} </style>
</head> <body> <main class="w3-display-container">
<div class="w3-display-middle">
<h1 class="w3-jumbo">快来了！</h1>
<div class="time-cont">
<p id="time_p" class="w3-large w3-center">10 天 12 小时 15 分钟 45 秒</p>
<span>更多的</span>
</div>
</div>
</main> </body>
</html>
上面的代码是一个普通的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。
...
<title>启动页面</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> <style>
html，正文 {
高度：100%；
宽度：100%；
} 身体 {
背景图片: url('/static/images/pexels.jpg');
背景尺寸：封面；
白颜色;
}
...
要运行它，至于我们已经达到的目的，您需要启动服务器。打开命令提示符或终端并执行以下操作：
$ uvicorn main:app --reload
这 ** 主要：应用程序** 正在调用 main.py 文件并运行 ** 应用程序** 我们声明为的变量 ** 应用程序 = FastAPI()** 在 main.py
运行这个，你应该看到和以前一样的东西。唯一的变化是，现在我们不使用点相对路径来服务我们的图像。接下来我们将开始编写python代码，它将来自服务器。
你好浏览器
让我们编写第一个在浏览器中运行的 Python 代码。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>启动页面</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <style> ... </style>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head> <body> <main class="w3-display-container">
<div class="w3-display-middle">
<h1 class="w3-jumbo">快来了！</h1>
<div class="time-cont">
<p id="time_p" class="w3-large w3-center">10 天 12 小时 15 分钟 45 秒</p>
<span>更多的</span>
</div>
<py-script>
print('你好浏览器')
</py-script>
</div>
</main> </body>
</html>
上面的代码链接了 PyScript 的 css 和 JavaScript。然后我们有一个 ** _
由于 Uvicorn 是使用 reload 参数调用的，因此您应该能够刷新页面并看到如下所示的内容。如果您已关闭它，请再次在终端中运行 Uvicorn 代码，然后刷新您的浏览器
就目前而言 你好浏览器 ，打印在我们定义的地方 **
创建新文件 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
... </style>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- 路径：
- /静态/python/countdown.py
</py-env> </head> <body> ...
在上面的代码中，我们添加了一个 ** _
现在删除 hello 浏览器代码并像在 python 中一样导入这个文件
主文件
... <span>更多的</span>
</div>
<py-script>
从倒计时导入 get_time
</py-script>
</div>
</main> ...
现在使用 ** 异步** ，让我们调用我们的 ** 获取时间** 内部声明的函数 ** 倒计时.py** 每秒给我们剩余的时间字符串。
主文件
... <py-script>
从倒计时导入 get_time
导入异步
异步定义tell_time（）：
而真：
time_p = Element('time_p').write(get_time())
等待 asyncio.sleep(1)
pyscript.run_until_complete(tell_time()) </py-script> ...
在上面的代码中，我们使用 ** 异步** 关键词。这个函数调用我们的 ** 获取时间** 函数并将其写入返回字符串作为 ** 时间_p** ， 哪一个是 ** _
_** 有'的标签 ** 10 天 12 小时 15 分钟 45 秒** ' 前。它在一个 ** 尽管** 循环，永远运行。它只休眠一秒钟，因此当此代码运行时，时间字符串将每秒更改一次。然后我们调用 ** pyscript.run_until_complete** 运行 ** 异步** 功能 ** 告诉时间** .在这种情况下，它永远不会完成。这证明python确实在浏览器中运行，因为您可以关闭服务器，在页面加载完成后，您仍然会永远获得时间更新。
现在完整的 index.html 文件应该看起来像
索引.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>启动页面</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <style>
html，正文 {
高度：100%；
宽度：100%；
} 身体 {
背景图片: url('/static/images/pexels.jpg');
背景尺寸：封面；
白颜色;
} 主要的 {
宽度：100%；
高度：100%；
显示：弯曲；
对齐项目：居中；
证明内容：中心；
} .time-con {
显示：弯曲；
弹性包装：无包装；
对齐项目：基线；
证明内容：中心；
} </style> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env>
- 路径：
- /静态/python/countdown.py
</py-env> </head>
<body> <main class="w3-display-container">
<div class="w3-display-middle">
<h1 class="w3-jumbo">快来了！</h1>
<div class="time-cont">
<p id="time_p" class="w3-large w3-center">10 天 12 小时 15 分钟 45 秒</p><span>更多的</span>
</div> <py-script>
从倒计时导入 get_time
导入异步
异步定义tell_time（）：
而真：
time_p = Element('time_p').write(get_time())
等待 asyncio.sleep(1)
pyscript.run_until_complete(tell_time()) </py-script>
</div> </main> </body>
</html>
现在，当您刷新页面或重新运行 uvicorn 时，您应该会看到如下内容：
全部完成！
最后的想法
目前 PyScript 正在大力开发中，而且还有些不稳定。将其安装在您的服务器上以增加加载时间还没有完全完成。但这很快就会完成，加载时间会更快。文档也很害怕，但 python 社区正在反对这一点。
虽然 PyScript 处于实验模式，但潜在的改编也应该处于实验模式，在您的家庭和办公室中，作为爱好项目和资金充足的研究。未来是光明的。
再见。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
