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集群整体打包！