快捷導(dǎo)航

Rust如何使用Sauron實現(xiàn)Web界面交互

更新時間：2024年03月26日 09:24:54 作者：二次元攻城獅

Sauron?是一個多功能的?Web?框架和庫，用于構(gòu)建客戶端和/或服務(wù)器端?Web?應(yīng)用程序，重點關(guān)注人體工程學(xué)、簡單性和優(yōu)雅性,這篇文章主要介紹了Rust使用Sauron實現(xiàn)Web界面交互,需要的朋友可以參考下

簡介

Sauron 是一個多功能的 Web 框架和庫，用于構(gòu)建客戶端和/或服務(wù)器端 Web 應(yīng)用程序，重點關(guān)注人體工程學(xué)、簡單性和優(yōu)雅性。這使您可以編寫盡可能少的代碼，并更多地關(guān)注業(yè)務(wù)邏輯而不是框架的內(nèi)部細節(jié)。
github：https://github.com/ivanceras/sauron

文檔：https://sauron-rs.github.io/

架構(gòu)

Sauron 遵循模型-視圖-更新架構(gòu)（也稱為 Elm 架構(gòu)），它總是分為三個部分：

模型 - 應(yīng)用程序的狀態(tài)
視圖 - 一種將狀態(tài)轉(zhuǎn)換為 HTML 的方法
更新 - 一種根據(jù)消息更新狀態(tài)的方法

Application 和組件

為了使模型在 Sauron 程序中運行，它必須實現(xiàn) Application trait，然后定義下面兩個函數(shù)：

view 函數(shù)：該函數(shù)告訴程序如何顯示模型。
update 函數(shù)：該函數(shù)描述如何根據(jù)消息更新模型狀態(tài)。

簡單入門示例

先決條件

確保已安裝所有必備組件：

rust and cargo：Rust基礎(chǔ)環(huán)境和工具。
wasm-pack：將 rust 代碼編譯到 webassembly 中，然后放入 ./pkg 目錄中。
basic-http-server：在本地提供靜態(tài)文件。

執(zhí)行以下命令安裝wasm-pack：

cargo install wasm-pack

執(zhí)行以下命令安裝basic-http-server：

cargo install basic-http-server

wasm-pack 默認(rèn)會使用 wasm-opt 工具進行大小優(yōu)化，而這個工具也是運行時下載安裝的。下載 wasm-opt 使用的是 github 鏈接，國內(nèi)環(huán)境大概率是下載失敗的，可以參考如何安裝WASM-OPT？手動下載 wasm-opt.exe 后放到 .cargo\bin路徑下。

創(chuàng)建項目

創(chuàng)建一個名為 hello 的新項目：

cargo new --lib hello

在 Cargo.toml 中指定這個 crate 需要編譯為 cdylib（動態(tài)系統(tǒng)庫）：

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

執(zhí)行以下命令，添加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()
    }
}
//函數(shù)應(yīng)該在加載 wasm 模塊時自動啟動，類似于 main 函數(shù)
#[wasm_bindgen(start)]
pub fn main() {
    Program::mount_to_body(App::new());
}

view 方法中使用 node! 宏，采用類似 html 的語法來顯示應(yīng)用程序。
為 App 實現(xiàn) Application 特征，實現(xiàn)必要的方法來告訴 sauron 應(yīng)用程序的行為。
這里的 main 函數(shù)在加載 wasm 模塊時自動啟動，函數(shù)可以任意命名，只要配置 start 即可。

執(zhí)行以下命令進行編譯：

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

編譯時間稍微有點長，wasm-pack 會在項目中創(chuàng)建一個文件夾 ./pkg，里面包含生成的編譯文件，只需要關(guān)注其中 2 個文件：

hello.js
hello_bg.wasm

它們的名稱派生自給定的包名稱 <package_name>.js 和 <package_name>_bg.wasm。

引用庫文件

在項目的根目錄中創(chuàng)建 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script type=module>
      import init from './pkg/hello.js';
      await init().catch(console.error);
    </script>
  </body>
</html>

使用的是 <script type=module>， 從 ./pkg 文件夾中引用了 ./pkg/hello.js 。
在后臺，./pkg/hello.js 將負(fù)責(zé)在后臺加載 ./pkg/hello_bg.wasm。

運行項目

重新編譯webapp，每次對 rust 代碼進行更改時發(fā)出此命令。

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

最后使用 basic-http-server 提供文件：

basic-http-server

默認(rèn)情況下，它在端口 4000 中提供頁面，導(dǎo)航到 http://127.0.0.1:4000 以查看“hello”消息。

界面交互示例

在瀏覽器中顯示 3 個按鈕，單擊這些按鈕可以增加/減少和重置計數(shù)。

創(chuàng)建項目

創(chuàng)建一個名為 counter 的新 rust 庫項目：

cargo new --lib counter

接下來修改 crate 類型為 “cdylib” 庫，添加 sauron 依賴，這里不在贅述。

編譯庫文件

在 src/lib.rs 中放入此代碼：

use sauron::prelude::*;
use sauron::node;
struct App {
    count: i32,
}
//添加了一個函數(shù) new 來創(chuàng)建以 count 0 開頭的初始狀態(tài) App
impl App {
    fn new() -> Self {
        App { count: 0 }
    }
}

定義應(yīng)用程序?qū)⒕哂械囊唤M操作：

enum Msg {
    Increment,
    Decrement,
    Reset,
}

為模型 App 實現(xiàn) Application 特征：

impl Application<Msg> for App {
    fn view(&self) -> Node<Msg> {
        node! {
            <main>
                <input type="button"
                    value="+"
                    on_click=|_| {
                        Msg::Increment
                    }
                />
                <button class="count" on_click=|_|{Msg::Reset} >{text(self.count)}</button>
                <input type="button"
                    value="-"
                    on_click=|_| {
                        Msg::Decrement
                    }
                />
            </main>
        }
    }
    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        match msg {
            Msg::Increment => self.count += 1,
            Msg::Decrement => self.count -= 1,
            Msg::Reset => self.count = 0,
        }
        Cmd::none()
    }
}

view 方法返回類型為 Node<Msg>，這意味著它創(chuàng)建一個 html 節(jié)點，其中它的任何成員 html 元素都有一個事件偵聽器，該事件偵聽器可以向程序處理程序發(fā)出 Msg 消息。
update 方法接受 Msg 作為參數(shù)，并根據(jù) Msg 的變體修改模型 App。

實現(xiàn)應(yīng)用函數(shù)

接下來為 wasm Web 應(yīng)用定義入口點，通過使用 #[wasm_bindgen(start)] 注釋公共函數(shù)來完成：

#[wasm_bindgen(start)]
pub fn start() {
    Program::mount_to_body(App::new());
}

為了演示純函數(shù)交互，這里再添加一個簡單的加法函數(shù)：

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
  a + b
}

如果只需要js調(diào)用Rust的函數(shù)，那只需要添加 wasm_bindgen 依賴即可，參考使用Rust和WebAssembly整花活兒(一)——快速開始。

引用庫文件

在項目基本文件夾的 index.html 文件中鏈接應(yīng)用，可以像往常一樣放置樣式：

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Counter</title>
    <style type="text/css">
        body { font-family: verdana, arial, monospace; }
        main {
            width:30px;
            height: 100px;
            margin:auto;
            text-align: center;
        }
        input, .count{
            font-size: 40px;
            padding: 30px;
            margin: 30px;
        }
    </style>
    <script type=module>
        import init, { add } from './pkg/counter.js';
        await init().catch(console.error);
        const result = add(1, 2);
        console.log(`the result from rust is: ${result}`);
    </script>
  </head>
  <body>
  </body>
</html>

注意上面的 import init, { add } from ，add 函數(shù)在使用前需要導(dǎo)入，否則會調(diào)用失敗。