您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

使用 Python 构建 Web 应用程序从未如此简单——从 Pynecone 开始

时间:2023-02-19 15:43:27  来源:今日头条  作者:MikoAndCody

Python/ target=_blank class=infotextkey>Python 是当今 Web 开发中最流行的编程语言之一。凭借其简洁的语法和广泛的库,它已成为构建 Web 应用程序的首选语言。Pynecone 是一个用于构建和部署 Web 应用程序的全栈 Python 框架。这使得使用 Python 构建和部署 Web 应用程序的过程变得更加容易。

Pynecone 是一个新的 Python Web 框架,涵盖了:前端、后端和部署。该框架的网址 https://pynecone.io/:

 

本教程是对 Pynecone 的介绍。您将学习该框架的一些基础知识,并且我们将运行一个实用的示例 Web 项目。

安装

为了能够在您的开发系统上安装 Pynecone,您需要确保满足两个先决条件:

  • 必须在您的系统上安装 Python 3.7+
  • 必须在您的系统上安装 Node.js 12.22.0+

然后,您可以使用 pip 命令按以下方式安装 Pynecone:

$ pip install pynecone

创建您的第一个 Pynecone 项目

让我们用 Pynecone 创建第一个项目。因此,您首先需要创建一个新的空项目文件夹,切换到该新文件夹并使用pc命令初始化一个新的 Pynecone 项目:

$ mkdir pynecode01
$ cd pynecode01
$ pc init

然后,您应该会看到 Pynecode 的输出,如以下屏幕截图所示:

 

项目设置成功。

运行 Web Server

Pynecone 项目已成功创建,我们已准备好启动开发 Web 服务器,以便能够在浏览器中查看默认 Pynecone 项目的输出。使用以下命令启动并运行开发 Web 服务器:

$ pc run

然后您应该在命令行上看到以下输出:

 

在这里你可以看到 Web 服务器在端口 3000 上启动,因此你可以通过在浏览器中访问http://localhost:3000 来访问项目的输出。可以在以下屏幕截图中看到默认输出:

 

Pynecone 的开发网络服务器带有实时重新加载功能。因此,每次您更改实现时,浏览器中的输出都会自动更新,无需手动触发网站重新加载。

项目结构

让我们更深入地研究一下默认创建的项目结构:

 

  • .web文件夹包含 Pynecone 项目编译输出。生成的输出是位于该文件夹内的 Next.js。
  • assets文件夹用于存储项目中使用的任何静态资源(图像、字体、其他静态文件等)。
  • 此外,还有一个带有项目名称 (pynecode01) 的子文件夹。这是项目的主文件夹,将在其中执行 Pynecode Web 应用程序。默认情况下,此文件夹包含一个同名文件 (pynecode01.py)。

构建示例应用程序

让我们从构建一个完整的 Pynecone 示例待办事项应用程序开始。首先删除 pynecode01.py 中的完整默认代码,然后在文件顶部添加以下导入语句:

import pynecone as pc

这使我们可以访问 pynecone 框架。

接下来,我们开始指定应用程序的状态。应用程序的状态是定义应用程序中所有可以更改的变量以及可以修改它们的所有函数的地方。我们这样做是为了实现一个继承自 pc.State 的 State 类:

class State(pc.State):
    items = ["Learn Python", "Learn Pynecone", "Have Fun"]
    new_item: str

    def add_item(self):
        self.items += [self.new_item]
        self.new_item = ""

    def finish_item(self, item):
        self.items = [i for i in self.items if i != item]

该类有一个类属性,它是包含三个项的字符串列表。此外,还有一个字符串类型的实例属性new_item 。

State 类有两个实例方法——add_itemfinish_item。add_item方法将new_item实例属性的值附加到项目列表,然后将 new_item 设置为空字符串。此方法有效地将新项目添加到项目列表中。

finish_item方法从项目列表中删除指定的项目。此方法用来创建一个新列表,其中包含原始列表中除与参数匹配的项目之外的所有项目。

让我们进一步添加一个函数,它能够生成 UI 的一部分,一个列表待办事项:

def render_item(item):
    return pc.list_item(
        pc.hstack(
            pc.text(item, font_size="1.5em"),
            pc.button(
                "X", 
                color_scheme="red", 
                size="sm",
                on_click=lambda: State.finish_item(item),
            ),
            justify_content="space-between",
        )
    )

列表项输出是使用 Pynecone 的一些组件生成的,例如list_itemhstacktextbutton。项目本身通过项目参数传递给该函数,因此文本组件可用于输出项目文本。

我们将在todo_list函数中实现的下一个函数。此函数生成 UI 的其余部分,除此之外,它还利用之前实现的render_item函数输出单个待办事项:

def todo_list():
    return pc.contAIner(
        pc.vstack(
            pc.heading("Todos"),
            pc.input(
                on_blur=State.set_new_item,
                placeholder="Add a todo...",
                bg="white",
            ),
            pc.button("Add", on_click=State.add_item, bg="green", color="white"),
            pc.divider(),
            pc.ordered_list(
                pc.foreach(State.items, lambda item: render_item(item)),
            ),
            bg="#ededed",
            margin="5em",
            padding="1em",
            border_radius="0.5em",
            shadow="lg",
        )
    )

应用程序 UI 是通过使用容器组件作为顶部 UI 元素来构建的。在这个容器组件中,一个vstack布局组件用于垂直堆叠项目。

在这个布局组件中,我们使用了更多的 Pynecone UI 组件,如headingbuttondividerordered_list

最后我们需要添加创建应用程序实例所需的三行代码,添加路由并最终通过调用App.compile() 启动 Pynecone 网络应用程序的编译:

app = pc.App(state=State)
app.add_page(todo_list, path="/")
app.compile()

让我们再次在浏览器中检查结果:

 

默认情况下,待办事项列表已经包含三个待办事项。您可以使用文本输入字段为新的待办事项输入文本:

 

为了创建新的待办事项,您只需单击“添加”按钮即可。新的待办事项立即添加到待办事项列表中:

 

红色按钮可用于从列表中删除单个待办事项。例如,按下列表中最后一个元素的红色按钮,您可以看到该项目立即从列表中删除:

 

结论

Pynecone 为使用 Python 构建和部署 Web 应用程序提供了完整的解决方案,使该过程比以往任何时候都更容易。凭借其广泛的库和简洁的语法,Python 是一种流行的 Web 开发语言,而 Pynecone 通过提供全栈框架将其提升到一个新的水平。从前端到后端再到部署,Pynecone 拥有您轻松构建和启动 Web 应用程序所需的一切。无论您是初学者还是经验丰富的开发人员,Pynecone 都提供了一种简单高效的方式来将您的 Web 应用程序创意变为现实。因此,如果您想在 Web 开发中利用 Python 的强大功能和简单性,请尝试使用 Pynecone,看看构建和部署您的 Web 应用程序是多么容易。



Tags:Pynecone   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
使用 Python 构建 Web 应用程序从未如此简单——从 Pynecone 开始
Python 是当今 Web 开发中最流行的编程语言之一。凭借其简洁的语法和广泛的库,它已成为构建 Web 应用程序的首选语言。Pynecone 是一个用于构建和部署 Web 应用程序的全栈 Py...【详细内容】
2023-02-19  Search: Pynecone  点击:(507)  评论:(0)  加入收藏
▌简易百科推荐
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  京东云开发者    Tags:Web Components   点击:(8)  评论:(0)  加入收藏
Kubernetes 集群 CPU 使用率只有 13% :这下大家该知道如何省钱了
作者 | THE STACK译者 | 刘雅梦策划 | Tina根据 CAST AI 对 4000 个 Kubernetes 集群的分析,Kubernetes 集群通常只使用 13% 的 CPU 和平均 20% 的内存,这表明存在严重的过度...【详细内容】
2024-03-08  InfoQ    Tags:Kubernetes   点击:(12)  评论:(0)  加入收藏
Spring Security:保障应用安全的利器
SpringSecurity作为一个功能强大的安全框架,为Java应用程序提供了全面的安全保障,包括认证、授权、防护和集成等方面。本文将介绍SpringSecurity在这些方面的特性和优势,以及它...【详细内容】
2024-02-27  风舞凋零叶    Tags:Spring Security   点击:(54)  评论:(0)  加入收藏
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  贝格前端工场    Tags:框架   点击:(47)  评论:(0)  加入收藏
Spring Security权限控制框架使用指南
在常用的后台管理系统中,通常都会有访问权限控制的需求,用于限制不同人员对于接口的访问能力,如果用户不具备指定的权限,则不能访问某些接口。本文将用 waynboot-mall 项目举例...【详细内容】
2024-02-19  程序员wayn  微信公众号  Tags:Spring   点击:(39)  评论:(0)  加入收藏
开发者的Kubernetes懒人指南
你可以将本文作为开发者快速了解 Kubernetes 的指南。从基础知识到更高级的主题,如 Helm Chart,以及所有这些如何影响你作为开发者。译自Kubernetes for Lazy Developers。作...【详细内容】
2024-02-01  云云众生s  微信公众号  Tags:Kubernetes   点击:(50)  评论:(0)  加入收藏
链世界:一种简单而有效的人类行为Agent模型强化学习框架
强化学习是一种机器学习的方法,它通过让智能体(Agent)与环境交互,从而学习如何选择最优的行动来最大化累积的奖励。强化学习在许多领域都有广泛的应用,例如游戏、机器人、自动驾...【详细内容】
2024-01-30  大噬元兽  微信公众号  Tags:框架   点击:(68)  评论:(0)  加入收藏
Spring实现Kafka重试Topic,真的太香了
概述Kafka的强大功能之一是每个分区都有一个Consumer的偏移值。该偏移值是消费者将读取的下一条消息的值。可以自动或手动增加该值。如果我们由于错误而无法处理消息并想重...【详细内容】
2024-01-26  HELLO程序员  微信公众号  Tags:Spring   点击:(86)  评论:(0)  加入收藏
SpringBoot如何实现缓存预热?
缓存预热是指在 Spring Boot 项目启动时,预先将数据加载到缓存系统(如 Redis)中的一种机制。那么问题来了,在 Spring Boot 项目启动之后,在什么时候?在哪里可以将数据加载到缓存系...【详细内容】
2024-01-19   Java中文社群  微信公众号  Tags:SpringBoot   点击:(86)  评论:(0)  加入收藏
花 15 分钟把 Express.js 搞明白,全栈没有那么难
Express 是老牌的 Node.js 框架,以简单和轻量著称,几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架,如 Egg.js、Nest.js 等都与 Express 息息相关。Express 框...【详细内容】
2024-01-16  程序员成功  微信公众号  Tags:Express.js   点击:(88)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条