如何把 Dioxus fullstack 应用接入已有的 Axum 路由【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus如果你的项目里已经有一个跑着自有路由、中间件或后端逻辑的 Axum 服务现在想把一个 Dioxus fullstack 应用服务端渲染的页面 #[server]服务端函数挂到同一个路由器上而不是让dioxus::launch独占整个服务进程Dioxus 官方文档提供了两条可执行的路径一是在自己的main里手动搭建axum::Router通过DioxusRouterExt扩展 trait 把 Dioxus 应用挂载进去见 fullstack-server README 的 Axum Integration 一节二是用dioxus::serve接收你返回的自定义 Router让 Dioxus 代为设置异步运行时、日志和热重载见示例 custom_axum_serve.rs。两条路径都基于 Axum核心挂载 API 相同。依赖与 feature 配置无论走哪条路径Cargo.toml都要按文档的方式配置axum依赖必须是 optional 的由serverfeature 开启。文档给出的原因是 Axum 无法编译到 wasm——如果它被默认开启客户端构建会直接编译报错[dependencies] dioxus { version *, features [fullstack] } axum { version 0.8.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]dioxus的 feature 说明dioxus crate 文档中明确fullstack特性用于 wasm 构建时配合web特性、用于服务端构建时配合server特性这也是入口函数要按 feature 区分的原因。路径一在自己的 main 里挂载到已有 Router这是文档推荐的已有 Axum router 或需要更多服务端控制权的场景README。服务端入口如下#[cfg(feature server)]与#[cfg(not(feature server))]两个 main 分别对应服务端和客户端平台#![allow(non_snake_case)] use dioxus::prelude::*; // The entry point for the server #[cfg(feature server)] #[tokio::main] async fn main() { use dioxus_server::DioxusRouterExt; // 由 CLI 生成地址若由 CLI 运行CLI 会把 fullstack 代理到主地址 let address dioxus::cli_config::fullstack_address_or_localhost(); // Set up the axum router let router axum::Router::new() // 用 serve_dioxus_application 把 Dioxus 应用挂到 router 上 // 它会向 router 添加一个 fallback 路由承载你的组件和服务端函数 .serve_dioxus_application(dioxus_server::ServeConfig::new(), App); // Finally, we can launch the server let router router.into_make_service(); let listener tokio::net::TcpListener::bind(address).await.unwrap(); axum::serve(listener, router).await.unwrap(); } // For any other platform, we just launch the app #[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) - ServerFnResultOptionu32 { Ok(of.contains(life).then(|| 42)) }把上面的骨架套进已有服务时关键点有四个挂载位置。serve_dioxus_application会添加一个 fallback 路由README 原文This will add a fallback route to the router that will serve your component and server functions。因此应把它放在自有路由链的最后让业务路由先命中未匹配的请求才落到 Dioxus 应用的 SSR 页面。监听地址。fullstack_address_or_localhost()处理由 CLI 运行的情况CLI 会把 fullstack 代理到主地址并使用它生成的地址。模块路径。README 示例使用dioxus_server::前缀在dioxuscrate 启用serverfeature 后dioxus::server是同一模块的 re-exportdioxus/src/lib.rs 中pub use dioxus_server as serverprelude 同样导出DioxusRouterExt、ServeConfig写法可以统一。服务端函数自动注册。#[server]函数在编译期通过inventory全局收集挂载时由register_server_functions()统一注册到 Axum 上见 架构说明 与 server.rs 中DioxusRouterExt的实现serve_dioxus_application依次执行register_server_functions()→serve_static_assets()→fallback(render_handler)。按架构文档服务端函数端点形如POST /api/{function_name}?{query_params}你无需为每个函数手写路由。路径二用 dioxus::serve 托管运行时如果不想自己写tokio::main、监听器和运行时装配仓库里的示例 custom_axum_serve.rs 展示了第二种接法dioxus::serve接收一个返回Router的闭包由它负责设置异步运行时、日志、热重载和崩溃处理然后用dioxus::server::router(app)生成一个已带好 Dioxus 必需路由的 axumRouter你再在上面追加自有路由use dioxus::prelude::*; fn main() { // On the client we just launch the app as normal. #[cfg(not(feature server))] dioxus::launch(app); // On the server, we can use dioxus::serve and .serve_dioxus_application to serve our app with routing. #[cfg(feature server)] dioxus::serve(|| async move { use dioxus::server::axum::routing::{get, post}; Ok(dioxus::server::router(app) .route(/submit, post(|| async { Form submitted! })) .route(/about, get(|| async { About us })) .route(/contact, get(|| async { Contact us }))) }); } fn app() - Element { rsx! { div { Hello from Dioxus! } } }这条路径的适用边界由示例文档注释和serve的函数文档 明确监听地址由IP和PORT环境变量决定未设置时默认为127.0.0.1:8080要改端口用环境变量或.env文件。dioxus::serve阻塞且不会返回源码标注返回类型为!因此你的全部路由必须在这个闭包内组装完成。该路径适合需要定制服务端装配的场景加中间件、自定义路由、与已有 Axum 后端代码集成示例文档注释原文列举的用途。平台差异desktop/mobile 平台不走这条路径仍用dioxus::launch数据加载通过use_future、use_resource等 hook 在客户端完成。两条路径的选择依据需要自己控制main流程、运行时或监听地址时用路径一想免费获得运行时、日志、热重载装配时用路径二。二者最终挂载 Dioxus 应用的 API 一致只是运行时归属不同。可选分支不托管静态资源或只注册服务端函数如果你的静态资源WASM、生成的 index.html 等由另一个系统分发或者你只需要在服务端函数上复用已有路由server.rs 中的DioxusRouterExttrait 还提供了更细粒度的挂载点serve_api_application(cfg, app)只设置服务端函数路由和渲染端点不服务静态资源。文档注释说明它Useful for WebAssembly environments or when static assets are served by another system。register_server_functions()仅把收集到的#[server]函数注册为路由返回RouterFullstackState需要自行.with_state(...)。serve_static_assets()只服务public目录下的静态文件除 index.html 外同样返回RouterFullstackState。FullstackState::headless()创建无根组件的状态对象wont render pages, but can still be used to register server functions and serve static assets适合只做函数注册、页面渲染走别处的场景。静态资源目录的解析规则server.rs 的public_path()优先读DIOXUS_PUBLIC_PATH环境变量否则取可执行文件旁的public目录CLI 会把静态资源打包进exe/public。如果你用非 CLI 方式自托管并改了资源位置需要通过该环境变量告知。如何验证挂载成功文档给出的验证手段集中在示例行为上按以下现象判断自有路由命中。按 custom_axum_serve.rs 示例请求/about应返回About us/submitPOST返回Form submitted!——这些是该示例路由的文档示例输出。fallback 落到 Dioxus 应用。访问任意未匹配路径时由fallback(get(FullstackState::render_handler))返回 SSR 渲染的 HTML响应Content-Type: text/html; charsetutf-8见 server.rs 的render_handler。服务端函数可用。README 示例中点击 Run a server function 按钮会调用get_meaning组件的h1显示返回值对life the universe and everything这个文档示例入参函数返回Some(42)。端口冲突信号。serve_router绑定失败时会以Failed to bind to address {addr}的上下文报错launch.rs 中TcpListener::bind(addr)的错误分支。限制与边界fallback 语义serve_dioxus_application注册的是 fallback 路由Dioxus 应用会捕获所有未匹配路径。若你的 Axum 服务里有兜底逻辑如 404 页面、API 前缀路由需要自行保证路由顺序Dioxus 不会替你区分。wasm 兼容性axum、tokio必须走 optional serverfeature这是文档明确要求的配置不是风格建议。非 Web 平台desktop/mobile 客户端入口始终是dioxus::launchdioxus crate 文档 与示例文档注释均如此说明Axum 相关代码不会进入这些平台的构建。热重载路径差异dioxus::serve在 debug 构建下会连接 devtools、支持路由级热重载每次热补丁会重建 Router 并重置渲染器状态见 launch.rs路径一的手动axum::serve不经过这套机制。更多可参考的材料fullstack-server READMEAxum Integration 与示例、05-FULLSTACK.md服务端函数注册流程、ServeConfig选项与数据流、examples/07-fullstack/ 目录下的其他 fullstack 示例。【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考