sealer 是阿里巴巴开源的基于 kuberentes 的集群镜像开源技术，能够把整个集群整体打包。

Sealer Cloud 能够在线化帮忙用户进行集群打包分享和运行，Sealer cloud 前后端也应用了十分先进的
rust+wasm 技术实现，本短文接上一篇持续讲一些代码构造，嵌套以及列表循环相干内容，让咱们看下
rust 有多优雅。

代码构造

sealer 源码 外面间接有具体的代码供参考。

当然有趣味的同学能够参加到我的项目开发中来。

.
├── components
│   ├── footer.rs
│   ├── header.rs # UI 的 header
│   ├── image_info.rs
│   ├── image_list.rs # 主体内容，镜像列表
│   └── mod.rs
├── main.rs # 主函数
├── routes
│   ├── login.rs
│   └── mod.rs
├── services
│   ├── mod.rs
│   └── requests.rs
└── types

模块导入

应用函数让你的 html 更清晰

impl Component for Header {
...
    fn view(&self) -> Html {
        html! {
            <nav class="navbar is-primary block" role="navigation" aria-label="main navigation">
                {self.logo_name() }
                {self.search() }
                {self.login() }
            </nav>
        }
    }
}

咱们肯定要防止把很多 html 都写在一个代码块中，yew 外面就能够通过函数的形式把它们进行切分。

impl Header {fn logo_name(&self) -> Html {
       html! {
           <div class="navbar-brand">
            <div class="navbar-item">
                <i class="far fa-cloud fa-2x fa-pull-left"></i>
                <strong> {"Sealer Cloud"}</strong>
            </div>
           </div>
       }
   }
...
}

这样看起来就很清晰，view 函数里调用上面的一个个 Html 模块。

在 main 中调用 header 模块

咱们在 header 中曾经实现了一个 Header 的 Component, 首先在 mod.rs 中把模块裸露进来：

pub mod header;
pub mod image_list;

在 main.rs 中导入 crate:

use crate::components::{header::Header, image_list::Images};

在 main 的主 UI 中导入 header UI

通过 <Header /> 这样的形式即可

fn view(&self) -> Html {
    html! {
        <div>
          <Header /> 
          <Images />
        </div>
    }
}

镜像列表 List 循环解决

先定义一个列表数组：

pub struct Image {
    name: String,
    body: String, 
}

pub struct Images{
    // props: Props,
    images: Vec<Image>
}

在 create 函数中做一些初始化的事件：

    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
        Images{
            images: vec![
                Image {name: String::from("kubernetes:v1.19.9"),
                  body: String::from("sealer base image, kuberntes alpine, without calico")
                },
                ...]

在 UI 中进行循环迭代：

   fn image_list(&self) -> Html {
       html! {
          <div class="columns is-multiline">
            {for self.images.iter().map(|image|{self.image_info(image)
                })
            }
          </div>
       }
   }

这里给 map 传入的是一个匿名函数，改函数返回单个镜像的详情。

单个镜像信息如下渲染：

   fn image_info(&self,image: &Image) -> Html {
       html! {
        <div class="column is-6">
          <div class="card">
            <header class="card-header">
              <p class="card-header-title">
                {image.name.to_string() }
              </p>
              <button class="card-header-icon" aria-label="more options">
              <span class="icon">
                <i class="fal fa-expand" aria-hidden="true"></i>
              </span>
            </button>
            </header>
              <div class="card-content">
              <div class="content">
                {image.body.to_string() }
                 <br />
                <time datetime="2016-1-1">{"11:09 PM - 1 Jan 2016"}</time>
              </div>
              </div>
           </div>
        </div>
       }
   }

这样一个镜像列表就做好了，是不是非常简单。
看一下整体成果：

kubernetes 一键装置

sealer 集群整体打包！