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_item和finish_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_item、hstack、text和button。项目本身通过项目参数传递给该函数，因此文本组件可用于输出项目文本。

我们将在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 组件，如heading、button、divider和ordered_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 应用程序是多么容易。