rust+wasm пишет интерфейсную маршрутизацию реального аромата

задняя часть Go внешний интерфейс

sealerЭто кластер на основе Kuberentes, отражающий технологию с открытым исходным кодом, предоставленную Alibaba, которая может упаковать весь кластер в единое целое.

Sealer Cloud может помочь пользователям упаковывать, совместно использовать и запускать кластеры в Интернете. внедрение технологии rust+wasm.

Эта короткая статья знакомит с обработкой внешней части маршрутизации, перехода по ссылкам, передачи параметров и т. д.

определить маршруты

use yew_router::prelude::*;

#[derive(Switch,Clone)]
pub enum AppRoute {
    #[to = "/images/{name}"]
    ImageDetail(String),
    #[to = "/images"]
    Images
}

pub type Anchor = RouterAnchor<AppRoute>

У нас есть две страницы, URL-адрес, соответствующий списку изображений,/images,

Другая страница сведений об изображении, соответствующий URL-адрес/image/{name},

В качестве параметра прыжка берем имя изображения.

Изображения и ImageDetail здесь — это модели, которые мы определили ранее, и я не знаю, что читать в моей предыдущей статье.

Матч на главной странице

Различные пользовательские интерфейсы модели отображаются во всем теле в соответствии с разными URL-адресами.

fn view(&self) -> Html {
    html! {
        <div>
          <Header />
          <Router<AppRoute> render = Router::render(Self::switch) />
        </div>
    }
...

Функция переключения определяет логику вызова:

fn switch(route: AppRoute) -> Html {
     match route {
         AppRoute::Images => html! { <Images /> },
         AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> }
     }
 }

Очень просто и элегантно, разные маршруты подходят к разным моделям.

Передача параметров

AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> }

Вы можете видеть, что этот маршрут пытается передать параметры на страницу ImageDetail.

Структура ImageDetail должна получить этот параметр:


pub struct ImageDetail{
   props: Props,
}

#[derive(Properties, Clone)]
pub struct Props {
    pub imageName: String, // 这个名字与imageName=name对应
}

Присвойте ему значение при инициализации:

fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
    ImageDetail{
        props,
    }
}

Тогда мы можем использовать его:

fn view(&self) -> Html {
    html! {
        <div>
        { "this is image info" }
        { self.props.imageName.to_string() }
        </div>
    }
}

Перейти по ссылке

Как страница imageList переходит на страницу ImageDetail?

<Anchor route=AppRoute::ImageDetail(image.name.to_string())>
  <p>
    { image.name.to_string() }
  </p>
</Anchor>

Таким образом, имя изображения передается на подстраницу, что очень просто, удобно и элегантно.

Подробный код можно найти в следующей информации ~

Релевантная информация:

Исходный код интерфейса Sealer Cloud

Проблемы, возникающие в процессе Установка kubernetes в один клик

Кластер герметика упакован целиком!

Категории