基于python详解PyScript到底是什么

目录
  • 前言:
  • 作用
  • 使用方法
  • 总结

前言:

最近 Anaconda 开大会发布了 PyScript ，它允许我们将 Python 代码嵌入到 HTML 中，并在浏览器中允许。PyScript 旨在为用户提供一流的编程语言，该语言具有一致的样式规则、更具表现力且更易于学习。

熟悉前端的朋友应该马上就可以反应到：这就是替代 JavaScript 啊！

确实，这个功能就类似于 JavaScript，如果后面发展得好的话，我们完全可以不写 JavaScript，直接写 Python 也能实现一样的效果。

这个项目出来之后，马上蹿升到 GitHub 趋势榜榜首，短短20天已经有 10K+ 的 star 了，可见其热度之高。

我们不知道 anaconda 有没有这个野心，但是 PyScript 的出现，确实是一件振奋人心的事情，意味着你会 Python 的话，再加上前端知识，就可以写出漂亮的前端页面了。对于 Pythoner 来说，我们可以用 Python 和 HTML前端知识做全栈工程师了。

作用

PyScript 核心特性：

  • Python in the browser：启用 drop-in content、外部文件托管（基于 Pyodide 项目），以及不依赖服务器端配置的应用程序托管。
  • Python 生态：提供流行的 Python 和科学计算软件包（例如 numpy, pandas, scikit-learn 等）。
  • Python with JavaScript：在 Python 和 JavaScript 对象和命名空间之间进行双向通信。
  • 环境管理：开发者可定义要引入哪些包和文件，以便页面代码的运行。
  • 可视化应用开发：开发者可使用现成的 UI 组件，如按钮、容器、文本框等。
  • 灵活的框架：开发者可以利用它在 Python 中直接创建和分享新的可插拔和可扩展的组件。

PyScript 目标：

  • 提供干净简单的 API。
  • 支持标准 HTML。
  • 扩展 HTML 以读取稳定且可靠的自定义组件。
  • 提供可插拔、可扩展的组件系统。

使用方法

下面，我们来体验一下这个新生事物吧！

我们可以使用 CDN 来安装 PyScript：

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

接着，我们来看看一个简单的页面：

<!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">
    <!-- 引入 PyScript -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>First PyScript Application</title>
    <style>
        py-script {
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>
<body>
    <py-script>
        print('Hello PyScript!')
    </py-script>
</body>
</html>

运行这个程序，你就可以在浏览器页面上看到这个结果了：

这就是我们著名的 Hello 式问候！

这段前端代码里面，我们直接使用 py-script 标签包裹 Python 代码，就实现前端脚本控制功能了。

我这里是在 vscode 里面运行的，运行代码之前需要安装 Live Server 这个插件，然后就可以直接浏览器访问了。

我们再来看一个复杂一点的例子：

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <br>
    <div id="pi" class="alert alert-primary"></div>
    <py-script>
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))

        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        pyscript.write('pi', f'π is approximately {pi:.3f}')
    </py-script>
  </body>
</html>

这个例子中，我们使用 <py-script> 标签，在里面提供 .write() 方法，将字符串写到页面的标签中。

运行这段代码，我们会看到浏览器页面的结果：

我们还可以在页面中引入 Python 的包，来实现一些简便的操作。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>
  <body>
    <h1>Let's plot random numbers</h1>
    <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>

在这里，我们引用了 numpy 和  matplotlib 这两个包，引用包是在 <head> 标签内部通过 <py-env> 标签来实现。

运行这个程序，我的页面始终处于加载状态：

现阶段，运行带有 PyScript 的页面加载速度还是有点感人的，好像一下子回到了原始年代。所以，想要被大家广泛使用还有很长的路要走。

目前阶段，我们还只能继续等待，想要尝鲜的话，可以在去 GitHub 上看看。在公众号后台留言 PyScript 获取项目的 GitHub 地址。

总结

项目现在还在完善阶段，许多功能还没有支持，但是从其热度和参与贡献的人数来看，前途还是光明的，毕竟 Python 有着这么多的应用基础，学会 Python 就可以写前端， Python 的那些便捷操作库都可以在页面直接使用的话，会大大提高大家的效率，我们也不用去学习现在越来越复杂的那一套前端技术了。

到此这篇关于基于python详解PyScript到底是什么的文章就介绍到这了,更多相关python PyScript内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用pyscript在网页中撰写Python程式的方法

    使用pyscript在网页中撰写Python程式的方法

    根据 Anaconda 的项目 pyscript,可以将 python 的代码直接写在网页中,目前只支援两种标签,分别是<py-script> 与 <py-repl>,以下是简单的示例. 使用这两行导入 pyscript <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel=&

  • python开发环境PyScripter中文乱码问题解决方案

    PyScripter看起来还是挺不错的一个python ide 环境: PyScripter 2.6.0.0 python3.4 问题: PyScripter有个小坑,打开文件后中文都成了乱码.在PyScripter中新建的文件中文可以正常显示,但是重新打开后中文乱码. PyScripter中文乱码原因: 原因是如果文件头部没有编码声明,那么PyScripter会默认使用ANSI打开文件. 而PyScripter默认的文件模板也不带编码声明,重新打开文件时间不以UTF-8打开,所以乱码. 解决的

  • 基于python详解PyScript到底是什么

    基于python详解PyScript到底是什么

    目录 前言: 作用 使用方法 总结 前言: 最近 Anaconda 开大会发布了 PyScript ,它允许我们将 Python 代码嵌入到 HTML 中,并在浏览器中允许.PyScript 旨在为用户提供一流的编程语言,该语言具有一致的样式规则.更具表现力且更易于学习. 熟悉前端的朋友应该马上就可以反应到:这就是替代 JavaScript 啊! 确实,这个功能就类似于 JavaScript,如果后面发展得好的话,我们完全可以不写 JavaScript,直接写 Python 也能实现一样的效果.

  • Python数学建模PuLP库线性规划进阶基于字典详解

    目录 1.基于字典的创建规划问题 2.线性规划问题案例 3.建立模型 (1)决策变量 (2)目标函数 (3)约束条件 (4)变量取值范围 4.PuLP 程序1:使用 LpVariable 逐一定义变量 5.PuLP 程序2:使用 dict 定义决策变量和约束条件 6.Python程序和运行结果 1.基于字典的创建规划问题 上篇中介绍了使用 LpVariable 对逐一定义每个决策变量,设定名称.类型和上下界,类似地对约束条件也需要逐一设置模型参数.在大规模的规划问题中,这样逐个定义变量和设置模型

  • Python 详解基本语法_函数_返回值

    Python 详解基本语法 概要: 函数的返回值是函数重要的组成部分.函数的根本在于实现程序的部分功能,所以很多时候我们需要将函数执行后的结果返回给程序再由程序作出进一步的操作.可以说是函数的返回值令函数与函数之间,函数与主程序之间更加紧密的联系起来. 函数的返回值 在Python的函数中都有一个返回值,默认为None.也可以使用return value语句来定义一个且只能定义一个可为任意类型的返回值.但是我们能够返回一个序列类型的对象,来实现返回多个值的效果. Example: 返回一个Lis

  • Spring AOP 基于注解详解及实例代码

    Spring AOP  基于注解详解及实例代码 1.启用spring对@AspectJ注解的支持: <beans xmlns:aop="http://www.springframework.org/schema/aop"...> <!--启动支持--> <aop:aspectj-autoproxy /> </beans> 也可以配置AnnotationAwareAspectJAutoProxyCreator Bean来启动Spring对@

  • 详解JNI到底是什么

    详解JNI到底是什么

    目录 一.前言 二.准备java代码 三.生成头文件 四.gcc环境安装 五.生成动态链接库 六.总结 一.前言 首先回顾一下jni的主要功能,从jdk1.1开始jni标准就成为了java平台的一部分,它提供的一系列的API允许java和其他语言进行交互,实现了在java代码中调用其他语言的函数.通过jni的调用,能够实现这些功能: 通常情况下我们一般使用jni用来调用c或c++中的代码,在上一篇文章中我们用了下面的流程来描述了native方法的调用过程: Java Code -> JNI ->

  • python 详解如何写flask文件下载接口

    python 详解如何写flask文件下载接口

    简述 写一个简单的flask文件下载接口. 依赖 flask.gevent 代码 不废话上代码. #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sat Oct 23 19:53:18 2021 @author: huyi """ from flask import Flask, request, make_response, send_from_directory fr

  • python 详解如何使用GPU大幅提高效率

    python 详解如何使用GPU大幅提高效率

    cupy我觉得可以理解为cuda for numpy,安装方式pip install cupy,假设 import numpy as np import cupy as cp 那么对于np.XXX一般可以直接替代为cp.XXX. 其实numpy已经够快了,毕竟是C写的,每次运行的时候都会尽其所能地调用系统资源.为了验证这一点,我们可以用矩阵乘法来测试一下:在形式上通过多线程并发.多进程并行以及单线程的方式,来比较一下numpy的速度和对资源的调度情况,代码为 # th_pr_array.py f

  • Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程

    Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程

    目录 前言 环境部署 实现过程 创建项目 定义Item实体 关键词提取工具 爬虫构造 中间件代码构造 制作自定义pipeline settings配置 执行主程序 执行结果 总结 前言 接着我的上一篇:Python 详解爬取并统计CSDN全站热榜标题关键词词频流程 我换成Scrapy架构也实现了一遍.获取页面源码底层原理是一样的,Scrapy架构更系统一些.下面我会把需要注意的问题,也说明一下. 提供一下GitHub仓库地址:github本项目地址 环境部署 scrapy安装 pip insta

  • Python 详解爬取并统计CSDN全站热榜标题关键词词频流程

    Python 详解爬取并统计CSDN全站热榜标题关键词词频流程

    前言 最近在出差,发现住的宾馆居然有小强.所以出差无聊之际,写了点爬虫的代码玩玩,问就是应景.本篇文章主要是爬取CSDN全站综合热榜的100个标题,然后分词提取关键词,统计一下词频. 我想了下,对于其他博主还是有用的,可以看看什么标题可以上热榜,就分享一下吧.顺便把我解决各类问题的方法,说一说. 环境 使用的IDE为:spyder(有看着界面不习惯的,忍一下,不关键) 页面爬取使用chromedriver,至于原因我后面会说. 分词器:jieba 爬取页面地址:https://blog.csdn

  • Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程

    Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程

    目录 前言 环境部署 插件推荐 爬虫目标 项目创建 webdriver部署 项目代码 Item定义 中间件定义 定义爬虫 pipeline输出结果文本 配置文件改动 验证结果 总结 前言 闲来无聊,写了一个爬虫程序获取百度疫情数据.申明一下,研究而已.而且页面应该会进程做反爬处理,可能需要调整对应xpath. Github仓库地址:代码仓库 本文主要使用的是scrapy框架. 环境部署 主要简单推荐一下 插件推荐 这里先推荐一个Google Chrome的扩展插件xpath helper,可以验

随机推荐