使用GenieFramework创建简单的web应用程序

本文将介绍使用GenieFramework创建一个简单的web应用程序。 该应用程序将包括一个文本块，用户名的输入字段和用于指定年龄的滑块。 将详细描述该应用程序的结构，包括部分 @app, ui 和 @page. 将特别注意反应性和内部（@in）和外部（@out)变量。 最后，将提供带有注释的完整代码，该代码应保存在文件中。 app.jl.

什么是精灵工作？

GenieFramework是一个web应用程序开发工具，它通过点画结合了后端（Genie）和反应式接口。jl． 点画。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
   \这里描述了使用点画函数的接口。jl，如 textfield 和 slider. 该接口是通过Julia代码设置的，但您也可以使用自己的html页面模板执行此操作。

3. 部分 @page
   定义接口可访问的应用程序路由(URL)。 这部分将数据模型连接到函数 ui.

点画中的反应性

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

没有必要连接这个库，知道它的方法在应用程序中使用只是有用的。

应用程序代码

此代码必须保存在文件中。 app.jl，这是GenieFramework中主应用程序文件的标准名称。 创建文件后，您可以使用命令运行它 engee.genie.start("путь/к/файлу/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 -接受用户名的字符串（初始值："您的名字"）。
   • @in age -从滑块接收的数字（初始值：50）。
   • @out display_text -发送到接口的字符串（初始值："亲爱的用户"）。
   • @onchange -更新的处理程序 display_text 换时 user_name 或 age. 文本使用多行字符串形成。

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，则文本将变为："你好，安娜！ 你的年龄，根据滑块：25"。

如何启动应用程序？

使用当前脚本转到文件夹并执行下面的单元格。

因此，应打开包含web应用程序的窗口。

结论

使用GenieFramework创建了一个简单的web应用程序。 数据模型进行了演示（@app），接口（ui）和路由（@page），以及之间的差异 @in (来自用户的输入)和 @out (接口的输出数据)。