trunk 构建、打包 rust wasm 程序；yewweb 前端开发库；
项目仓库yew-web
trunk
之前已经简单介绍了trunk,全局安装：
$> cargo install --locked trunk
常用命令：
trunk build基于wasm-bindgen构建 wasm 程序。trunk watch检测文件系统，更改时触发新的构建trunk serve和 trunk watch 动作一致，创建一个 web 服务trunk clean清理之前的构建trunk config show显示当前 trunk 的配置trunk tools show打印出项目中 trunk 需要的工具
新增配置文件Trunk.toml,可以通过trunk tools show查看需要的工具,它们的下载的地址。包括sass\tailwindcss\wasm-bindgen\wasm-opt
安装yewweb 开发工具，类似 react 设计；安装之前文章介绍的gloo，它是js_sys\web_sys的二次分装，简化对于 web api、js 语法的使用。还有链接 web 前端不可或缺的wasm-bindgen
[dependencies]
gloo = "0.11.0"
wasm-bindgen = "0.2.92"
yew = { version = "0.21.0", features = ['csr'] }
正常的页面开发，路由必不可少，用以跳转不同的页面。基于yew的路由库yew-router
安装：
$> cargo add yew-router
在代码中，我们默认就只使用函数组件一种方式书写#[function_component]。
文件目录介绍：
public静态资源目录，打包时直接拷贝到编译目录下。src/assets资源目录，图片、css 等src/routes路由src/stores共享数据src/views视图文件定义src/main.rs入口文件，根文件。src/app.rs主视图文件
所有的模块定义，我们在其根目录下定义
mod.rs文件统一声明导出，然后在main.rs中声明为全局的 crate，这样任何目录下想要访问其他目录则可以通过根包导入使用。
在main.rs,导入了src/routes路由根包；导入了src/views视图文件根包；还有主视图文件app.rs
mod app;
mod routes;
mod views;
//
use app::App;fn main() {yew::Renderer::<App>::new().render();
}
然后在app.rs中，导入了主路由文件route，组件BrowserRouter做为根路由器，会注册一个路由上下文，可在全局所有组件内访问。
use yew::prelude::*;
use yew_router::prelude::*;// 主路由文件
use crate::routes::route::{switch, Route};#[function_component]
pub fn App() -> Html {html! {<BrowserRouter><Switch<Route> render={switch} /></BrowserRouter>}
}
链接资源加载
trunk 中所有的链接资源必遵循三个原则：
- 必须声明有效的 html
link标记。 - 必须有属性
data-trunk - 必须有
res={type}属性，type则为其支持的资源类型
trunk目前支持的资源 type - rust 、sass/scss 、css 、tailwind-css、icon、inline 、copy-file、copy-dir
我们将public直接复制整个目录到打包目录中。
<link data-trunk rel="copy-dir" href="public" />
trunk 使用dart-sass来打包编译scss文件，我们在assets/base.scss定义样式，然后在index.html加载
<link data-trunk rel="scss" href="/src/assets/base.scss" />
base.scss作为基础样式资源，其他模块的样式文件，可以全部导入到这这个文件.
可以互相依赖，trunk暂时没有提供方案处理每个页面的样式，只能以外部引入的方式处理。持续关注，有关的提案还在讨论中。
脚本资源加载
脚本资源加载有三个原则：
- 必须声明为有效的 html
script标记 - 必须有属性 data-trunk
- 必须有属性
src，指向脚本文件
这允许我们可以直接导入一些js脚本，trunk 会复制到 dist 目录中，就可以在程序中使用它们。通过哈希处理以便进行缓存。
服务基本路径baseURI
可以在Trunk.toml中配置服务的基本路径,
[build]
# public_url = "/hboot/"
public_url = ""
如果配置了基本路由，那我们在程序里的路径处理就会多一个前缀/hboot/,想要在程序里访问这个路径，则需要配置index.html 在<head>增加：
<base data-trunk-public-url />
这对于路由管理非常重要，不然就匹配不到设置的路径。在运行程序中可以通过document.baseURI访问。
trunk 构建过程
- 读取并解析
index.html文件 - 生成所有资源编译计划
- 并行构建所有资源
- 构建完成将资源写入暂存目录
- 将 html 文件写入暂存目录
- 将 dist 目录内容替换为暂存目录的内容
未来可能发生变化。
material_yew ui 库
适配yew设计的 Material Design 风格的 UI 库。
material_yew;
引入发现不兼容，这里先占个坑位。
使用原生的input \ button组件构建页面，再加一点样式。
use std::ops::Deref;use web_sys::{Event, HtmlInputElement};
use yew::prelude::*;#[function_component]
pub fn App() -> Html {let name = use_state(|| "admin".to_string());let update_name = {let name = name.clone();Callback::from(move |event: Event| {let input = event.target_dyn_into::<HtmlInputElement>();if let Some(input) = input {name.set(input.value())}})};return html! {<input class="hb-input" value={name.clone().deref().to_string()} οnchange={update_name} required={true} name={"name"} type={"text"} placeholder={"用户名"} />}
}
yew-router 定义路由
在src/routes/route.rs定义主路由
use yew::prelude::*;
use yew_router::prelude::*;// 路由配对的视图文件
use crate::views::main;
use crate::views::not_found;#[derive(Clone, Routable, PartialEq)]
pub enum Route {#[at("/")]Main,#[not_found]#[at("/404")]NotFound,
}// 作为Switch 组件的属性render绑定；回调处理匹配的路由应该渲染什么
pub fn switch(routes: Route) -> Html {match routes {Route::Main => html! {<main::App />},Route::NotFound => html! {<not_found::App />},}
}
定义枚举值Route,再与组件<Switch />配对，组件通过路径查找将其传递给render回调，在回调中决定渲染什么。如果没有匹配的路由，则会匹配到具有#[not_found]属性的路径。若未指定则什么都不渲染。
在src/app.rs导入路由，上面已经贴过代码<Switch<Route> render={switch} />
在src/views定义了main以及not_found视图文件,启动访问http://127.0.0.1:8080/
use_navigator 获取路由导航对象
从一个页面跳转到另一个页面，通过use_navigator获取导航对象。
use crate::routes::route::Route;#[function_component]
pub fn App() -> Html {let navigator = use_navigator().unwrap();let handle_logout = {Callback::from(move |_| {navigator.push(&Route::Login);})};
}
包含了常用跳转路由的方法push \ go \ back \ forward等。
除了手动跳转路由，通过Link组件点击触发路由跳转。比如我们来增加左侧的菜单，切换不同的视图。
// ...#[function_component]
pub fn App() -> Html {html! {<div class="hb-nav-menu"><div class="nav-menu"><Link<MainRoute> classes={"menu-item"} to={MainRoute::Home}>{"首页"}</Link<MainRoute>><Link<MainRoute> classes={"menu-item"} to={MainRoute::User}>{"用户"}</Link<MainRoute>></div></div>}
}
嵌套路由
我们使用Redirect重定向路由，比如访问/重定向到/main
#[derive(Clone, Routable, PartialEq)]
pub enum Route {#[at("/")]Home// ...
}pub fn switch(routes: Route) -> Html {// log!(JsValue::from(routes));match routes {Route::Home => html! {<Redirect<MainRoute> to={MainRoute::Home}/>},// ...}
}
嵌套路由，之前在根组件中使用Switch处理路由，我们创建/routes/main.rs处理带有顶部导航栏、左侧菜单的路由.
// ...other#[derive(Clone, Routable, PartialEq)]
pub enum MainRoute {#[at("/main")]Home,#[at("/main/user")]User,#[not_found]#[at("/main/404")]NotFound,
}pub fn main_switch(routes: MainRoute) -> Html {match routes {MainRoute::Home => html! {<h1>{"首页"}</h1>},MainRoute::User => html! {<user::App />},MainRoute::NotFound => html! {<Redirect<Route> to={Route::NotFound} />},}
}
同样的，在这个子路由中也存在NotFound,匹配不到时我们重定向到根路由Route::NotFound404 页面。在这里Home \ User就代表了左侧的两个菜单。
在根路由中/routes/route.rs,定义了/main 和/main/*的匹配路由，它们都指向渲染main::App组件
#[derive(Clone, Routable, PartialEq)]
pub enum Route {#[at("/main")]MainRoot,#[at("/main/*")]Main,// ...
}pub fn switch(routes: Route) -> Html {// log!(JsValue::from(routes));match routes {// ...Route::Main | Route::MainRoot => html! {<main::App />}}
}
我们需要在main::App页面中使用Switch分发路由
// ...
use crate::routes::main::{main_switch, MainRoute};#[function_component]
pub fn App() -> Html {html! {<div class="hb-main"><header::App></header::App><div class="hb-main-layout"><nav_menu::App></nav_menu::App><div class="hb-main-content"><Switch<MainRoute> render={main_switch} /></div></div></div>}
}
use_route 当前路由信息
use_location 获取当前路由信息，比use_route信息多一点，同History::location。
当路由发生变化时，当前组件会重新渲染。
之前加了左侧菜单，需要处理下点击时添加对活动菜单的样式，增加类active
#[function_component]
pub fn App() -> Html {// ...html! {<div class="hb-nav-menu"><div class="nav-menu"><Link<MainRoute> classes={is_active(MainRoute::Home)} to={MainRoute::Home}>{"首页"}</Link<MainRoute>><Link<MainRoute> classes={is_active(MainRoute::User)} to={MainRoute::User}>{"用户"}</Link<MainRoute>></div></div>}
}
Link组件接受classes定义类，我们定义一个is_active方法去处理当前的链接是否处于活动状态。参数为当前渲染的路由枚举值。
let is_active = |route: MainRoute| {let mut class = classes!("menu-item");let menu = active_menu.clone();if route == *menu {class.push("active");}class
};
在is_active 中，默认每个链接都有menu-item，然后通过active_menu变量判断是否需要追加类active
定义active_menu,通过路由的变化，来变更活动的路由值。使用了use_effect_withhook 接受route作为依赖，变更时触发调用，然后通过active_menu_set更新值。
// 当前路由
let route: Option<_> = use_route::<MainRoute>();let active_menu = use_state(|| MainRoute::Home);
let active_menu_set = active_menu.clone();use_effect_with(route.clone(), move |_| {// ..let route = route.clone();if let Some(active_route) = route {active_menu_set.set(active_route);}
});
跨组件数据交互
父子组件之间可以通过 props 进行数据传递。跨组件如果采用这种一层层传就很冗余，更加麻烦不好管理。
通过使用到数据的组件跟组件上挂载上下文 context,然后子组件消耗使用。通过ContextProvider包裹根部元素
将所有的数据模块放在目录/src/stores，新建了一个app.rs定义数据App
#[derive(Clone, Debug, PartialEq)]
pub struct App {pub name: String,
}
在视图主文件中app.rs引入并初始化数据，使用ContextProvider传递。
#[function_component]
pub fn App() -> Html {let app = use_state(|| app::App {name: "yew-web".to_string(),});html! {<BrowserRouter><ContextProvider<app::App> context={(*app).clone()} ><Switch<Route> render={switch} /></ContextProvider<app::App>></BrowserRouter>}
}
在所有的子孙组件通过use_context钩子函数获取消费使用。
use yew::prelude::*;use crate::stores::app;#[function_component]
pub fn App() -> Html {let context = use_context::<app::App>().unwrap();html! {<div class="user"><h2>{"个人中心"}</h2><p>{"消费来自根部组件的数据："}{context.name}</p></div>}
}跨组件数据更新
除了消费使用，可能还需要更新，我们在顶部栏加一个按钮处理更新。只有数据来源都在同一个地方，那么我们通过use_reducer来更新数据。数据变更后，根组件触发重新渲染，再向下传递。
在/stores/app定义AppProvider,并初始化数据，这里通过使用use_reducer初始化了数据，向下传递的app是带有dispatch方法的，可以用来更新数据。
// 自定义上下文数据类型
pub type AppContext = UseReducerHandle<App>;#[derive(Properties, Debug, PartialEq)]
pub struct AppProviderProps {#[prop_or_default]pub children: Html,
}#[function_component]
pub fn AppProvider(props: &AppProviderProps) -> Html {let app = use_reducer(|| App {name: "yew-web".to_string(),});html! {<ContextProvider<AppContext> context={app}>{props.children.clone()}</ContextProvider<AppContext>>}
}
我们向下传递的 context 是使用use_reducer创建的，对于ContextProvider需要的类型，通过自定义类型AppContext。在子孙组件使用，则需导入使用app::AppContext
修改视图主文件，可以直接使用app::AppProvider包裹根组件：
#[function_component]
pub fn App() -> Html {// let app = use_reducer(|| app::App {// name: "yew-web".to_string(),// });html! {<BrowserRouter>// <ContextProvider<app::App> context={(*app).clone()} >// <Switch<Route> render={switch} />// </ContextProvider<app::App>><app::AppProvider><Switch<Route> render={switch} /></app::AppProvider></BrowserRouter>}
}
网络请求
网络请求必不可少，请求后端数据完成页面渲染。
通过现有封装的依赖库完成数据请求，包括:
gloo-nethttp 请求库serde高效的数据序列化、反序列化框架wasm-bindgen-futures提供了在 rust 和 js 之间的异步交互能力
安装后测试请求数据并渲染到页面
定义了接口响应数据结构TopicResponse,主体数据结构Topic:
// 数据主体
#[derive(Deserialize, Debug, Clone, PartialEq)]
pub struct Topic {pub id: String,pub title: String,pub top: bool,pub visit_count: i32,pub content: String,pub create_at: String,
}// 请求响应
#[derive(Deserialize, Debug, Clone, PartialEq)]
pub struct TopicResponse {pub success: bool,pub data: Vec<Topic>,
}
发起请求，使用use_effect_with接受依赖变更时触发，这里我们这调用一次：
use gloo_net::http::Request;
use wasm_bindgen_futures::spawn_local;#[function_component]
pub fn App() -> Html {let data = use_state(|| vec![]);let data_set = data.clone();use_effect_with((), move |_| {spawn_local(async move {let data: TopicResponse = Request::get("https://****/api/v1/topics").send().await.unwrap().json().await.unwrap();data_set.set(data.data);});});// ...
}
在这里使用到了新语法async...await..., 它可以让我们以同步的方式书写异步代码。通过async声明的块、函数或闭包，会返回一个Future类型，它不会阻塞当前线程的执行，当它处于.await时事件循环会将控制权交给其他任务。在它被挂起的时候，他执行的上下文也会被保存。
注意 rsut 的版本，
async...await在稳定本^1.39可用
Request是gloo_net提供的请求模块，它是原生fetch的包装，以便我们更方便的调用。
我们在这里调用没有传参数，我们可以定义接口需要的请求参数,首先定义请求数据结构：
/*** 请求参数*/
#[derive(Serialize, Debug, Clone, PartialEq)]
pub struct TopicRequest {pub page: i32,pub tab: String,pub limit: i32,pub mdrender: bool,
}
然后在视图文件中，创建请求数据实例，我们让use_effect_with依赖实例,当参数变化时，重新发出请求
#[function_component]
pub fn App() -> Html {// reqlet params = use_state(|| TopicRequest {page: 1,tab: "good".to_string(),limit: 10,mdrender: false,});use_effect_with(params.clone(), move |req_params| {let req = req_params.clone();spawn_local(async move {let page = req.page.to_string();let limit = req.limit.to_string();let tab = req.tab.to_string();let mdrender = req.mdrender.to_string();let query = vec![("page", &page),("limit", &limit),("tab", &tab),("mdrender", &mdrender),];let data: TopicResponse = Request::get("https://****/api/v1/topics").query(query).send().await.unwrap().json().await.unwrap();data_set.set(data.data);});});// ...
}
Request::get调用返回gloo_net::http::RequestBuilder实例，通过query()方法添加请求参数，暂时需要挨个组装一个下参数，没有找到直接转换的方法。如果是post可以使用body()
然后在页面上增加按钮，切换上一页、下一页。增加事件监听:
let update_params = params.clone();
let handle_jump_next = {let req_set = update_params.clone();Callback::from(move |_| {req_set.set(TopicRequest {page: update_params.page + 1,..(*update_params).clone()});})
};
我们只更新了page参数，其他值不做修改，通过*update_params解引用获取到值。..指定剩余未显示设置值的字段与给定实例相同的值.
在所有的代码逻辑中没有处理接口请求失败、或者响应数据错误的问题。这里假设我们一切都请求正常，通过data去渲染视图：
html! {<div class="user"><ul class="list">{data.iter().map(move |item|{html! {<li key={format!("{}", item.id)}><p>{format!("{}", item.title)}</p></li>}}).collect::<Html>()}</ul></div>
}
使用web_sys Request 请求
gloo-net是基于web_sys的底层 fetch API 的二次封装。它是基于 rust 的异步特性构建的，使用async/await处理异步请求，可以跨平台，不止处理 web 平台。
相比于gloo-net,web_sys更倾向 web 平台，它提供了浏览器原生 API 的抽象。在 web Assembly 环境中于 web Api 交互。
通过使用web_sys提供的原生 fetch 处理异步请求，开发上面列表的详情页面detail
在列表页面数据各项增加点击事件，事件处理并跳转至详情页面
let info = item.clone();
let navigator = navigator.clone();let view_detail = Callback::from(move |_| {let id = info.id.clone();navigator.push(&MainRoute::CNodeDetail { id: id });
});
html! {<li key={format!("{}", &item.id)} οnclick={view_detail}><p>{format!("{}", &item.title)}</p></li>
}
在详情页面获取到传过来的参数id,然后发起请求获取当前文章的详情信息,
先看一下 js 原生 api fetch 的请求示例
fetch("https://****/api/v1/topic/*id").then((res) => {return res.json();}).then((res) => {// 接口响应console.log(res);});
使用web_sys提供的 api 调用的步骤基本一致，我们通过提供的window()函数获取到 js 全局Window对象，然后调用请求方法fetch_with_str(),还有另一个fetch_with_request()参数需要使用Request初始化构造请求参数。
详情页面需要列表点击传过来的参数id,使用use_effect_with增加依赖项，为了保证回调函数cb不被清理，保证它存在一个很长的生命周期，使用了forget()方法。
use web_sys::{window};#[function_component]
pub fn App(props: &DetailProps) -> Html {// ...use_effect_with(query_id, move |query_id| {let url = format!("https://****/api/v1/topic/{}", *(query_id.clone()));info!("{}", url);let window = window().unwrap();let _ = window.fetch_with_str(&url).then(&cb);|| cb.forget()});// ...
}看一下方法fetch_with_str签名fn fetch_with_str(&self, input: &str) -> Promise,传参为接口地址 url，响应一个Promise对象，通过Promise的方法来解析响应数据。这里我们调用了then()方法接受响应。
看下Promise的 then 方法的签名fn then(&self, cb: &Closure<dyn FnMut(JsValue)>) -> Promise 它接受一个实现了FnMuttrait 的闭包函数的引用，闭包参数为JsValue类型的数据。
来定义这个回调闭包函数，通过 Closure::wrap()创建一个闭包，并转换为实现了FnMuttrait 的 trait 对象；使用了智能指针Box::new来创建Box类型的实例，因为响应数据不知道其大小、也不确定其生命周期。
let cb = Closure::wrap(Box::new(move |value: JsValue| {let res = value.dyn_into::<Response>().unwrap();let json = res.json().unwrap();let _ = json.then(&get_data);
}) as Box<dyn FnMut(JsValue)>);
根据 js 原生 fetch 调用，第一次的then方法返回的是一个Response类型，我们需要把JsValue转换为Response类型，通过JsCast::dyn_into()方法处理 js 与 rust 之间的数据转换。然后就可以调用json()方法了，解析响应并再次通过then()方法处理响应数据
这里接收到的就是我们接口具体的数据响应了，定义数据结构：
#[derive(Deserialize, Debug, Clone, PartialEq)]
pub struct DetailResponse {pub success: bool,pub data: Detail,
}
定义回调闭包函数get_data,这里针对 JsValue 数据转 rust 数据结构就需要序列化库serde,之前已经安装过了，想要把 JsValue 转换为serde还需要转换工具gloo_utils::format::JsValueSerdeExt，它提供了into_serde/from_serde用于互相转换
let get_data = Closure::wrap(Box::new(move |value: JsValue| {let data = value.into_serde::<DetailResponse>().unwrap();if data.success {data_set.set(data.data);};
}) as Box<dyn FnMut(JsValue)>);
将 JsValue 转换为 rust 数据结构后，就可以取响应数据进行页面渲染了。
这样对比还是使用前一种二次封装的库更好，写法更优雅；更容易理解。毕竟已经习惯使用async..await了
097:跳台台阶扩展问题098:包含不超过两种字符的最长子串099:字符串的排列](https://img-blog.csdnimg.cn/direct/c22edbc75f24486599995bf7fd1d3fcd.png)
