pyscript预研与学习

最新推荐文章于 2024-08-13 08:44:54 发布

程序员橘子皮

最新推荐文章于 2024-08-13 08:44:54 发布

阅读量380

点赞数 3

文章标签：学习 python

本文链接：https://blog.csdn.net/weixin_56241562/article/details/140251776

版权

0.背景描述

由于之前负责的项目由于需求不太明确，故先暂停了该项目的开发，而我也排到了另一个项目中负责技术调研和技术宅

下面我将从是什么，怎么用两方面进行介绍 pyscript 。

1.是什么

pyscript 是一个框架，允许 Python 代码能在 HTML 中允许，而不需要在后端中允许代码。如下图
直接在HTML中运行python代码

2.怎么用

简单介绍完 pyscript 是什么，那么接下来就是介绍怎么用。

2.1 使用场景

抛开需求谈技术，都是耍流氓~，那么我们来简单介绍一下使用场景是什么才会使用到这个技术。
需求场景：有一个 Python 考核培训系统，想让学习者直接能直接在我们的系统中直接执行 Python 代码。
技术选型的考虑：能实现这个需求的技术有几种，例如 Jupyter Notebook等，但是为什么最后选择了 Pyscript 呢？很简单：领导提的要求~

2.2 简单demo

Pyscript 提供了以下几种标签，例如:

py-env ：标签用于配置 PyScript 环境的依赖项和设置
py-script ：标签用于在 HTML 页面中嵌入和执行 Python 代码
py-repl ：标签用于在 HTML 页面中嵌入一个交互式的 Python 解释器
py-config：标签可以用来设置各种配置选项，比如是否显示错误信息、是否自动运行代码等

使用

1.引入依赖包：
这里可以有两种方式，可以使用线上依赖或者将js、css下载为本地。
线上：

 <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
 <script defer src="https://pyscript.net/latest/pyscript.js"></script>

本地：
在这里插入图片描述
2.使用标签
在 body 中使用 py-repl 标签

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/pyscript.css" />
    <script defer src="js/pyscript.js"></script>
</head>

<body>
    <div>
        <py-repl auto-generate="true"></py-repl>
    </div>
</body>

</html>

2.2 演示效果：

在这里插入图片描述

高级实例demo

案例：给出一个函数基础架构，让用户输入函数内容，点击执行后需要判断用户输入函数内容是否正确。
例如：计算函数的平方根。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PyScript FFI Demo</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
<!--    <py-env>-->
<!--        - pyodide-->
<!--    </py-env>-->
</head>
<body>
    <h1>PyScript FFI Demo</h1>
    <p id="result">结果会显示在这里</p>

    <!-- py-repl 中定义基础函数框架，用户需要补充这个函数 -->
    <py-repl id="python-repl">
def user_function(data):
    # 计算输入列表中所有元素的平方和
    result = sum(x**2 for x in data)
    return result

# 运行测试用例的函数
def run_tests():
    # 定义多个测试用例
    test_cases = [
        ([1, 2, 3, 4, 5], 55),
        ([0, 0, 0], 0),
        ([1, 1, 1, 1, 1], 5),
        ([2, 2, 2], 12),
        ([10, 10], 200),
    ]

    # 测试结果列表
    results = []

    # 遍历所有测试用例
    for i, (test_data, expected_result) in enumerate(test_cases):
        result = user_function(test_data)
        if result == expected_result:
            results.append(f"测试用例 {i+1}个 通过")
        else:
            results.append(f"测试用例 {i+1}个 失败，期望 {expected_result}，但得到 {result}")

    return results

# 自动运行测试用例并将结果传递给 JS
from js import window
def execute_tests():
    test_results = run_tests()
    for test_result in test_results:
        window.receive_data_from_python(test_result)

execute_tests()

    </py-repl>

    <script>
        // 定义一个 JS 函数用于接收来自 Python 的数据
        window.receive_data_from_python = function (data) {
            console.log("从 Python 接收到的数据:", data);
            const resultElement = document.getElementById('result');
            resultElement.innerText = data;
        };
    </script>
</body>
</html>

在这里插入图片描述

程序员橘子皮

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
pyscript预研与学习

技术选型的考虑：能实现这个需求的技术有几种，例如 Jupyter Notebook等，但是为什么最后选择了 Pyscript 呢？pyscript 是一个框架，允许 Python 代码能在 HTML 中允许，而不需要在后端中允许代码。需求场景：有一个 Python 考核培训系统，想让学习者直接能直接在我们的系统中直接执行 Python 代码。抛开需求谈技术，都是耍流氓~，那么我们来简单介绍一下使用场景是什么才会使用到这个技术。简单介绍完 pyscript 是什么，那么接下来就是介绍怎么用。
复制链接

扫一扫