Rust使用Sauron实现Web界面交互

打印 上一主题 下一主题

主题 847|帖子 847|积分 2556

目录

简介

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
  1. cargo install wasm-pack
复制代码
实行以下命令安装basic-http-server
  1. cargo install basic-http-server
复制代码
wasm-pack 默认会使用 wasm-opt 工具举行巨细优化,而这个工具也是运行时下载安装的。下载 wasm-opt 使用的是 github 链接,国内情况大概率是下载失败的,可以参考 如何安装WASM-OPT? 手动下载 wasm-opt.exe 后放到 .cargo\bin路径下。
创建项目

创建一个名为 hello 的新项目:
  1. cargo new --lib hello
复制代码
在 Cargo.toml 中指定这个 crate 需要编译为 cdylib动态体系库):
  1. [lib]
  2. crate-type = ["cdylib"]
复制代码
实行以下命令,添加sauron作为项目标依赖项。
  1. cargo add sauron
复制代码
编译库文件

修改 src/lib.rs代码,在段落中表现“hello”文本:
  1. use sauron::{node, wasm_bindgen, Application, Cmd, Node, Program};
  2. struct App;
  3. impl Application<()> for App {
  4.     fn view(&self) -> Node<()> {
  5.         node! {
  6.             <p>
  7.                 "hello"
  8.             </p>
  9.         }
  10.     }
  11.     fn update(&mut self, _msg: ()) -> Cmd<Self, ()> {
  12.         Cmd::none()
  13.     }
  14. }
  15. //函数应该在加载 wasm 模块时自动启动,类似于 main 函数
  16. #[wasm_bindgen(start)]
  17. pub fn main() {
  18.     Program::mount_to_body(App::new());
  19. }
复制代码

  • view 方法中使用 node! 宏,采用类似 html 的语法来表现应用程序。
  • 为 App 实现 Application 特征,实现必要的方法来告诉 sauron 应用程序的举动。
  • 这里的 main 函数在加载 wasm 模块时自动启动,函数可以恣意命名,只要配置 start 即可。
实行以下命令举行编译:
  1. wasm-pack build --release --target=web
复制代码
编译时间稍微有点长,wasm-pack 会在项目中创建一个文件夹 ./pkg,里面包含生成的编译文件,只需要关注此中 2 个文件:
  1. hello.js
  2. hello_bg.wasm
复制代码
它们的名称派生自给定的包名称 .js_bg.wasm
引用库文件

在项目标根目录中创建 index.html:
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.   </head>
  7.   <body>
  8.    
  9.   </body>
  10. </html>
复制代码
<ul>使用的是       [/code]留意上面的 import init, { add } from ,add 函数在使用前需要导入,否则会调用失败。
运行项目

编译库文件:
  1. wasm-pack build --release --target=web
复制代码
启动静态站点:
  1. basic-http-server
复制代码
访问 http://127.0.0.1:4000 查看结果:

参考资料


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大连全瓷种植牙齿制作中心

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表