Rust全栈开发框架Dioxus-Fullstack的使用：构建高性能跨平台Web应用与桌面程序

Dioxus Fullstack

Dioxus框架的全栈工具。

特性

• 与Axum服务器框架集成，提供服务和渲染Dioxus应用的实用工具
• 服务器功能允许您从客户端调用服务器上的代码，就像调用普通函数一样
• 使用dioxus-hot-reload实现即时RSX热重载
• 从服务器向客户端传递根属性

示例

不到30行代码实现全栈Dioxus

#![allow(non_snake_case)]
use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut meaning = use_signal(|| None);

    rsx! {
        h1 { "Meaning of life: {meaning:?}" }
        button {
            onclick: move |_| async move {
                if let Ok(data) = get_meaning("life the universe and everything".into()).await {
                    meaning.set(data);
                }
            },
            "Run a server function"
        }
    }
}

#[server]
async fn get_meaning(of: String) -> Result<Option<u32>, ServerFnError> {
    Ok(of.contains("life").then(|| 42))
}

Axum集成

如果您已有Axum路由器或需要更多服务器控制，可以使用DioxusRouterExt特性与现有Axum路由器集成。

首先，确保您的axum依赖是可选的，并通过服务器特性标志启用：

[dependencies]
dioxus = { version = "*", features = ["fullstack"] }
axum = { version = "0.7.0", optional = true }
tokio = { version = "1.0", features = ["full"], optional = true }
dioxus-cli-config = { version = "*", optional = true }

[features]
server = ["dioxus/server", "dep:axum", "dep:tokio", "dioxus-cli-config"]
web = ["dioxus/web"]

然后我们可以设置带有axum服务器的dioxus：

#![allow(non_snake_case)]
use dioxus::prelude::*;

// 服务器的入口点
#[cfg(feature = "server")]
#[tokio::main]
async fn main() {
    // 获取服务器应运行的地址
    let address = dioxus::cli_config::fullstack_address_or_localhost();

    // 设置axum路由器
    let router = axum::Router::new()
        // 使用`serve_dioxus_application`方法将dioxus应用程序添加到路由器
        .serve_dioxus_application(ServeConfigBuilder::default(), App);

    // 最后启动服务器
    let router = router.into_make_service();
    let listener = tokio::net::TcpListener::bind(address).await.unwrap();
    axum::serve(listener, router).await.unwrap();
}

// 对于其他平台，只需启动应用程序
#[cfg(not(feature = "server"))]
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut meaning = use_signal(|| None);

    rsx! {
        h1 { "Meaning of life: {meaning:?}" }
        button {
            onclick: move |_| async move {
                if let Ok(data) = get_meaning("life the universe and everything"].into()).await {
                    meaning.set(data);
                }
            },
            "Run a server function"
        }
    }
}

#[server]
async fn get_meaning(of: String) -> Result<Option<u32>, ServerFnError> {
    Ok(of.contains("life").then(|| 42))
}

完整示例Demo

以下是一个完整的Dioxus-Fullstack示例，包含客户端和服务器端代码：

// Cargo.toml
[package]
name = "dioxus-fullstack-demo"
version = "0.1.0"
edition = "2021"

[dependencies]
dioxus = { version = "0.6", features = ["fullstack"] }
axum = { version = "0.7", optional = true }
tokio = { version = "1.0", features = ["full"], optional = true }
dioxus-cli-config = { version = "0.6", optional = true }
serde = { version = "1.0", features = ["derive"] }

[features]
server = ["dioxus/server", "dep:axum", "dep:tokio", "dioxus-cli-config"]
web = ["dioxus/web"]

// src/main.rs
#![allow(non_snake_case)]
use dioxus::prelude::*;

// 服务器入口点
#[cfg(feature = "server")]
#[tokio::main]
async fn main() {
    use axum::Router;
    use dioxus_fullstack::prelude::*;
    
    let addr = dioxus::cli_config::fullstack_address_or_localhost();
    println!("Server running on: {}", addr);
    
    let router = Router::new()
        .serve_dioxus_application(ServeConfigBuilder::default(), App);
    
    let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
    axum::serve(listener, router.into_make_service())
        .await
        .unwrap();
}

// 客户端入口点
#[cfg(not(feature = "server"))]
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut count = use_signal(|| 0);
    let mut server_data = use_signal(|| None);

    rsx! {
        h1 { "Dioxus Fullstack Demo" }
        
        div {
            h2 { "Client State: {count}" }
            button {
                onclick: move |_| count += 1,
                "Increment"
            }
            button {
                onclick: move |_| count -= 1,
                "Decrement"
            }
        }
        
        div {
            h2 { "Server Interaction" }
            button {
                onclick: move |_| async move {
                    if let Ok(data) = fetch_data(count()).await {
                        server_data.set(Some(data));
                    }
                },
                "Fetch from Server"
            }
            
            if let Some(data) = server_data() {
                p { "Server response: {data}" }
            }
        }
    }
}

#[server]
async fn fetch_data(client_count: i32) -> Result<String, ServerFnError> {
    // 模拟一些服务器处理
    tokio::time::sleep(std::time::Duration::from_secs(1)).await;
    
    // 返回处理后的数据
    Ok(format!("Server processed your count: {}", client_count * 2))
}

开始使用

要开始使用全栈Dioxus，请查看入门指南或完整堆栈示例。

贡献

• 在问题跟踪器上报告问题
• 加入discord并提问

许可证

本项目根据MIT许可证授权。