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

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

什么是精灵工作？

GenieFramework是一个web应用程序开发工具，它通过点画结合了后端（Genie）和反应式接口。jl．点画。jl提供了反应性，并允许您使用纯Julia代码而不是HTML来描述接口。它的部分，Stipple，为构建接口提供了方便的组件，尽管这个例子使用了Stipple的基本功能。

作为GenieFramework介绍的一部分，应用程序将很简单：用户将被要求输入一个名称并使用滑块选择一个年龄，显示的文本将根据此数据进行更新。

Web应用程序结构

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

部分 @app
这里定义了数据模型。这部分定义了连接接口和服务器逻辑的响应式变量。变量分为两种类型:
-内部(@in)：用于接收来自用户的数据。它们在与界面交互时（例如，在输入文本或移动滑块时）发生变化，并将信息从界面传输到服务器。
-外部（@out）：设计用于将数据从服务器端传输到接口。它们更新显示的元素（例如文本）并反映数据处理的结果。之间的主要区别 @in 和 @out -流动方向: @in 接受输入，以及 @out 输出结果。
部分 ui
这里描述了使用点画函数的接口。jl，如 textfield 和 slider. 该接口是通过Julia代码设置的，但您也可以使用自己的html页面模板执行此操作。
部分 @page
正在确定应用程序的路由（URL），通过该路由可以访问接口。这部分将数据模型连接到函数 ui.

点画中的反应性

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

应用程序代码

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

``'茱莉亚
使用GenieFramework
使用点画

数据模型是使用@app宏定义的

@应用程序开始
#内部变量(@in)-来自用户的数据
@in user_name="您的名字"#输入字段的初始值
@in age=50#年龄滑块的初始值(0-100)

#外部变量(@out)-发送到接口的数据
@out display_text="亲爱的用户"#要显示的文本

#事件处理程序：当输入数据更改时，display_text会更新
@onchange user_name，年龄开始
    display_text="""$(user_name)!
    Ваш возраст, согласно ползунку: $（年龄）"""
结束

结束

正在定义用户界面

功能ui()
[
#使用display_text变量的文本字符串
h2（"你好，{{display_text}}"）,

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

    #与年龄变量关联的滑块
    滑块(0:100,:年龄,标签="")])
]

结束

设置页面的路由

@页("/",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应用程序的窗口。

如果它没有在单独的选项卡中打开，请单击输出单元格中的链接。

- `match(r"'(https?://[^']+)'"` 允许您根据engee函数的输出找到链接。精灵。开始使用[正则表达式](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创建了一个简单的web应用程序。数据模型进行了演示（@app），接口（ui）和路由（@page），以及之间的差异 @in (来自用户的输入)和 @out (接口的输出数据)。