使用 GenieFramework 创建一个简单的 Web 应用程序

本文将介绍如何使用 GenieFramework 创建一个简单的 Web 应用程序。该应用程序将包含一个文本框、一个用于输入用户姓名的输入字段，以及一个用于指定年龄的滑块。 本文将详细介绍该应用程序的结构，包括@app 、ui 和@page 等组件。将特别关注响应式特性，以及内部变量（@in ）与外部变量（@out ）之间的区别。最后，将提供带注释的完整代码，请将其保存到文件app.jl 中。

什么是 GenieFramework？

GenieFramework 是一款 Web 应用程序开发工具，它通过 Stipple.jl 将后端（Genie）与响应式界面相结合。Stipple.jl 提供了响应式特性，并允许您使用纯 Julia 代码（而非 HTML）来描述界面。其组件 StippleUI，提供了用于构建界面的便捷组件，尽管本示例仅使用了 Stipple 的基本功能。

作为 GenieFramework 入门的一部分，本应用程序将设计得较为简单：系统会提示用户输入姓名，并通过滑块选择年龄，显示的文本将根据这些数据进行更新。

Web 应用程序结构

基于 GenieFramework 的应用程序由三个主要部分组成，对应 [MVC 模式] (https://ru.wikipedia.org/wiki/Model-View-Controller)：

1. @app
   \ 此处定义数据模型。该部分定义了连接界面与服务器逻辑的响应式变量。变量分为两类：

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

2. 部分ui
   \ 此处描述了使用 Stipple 函数的接口，例如textfield 和slider 。该接口通过 Julia 代码进行配置，但您也可以使用自己的 HTML 页面模板来实现。

3. 第@page
   定义了访问该界面的应用程序路由（URL）。该部分将数据模型与函数ui 进行连接。### : Stipple 中的响应性

Stipple.jl 提供的响应性功能允许您在数据发生变化时自动更新界面，反之亦然。@in 中的变量会响应用户操作，而@out 中的变量则会更新显示的信息。它们之间的通信是通过处理程序建立的，例如@onchange 。

无需引入此库；只需了解其方法在应用程序中被使用即可。

应用程序代码

该代码应保存到名为 app.jl 的文件中，这是GenieFramework中主应用程序文件的标准命名。创建文件后，可通过以下命令运行它：` `engee.genie.start("path/to/file/app.jl")

using GenieFramework

# Определяется модель данных с помощью макроса @app
@app begin
    # Внутренние переменные (@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)"""
    end
end

# Определяется пользовательский интерфейс
function ui()
    [
        # Текстовая строка с использованием переменной display_text
        h2("Здравствуйте, {{display_text}}"),

        # Поле ввода, связанное с переменной user_name
        cell([textfield("Введите ваше имя:", :user_name),

        # Ползунок, связанный с переменной age
        slider(0:100, :age, label="")])
    ]
end

# Задается маршрут для страницы
@page("/", ui)

代码分析

1. 导入库
   包含 GenieFramework 以支持应用程序开发，以及 Stipple 以实现响应式编程和接口功能。

2. 数据模型（@app ）

   -@in user_name — 用于接收用户姓名的字符串（初始值：“Your name”）。
   -@in age — 从滑块获取的数值（初始值：50）。
   -@out display_text — 发送到界面的字符串（初始值：“dear user”）。
   -@onchange — 当user_name 或age 发生变化时，用于更新display_text 的处理程序。文本使用多行字符串生成。

3. 界面 (ui)

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

4. Route (@page)
   该接口可在函数返回的地址上访问。engee.genie.start### 结果会是什么？

启动时，将显示“Hello, dear user!”的文本、一个标有“Your name”的输入框以及一个初始值设为50的滑块。 输入姓名或更改滑块位置会触发更新。display_text ，更新内容会立即反映在标题中。例如，如果您输入“Anna”，且滑块值为25，则文本将变为：“Hello, Anna! 根据滑块显示，您的年龄为25”。

如何启动该应用程序？

转到包含当前脚本的文件夹，并运行下方的单元格。

这将打开一个窗口，显示该 Web 应用程序。

结论

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