实践reflex：以Personalized Sales个人销售网站为例

news2024/9/21 0:50:25

reflex 是一个使用纯Python构建全栈web应用的库，但是需要使用node，所以你懂的。

官网：Reflex · Web apps in Pure Python

手册：Introduction

Pynecone: Pynecone 是一个全栈 Python 框架，可以使用纯 Python 构建高性能、可自定义的 Web 应用程序 - Gitee.com

reflex安装：实践reflex：一个使用纯Python构建全栈web应用的库-CSDN博客

安装完成后，初始化：

skyw@ubjail1:~$ mkdir app1
sky@ubjail1:~$ cd app1
sky@ubjail1:~/app1$ reflex init

初始化时选择(2) sales (https://sales-new.reflex.run/) - An app to manage sales
and customers

reflex init

[06:11:11] Initializing the web directory.           console.py:104

Get started with a template:
(0) blank (https://blank-template.reflex.run) - A minimal template
(1) dashboard (https://dashboard-new.reflex.run/) - A dashboard 
with tables and graphs
(2) sales (https://sales-new.reflex.run/) - An app to manage sales 
and customers
(3) ai_image_gen (https://ai-image-gen.reflex.run/) - An app to 
generate images using AI
(4) ci_template (https://cijob.reflex.run/) - A template for 
continuous integration
(5) api_admin_panel (https://api-admin-panel.reflex.run/) - An 
admin panel for an api.
(6) nba (https://nba-new.reflex.run/) - A data visualization app 
for NBA data.
(7) customer_data_app (https://customer-data-app.reflex.run/) - An 
app to manage customer data.
Which template would you like to use? (0): [06:11:24] Initializing the app directory.           console.py:104
Success: Initialized app1

初始化完成后，启动服务：

reflex run

─────────────────────── Starting Reflex App ───────────────────────

00h00m00s 0/0: :

然后可以使用http://192.168.0.13:3001打开网站(默认是3000和8000，如果有多个网站，会自动向后顺延)

解读代码：

代码在项目的子目录里，比如app2这个项目，代码在~/app2/app2/app2.py文件里：

import reflex as rx
from .views.navbar import navbar
from .views.email import email_gen_ui
from .views.table import main_table
from .backend.backend import State


def index() -> rx.Component:
    return rx.vstack(
        navbar(),
        rx.flex(
            rx.box(main_table(), width=["100%", "100%", "100%", "60%"]),
            email_gen_ui(),
            spacing="6",
            width="100%",
            flex_direction=["column", "column", "column", "row"],
        ),
        height="100vh",
        bg=rx.color("accent", 1),
        width="100%",
        spacing="6",
        padding_x=["1.5em", "1.5em", "3em"],
        padding_y=["1em", "1em", "2em"],
    )


app = rx.App(
    theme=rx.theme(
        appearance="light", has_background=True, radius="large", accent_color="blue"
    ),
)
app.add_page(
    index,
    on_load=State.load_entries,
    title="Sales App",
    description="Generate personalized sales emails.",
)

定义前端

def index():
    return rx.center(
        ...
    )

我们用不同的组件比如 center, vstack, input, 和 button 来创建前端, 组件之间可以相互嵌入,来创建复杂的布局. 并且可以使用关键字参数来使用 CSS 的全部功能.

Reflex 拥有 60+ 个内置组件来帮助您开始创建应用程序. 我们正在积极添加组件, 但是您也可以容易的创建自己的组件.

State状态

Reflex 用 State 来渲染 UI. 上面代码中没有涉及State，下面是一个例子，创建一个State的类，包括prompt\image_url\processing\complete等信息

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

Event Handlers事件处理

def get_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

Reflex中,事件处理器是我们可以修改状态的方式.它们可以作为对用户操作的响应而被调用,例如点击一个按钮或在文本框中输入.这些操作被称为事件。比如这个就是ai图片生成的一个事件处理函数。