rust+wasm写前端真香之请求数据.md
2021/8/19 13:36:06
本文主要是介绍rust+wasm写前端真香之请求数据.md,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
[sealer]是阿里巴巴开源的基于kuberentes的集群镜像开源技术,可以把整个集群整体打包。
Sealer Cloud可以在线化帮助用户进行集群打包分享和运行,Sealer cloud前后端也使用了非常先进的
rust+wasm技术实现。
sealer cloud会与docker registry交互,未来你甚至可以把sealer cloud当作docker hub使用。
定义数据结构
可以看到registry返回的数据:
curl http://localhost:5000/v2/_catalog {"repositories":["centos","golang"]}
所以对应返回的数据我们定义个数据结构:
#[derive(Deserialize, Debug, Clone)] pub struct RegistryCatalog { pub repositories: Vec<String>, }
这个结构体用来接收后台返回的数据,我们还需要Model的结构体:
pub struct Images { // props: Props, pub repos: Option<Vec<String>>, pub error: Option<String>, pub link: ComponentLink<Self>, pub task: Option<FetchTask> }
消息枚举,通过不同的消息在页面更新时判断应该做什么样的动作:
#[derive(Debug)] pub enum Msg { GetRegistryCatelog(Result<RegistryCatalog, anyhow::Error>), }
页面首次初始化
首次初始化的时候向后台请求数据:
fn rendered(&mut self, first_render: bool) { if first_render { ConsoleService::info("view app"); let request = Request::get("http://localhost:8001/v2/_catalog") .body(Nothing) .expect("could not build request."); let callback = self.link.callback( |response: Response<Json<Result<RegistryCatalog, anyhow::Error>>>| { let Json(data) = response.into_body(); Msg::GetRegistryCatelog(data) }, ); let task = FetchService::fetch(request, callback).expect("failed to start request"); self.task = Some(task); } }
- first_render用于判断是不是第一次渲染,不写在这里面可能会导致页面渲染死循环。
- ConsoleService::info 可以帮助我们往控制台打印调试信息
- 定义一个request和一个请求成功后的回调函数callback
- callback内部接收到数据后返回对应的消息类型即可触发update函数(后面介绍)
- fetch函数触发http请求调用,传入request与callback
- 重中之重,一定要把task存到self.task里面,不然task立马被回收会触发一个[The user aborted a request]的错误
页面更新接口
在first render的时候我们向后台请求了数据,callback函数会触发update的调用。
把消息带过去交给update函数处理。
fn update(&mut self, msg: Self::Message) -> ShouldRender { use Msg::*; match msg { GetRegistryCatelog(response) => match response { Ok(repos) => { ConsoleService::info(&format!("info {:?}", repos)); self.repos = Some(repos.repositories); } Err(error) => { ConsoleService::info(&format!("info {:?}", error.to_string())); }, }, } true }
msg可以有多种消息类型,此处就写一个
#[derive(Debug)] pub enum Msg { GetRegistryCatelog(Result<RegistryCatalog, anyhow::Error>), }
response就是Result<RegistryCatalog, anyhow::Error>类型,Ok时把它放到结构体中保存就好。
最后渲染到页面上:
fn view(&self) -> Html { html! { <div class="container column is-10"> { self.image_list() } </div> } } fn image_list(&self) -> Html { match &self.repos { Some(images) => { html! { <div class="columns is-multiline"> { for images.iter().map(|image|{ self.image_info(image) }) } </div> } } None => { html! { <p> {"image not found"} </p> } } } }
如此就完成了整个数据请求的绑定渲染。
实际运行
因为请求docker registry会有跨域问题,所以整个nginx代理:
docker run -p 5000:5000 -d --name registry registry:2.7.1
nginx.conf:
user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; server { listen 8000; #监听8000端口,可以改成其他端口 server_name localhost; # 当前服务的域名 location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE' always; add_header 'Access-Control-Allow-Headers' '*' always; add_header 'Access-Control-Max-Age' 1728000 always; add_header 'Content-Length' 0; add_header 'Content-Type' 'text/plain; charset=utf-8'; return 204; } if ($request_method ~* '(GET|POST|DELETE|PUT)') { add_header 'Access-Control-Allow-Origin' '*' always; } proxy_pass http://172.17.0.3:5000; # the registry IP or domain name proxy_http_version 1.1; } } #gzip on; include /etc/nginx/conf.d/*.conf; }
docker run -d --name registry-proxy -p 8001:8000 \ -v /Users/fanghaitao/nginx/nginx.conf:/etc/nginx/nginx.conf nginx:1.19.0
测试registry api是否能通:
curl http://localhost:8001/v2/_catalog {"repositories":["centos","golang"]}
然后代码里面访问nginx代理的这个地址即可
这篇关于rust+wasm写前端真香之请求数据.md的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南