ToB企服应用市场:ToB评测及商务社交产业平台

标题: Rust使用Sauron实现Web界面交互 [打印本页]

作者: 大连全瓷种植牙齿制作中心 时间: 2024-5-15 07:56
标题: Rust使用Sauron实现Web界面交互
目录

简介

Sauron 是一个多功能的 Web 框架和库，用于构建客户端和/或服务器端 Web 应用程序，重点关注人体工程学、简单性和优雅性。这使您可以编写尽可能少的代码，并更多地关注业务逻辑而不是框架的内部细节。
github：https://github.com/ivanceras/sauron
文档：https://sauron-rs.github.io/
架构

Sauron 遵循模型-视图-更新架构（也称为 Elm 架构），它总是分为三个部分：

模型 - 应用程序的状态
视图 - 一种将状态转换为 HTML 的方法
更新 - 一种根据消息更新状态的方法

Application 和组件

为了使模型在 Sauron 程序中运行，它必须实现 Application trait，然后定义下面两个函数：

view 函数：该函数告诉程序如何表现模型。
update 函数：该函数描述如何根据消息更新模型状态。

简单入门示例

先决条件

确保已安装所有必备组件：

rust and cargo：Rust基础情况和工具。
wasm-pack：将 rust 代码编译到 webassembly 中，然后放入 ./pkg 目录中。
basic-http-server：在本地提供静态文件。

实行以下命令安装wasm-pack：

cargo install wasm-pack

复制代码

实行以下命令安装basic-http-server：

cargo install basic-http-server

复制代码

wasm-pack 默认会使用 wasm-opt 工具举行巨细优化，而这个工具也是运行时下载安装的。下载 wasm-opt 使用的是 github 链接，国内情况大概率是下载失败的，可以参考如何安装WASM-OPT？手动下载 wasm-opt.exe 后放到 .cargo\bin路径下。
创建项目

创建一个名为 hello 的新项目：

cargo new --lib hello

复制代码

在 Cargo.toml 中指定这个 crate 需要编译为 cdylib（动态体系库）：

[lib]
crate-type = ["cdylib"]

复制代码

实行以下命令，添加sauron作为项目标依赖项。

cargo add sauron

复制代码

编译库文件

修改 src/lib.rs代码，在段落中表现“hello”文本：

use sauron::{node, wasm_bindgen, Application, Cmd, Node, Program};
struct App;
impl Application<()> for App {
fn view(&self) -> Node<()> {
node! {
<p>
"hello"
</p>
}
}
fn update(&mut self, _msg: ()) -> Cmd<Self, ()> {
Cmd::none()
}
}
//函数应该在加载 wasm 模块时自动启动，类似于 main 函数
#[wasm_bindgen(start)]
pub fn main() {
Program::mount_to_body(App::new());
}

复制代码

view 方法中使用 node! 宏，采用类似 html 的语法来表现应用程序。
为 App 实现 Application 特征，实现必要的方法来告诉 sauron 应用程序的举动。
这里的 main 函数在加载 wasm 模块时自动启动，函数可以恣意命名，只要配置 start 即可。

实行以下命令举行编译：

wasm-pack build --release --target=web

复制代码

编译时间稍微有点长，wasm-pack 会在项目中创建一个文件夹 ./pkg，里面包含生成的编译文件，只需要关注此中 2 个文件：

hello.js
hello_bg.wasm

复制代码

它们的名称派生自给定的包名称 .js 和 _bg.wasm。
引用库文件

在项目标根目录中创建 index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
</body>
</html>

复制代码

<ul>使用的是 [/code]留意上面的 import init, { add } from ，add 函数在使用前需要导入，否则会调用失败。
运行项目

编译库文件：

wasm-pack build --release --target=web

复制代码

启动静态站点：

basic-http-server

复制代码

访问 http://127.0.0.1:4000 查看结果：

参考资料

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)