rust+wasm写前端真香之嵌套与循环

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! {
            

                { self.logo_name() }
                { self.search() }
                { self.login() }
            
        }
    }
}

我们一定要避免把很多html都写在一个代码块中，yew里面就可以通过函数的方式把它们进行切分。

impl Header {
   fn logo_name(&self) -> Html {
       html! {
           

            

                
                 { "Sealer Cloud" }
            
           
       }
   }
...
}

这样看起来就很清晰，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

通过

这样的方式即可

fn view(&self) -> Html {
    html! {
        

          
 
          
        
    }
}

镜像列表List循环处理

先定义一个列表数组：

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

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

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

    fn create(props: Self::Properties, _: ComponentLink) -> 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! {
          

            {
                for self.images.iter().map(|image|{
                    self.image_info(image)
                })
            }
          
       }
   }

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

单个镜像信息如下渲染：

   fn image_info(&self,image: &Image) -> Html {
       html! {
        

          

            

              

                { image.name.to_string() }
              
              
              
                
              
            
            
              

              

                { image.body.to_string() }
                 

                { "11:09 PM - 1 Jan 2016" }
              
              
           
        
       }
   }

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

kubernetes一键安装

sealer集群整体打包！