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

本文主要是介绍实践reflex：以Personalized Sales个人销售网站为例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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:104Get 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 Statedef 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 = Falsecomplete = 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, Falseyieldresponse = openai_client.images.generate(prompt=self.prompt, n=1, size="1024x1024")self.image_url = response.data[0].urlself.processing, self.complete = False, True

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