Reflex: 纯Python构建全栈web应用

原创

luckpunk

发布于 2025-01-25 01:09:10

94808

代码可运行

文章被收录于专栏：Python每日一库Python每日一库

运行总次数：8

代码可运行

一、简介

Reflex是一个使用纯Python构建全栈web应用的库，可以在几秒钟内部署，具有高效且可自定义的特点。

二、特点

1. 纯Python：前端、后端开发全都使用Python，不需要学习Javascript。
2. 完整的灵活性：容易上手，并且可以扩展到复杂的应用程序。
3. 立即部署：构建后，使用单个命令就能部署应用程序；或者也可以将其托管在自己的服务器上。

三、安装

1. 要求Python3.8+。
2. 在终端运行：

pip install reflex

3. 测试安装成功：

• 创建新项目：

mkdir my_app_name
cd my_app_name
reflex init

• 在开发者模式下运行：

reflex run

• 应用程序运行在http://localhost:3000。

如果希望更改默认的页面，可以在以下位置修改代码 my_app_name/my_app_name.py,Reflex 拥有快速刷新(fast refresh),所以您可以在保存代码后马上看到更改.

四、范例

创建一个使用DALL·E进行图像生成的图形界面，完整代码如下：

import reflex as rx
import openai

openai_client = openai.OpenAI()

classState(rx.State):
"""The app state."""
prompt =""
image_url =""
processing =False
complete =False

defget_image(self):
"""Get the image from the prompt."""
if self.prompt =="":
    return rx.window_alert("Prompt Empty")
self.processing, self.complete =True,False
yield
response = openai_client.images.generate(
    prompt=self.prompt, n=1, size="1024x1024"
)
self.image_url = response.data[0].url
self.processing, self.complete =False,True

defindex():
return rx.center(
    rx.vstack(
        rx.heading("DALL - E", font_size="1.5em"),
        rx.input(
            placeholder="Enter a prompt..",
            on_blur=State.set_prompt,
            width="25em",
        ),
        rx.button(
            "Generate Image",
            on_click=State.get_image,
            width="25em",
            loading=State.processing
        ),
        rx.cond(
            State.complete,
            rx.image(src=State.image_url, width="20em"),
        ),
        align="center",
        width="100%",
        height="100vh",
    )
)

# Add state and page to the app.
app = rx.App()
app.add_page(index, title="Reflex:DALL - E")

代码解释：

1. Reflex UI：
- • index函数定义了应用程序的前端，使用不同的组件如center、vstack、input和button来创建前端，组件之间可以相互嵌入，以创建复杂的布局，并且可以使用关键字参数来使用CSS的全部功能。
- • Reflex拥有60多个内置组件，也可以容易地创建自己的组件。
2. State：
- • State定义了所有可能会发生变化的变量（称为vars）以及能够改变这些变量的函数。
- • 在这个范例中，State由prompt和image_url组成，还包含两个布尔值processing和complete，用于指示何时显示循环进度指示器和图像。
3. Event Handlers：
- • 在State中定义了事件处理器（event handlers）的函数，用于改变状态变量（state vars）。
- • 在这个范例中，get_image是一个事件处理器，用于从OpenAI API获取图像，在事件处理器中使用yield将导致UI进行更新，否则UI将在事件处理器结束时进行更新。
4. Routing