使用 GenieFramework 创建简单的网络应用程序¶

本文将介绍如何使用 GenieFramework 创建一个简单的网络应用程序。应用程序将包括一个文本框、一个用户名输入框和一个指定年龄的滑块。本文将详细介绍应用程序的结构，包括@app 、ui 和@page 三个部分。将特别关注反应性以及内部变量 (@in) 和外部变量 (@out) 之间的差异。最后，将介绍带注释的完整代码，并应保存在文件app.jl 中。

什么是 GenieFramework？¶

GenieFramework 是一种网络应用程序开发工具，它通过 Stipple.jl 将服务器端（Genie）和反应界面结合在一起。Stipple.jl 提供反应性，并允许您使用纯 Julia 代码而非 HTML 来描述界面。Stipple.jl 提供了反应性，允许你使用纯 Julia 代码而不是 HTML 来描述界面。Stipple.jl 的一部分 StippleUI 为构建界面提供了便利组件，不过本示例使用的是基本的 Stipple 函数。

作为熟悉 GenieFramework 的一部分，应用程序将非常简单：提示用户输入姓名并使用滑块选择年龄，显示的文本将根据这些数据更新。

网络应用程序的结构¶

基于 GenieFramework 的应用程序由三个主要部分组成，遵循 MVC 模式：

1.** 部分@app**
这部分定义了数据模型。这部分定义了绑定界面和服务器端逻辑的反应式变量。变量分为两类：

内部（@in ）**：用于接收来自用户的数据。它们在与界面交互时（如输入文本或移动滑块时）发生变化，并将信息从界面传递到服务器。
** 外部 (@out)**：用于从服务器端向界面传递数据。它们更新显示的元素（如文本），并反映数据处理的结果。@in 和@out 的主要区别在于数据流的方向：@in 接受输入，@out 输出结果。

2.ui部分
这里描述的是使用 Stipple.jl 函数的接口，如textfield 和slider 。界面是通过 Julia 上的代码定义的，但也可以使用自己的 html 页面模板。

3.@page部分
定义访问接口的应用程序路由（URL）。这部分将数据模型与函数ui 联系起来。

Stipple 中的反应性¶

Stipple.jl 提供的反应性允许在数据发生变化时自动更新界面，反之亦然。变量@in 会对用户操作做出反应，变量@out 会更新显示的信息。两者之间的通信是通过@onchange 等处理程序建立的。

应用程序代码¶

这些代码应保存在app.jl 文件中，这是 GenieFramework 中主应用程序文件的标准名称。文件创建完成后，可使用命令engee.genie.start("путь/к/файлу/app.jl")

使用 GenieFramework
使用 Stipple

# 数据模型使用 @app 宏定义
@app 开始
    # 内部变量 (@in) - 来自用户的数据
    @in user_name = "你的名字" # 输入框的初始值
    @in age = 50 # 年龄滑块的初始值（0-100）

    # 外部变量 (@out) - 发送到界面的数据
    @out display_text = "尊敬的用户" # 要显示的文本

    # 事件处理程序：当输入数据发生变化时，display_text 将被更新
    @onchange user_name, age begin
        display_text = """$(user_name)!
        Ваш возраст, согласно ползунку: $(age) """
    结束
结束

# 用户界面已定义
函数 ui()
    [
        # 使用 display_text 变量生成文本字符串
        h2("Hello, {{display_text}}")、

        # 与 user_name 变量相关联的输入框
        cell([textfield("Enter your name:", :user_name)、

        # 与年龄变量相关联的滑块
        slider(0:100, :age, label="")])
    ]
结束

# 指定页面的路径
@page("/", ui)

代码解析¶

1.导入库
连接GenieFramework 应用程序和Stipple 反应性和接口。

2.数据模型 (@app)
-@in user_name 是一个字符串，接受用户名（初始值："your name"）。
-@in age - 从滑块接收到的数字（初始值：50）。
-@out display_text - 发送到界面的字符串（初始值："honored user"）。
-@onchange - 当user_name 或age. 发生变化时更新display_text 的处理程序。文本使用多行字符串生成。

3.** 接口 (ui)**
-h2("Здравствуйте, {{display_text}}") 是二级标题，显示display_text 的值。
-cell([...]) - 结合了输入框和滑块的容器。
-textfield - 与user_name 相关联的输入框。
-slider - 范围为 0-100 的滑块，与age 关联。

4.** 路由 (@page)**
接口在函数返回的地址处可用engee.genie.start

结果是什么？¶

启动时，界面会显示 "亲爱的用户，您好！"、"您的姓名 "输入框和一个值为 50 的滑块。输入姓名或改变滑块的位置会导致display_text 更新，并立即反映在标题中。例如，如果您输入 "Anna"，滑块的值为 25，则文本将变为："你好，Anna，根据滑块显示您的年龄：25"。

如何启动应用程序？¶

进入包含当前脚本的文件夹，执行下面的方框。

这将打开一个包含网络应用程序的窗口。

如果没有在单独的标签页中打开，请单击输出单元格中的链接。

-match(r"'(https?://[^']+)'" 允许您使用[正则表达式]根据 engee.genie.start 函数的输出查找链接(https://engee.com/helpcenter/stable/ru/interactive-scripts/language_basics/regex.html) -Markdown.parse 用于在输出单元格中显示 "可点击 "链接。

using Markdown
cd(@__DIR__)

app_url = string(engee.genie.start(string(@__DIR__,"/app.jl")))

Markdown.parse(match(r"'(https?://[^']+)'",app_url)[1])

结论¶

使用 GenieFramework 创建了一个简单的网络应用程序。演示了数据模型 (@app)、界面 (ui) 和路由 (@page) 以及@in （用户输入）和@out （界面输出）之间的区别。