门面

门面 是一个快速将Web-UI添加到任何Rust程序的框架。它可以让你的控制台或服务器应用程序在几秒钟内拥有令人惊叹的UI。

门面 将Web服务器和基于WASM的Web应用程序融合到Rust程序中。没有外部文件。没有外部依赖。只需你的二进制文件。

为了达到这个效果，门面 使用 Yew 框架构建通用UI，并使用WebSocket连接与您的应用程序交互，提供实时更新以使UI能够反应式渲染。

使用场景

此框架的使用场景无限，包括但不限于以下场景（使用复选框列表显示实现这些场景所需的布局）

• 仪表盘
• 服务器管理面板
• 安装向导
• 日志探索器
• 商业智能面板
• 与Swagger兼容的API游乐场
• 区块链探索器
• 演示（是的，你很快就可以用Rust创建Rust会议的演示文稿）
• 投票和测验
• 交互式文档

额外功能： 移动兼容性！它已经可以工作，但需要灵活的布局。

你知道在没有外部支持的情况下很难维护项目。请通过 Patreon 成为赞助商，帮助我们更快地实现这些案例。

如何使用

添加依赖

将依赖项添加到你的 Cargo.toml 文件

[dependencies]
facade = { git = "https://github.com/DenisKolodin/facade" }

我们在这里使用git，因为框架变化非常快。

启动服务器

在主函数中启动服务器并获取控制对象以声明UI并向其提供 实时 更新。

let mut control = facade::main()?;

声明UI

创建一个场景并将其放入 Control 实例

let page_one = Page(
    "Page One",
    "Live information",
    Row(vec![
        TitledPanel("Server Status", Dynamic("status")),
    ]),
);
let scene = Dashboard(
    "My Dashboard",
    vec![page_one],
);
control.scene(scene);

发送实时数据

现在您可以使用 Control 实例通过在UI声明中使用的唯一ID向UI发送实时更新。

let mut counter = 0;
loop {
    counter += 1;
    control.assign("status", format!("Counter is {}", counter));
    thread::sleep(Duration::from_millis(300));
}

是的，在这个示例中您提供的更新太快，但这不是一个问题，因为 门面 在发送之前会累积更新，覆盖更改的值，并只发送最新的更新。

通过连接到： https://127.0.0.1:12400 端口（默认）来启动并享受实时更新（使用您喜欢的浏览器）。如果您想用智能手机检查，请设置绑定地址为 FACADE_ADDRESS=0.0.0.0 并连接到同一端口，但连接到您的PC/Mac的IP地址（两者都避免性别歧视）。

您还可以在这里查看现成的示例 此处。

调整

您可以使用以 FACADE_ 为前缀的变量来控制应用中 Facade 的参数。例如，要更改地址或端口，您可以使用相应的环境变量 FACADE_ADDRESS 和 FACADE_PORT。