budshome (blog: 芽之家) shared the aphorism --
生活赋予我们的一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待、志愿,充满着求知和斗争的志向,充满着希望、信心的青春。 -- 保尔·柯察金

[WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(4)- 获取 GraphQL 数据并解析

💥 内容涉及著作权,均归属作者本人。若非作者注明,默认欢迎转载:请注明出处,及相关链接。

Summary: 《Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端》系列文章第四部分:在 yew 开发的 wasm 前端应用中,与后端进行数据交互,获取 GraphQL 数据并解析。

Topics: rust graphql webassembly wasm yew

在 Rust 生态,使用 yew 开发 WebAssembly 应用方面,我们已经介绍了《起步及 crate 选择》《组件和路由》,以及《资源文件及重构》。今天,我们介绍如何在 yew 开发的 wasm 前端应用中,与后端进行数据交互。我们的后端提供了 GraphQL 服务,让我们获取 GraphQL 数据并解析吧!

需要新引入一些 crate:使用 graphql_client 获取 GraphQL 数据,然后通过 serde 进行解析。wasm 需要绑定 web API,以发起请求调用和接受响应数据,需要使用 web-sys,但其可以通过 yew 库路径引入,无需加入到依赖项。但是,web-sys 中和 JavaScript Promise 绑定和交互方面,需要 wasm-bindgen-futures。总体上,我们需要引入:

cargo add wasm-bindgen-futures graphql_client serde serde_json

现在,我们的 Cargo.toml 文件内容如下:

[package]
name = "frontend-yew"
version = "0.1.0"
authors = ["我是谁?"]
edition = "2018"

[dependencies]
wasm-bindgen = "0.2.74"
wasm-bindgen-futures = "0.4.24"

yew = "0.18.0"
yew-router = "0.15.0"

graphql_client = "0.9.0"
serde = { version = "1.0.126", features = ["derive"] }
serde_json = "1.0.64"

编写 GraphQL 数据查询描述

首先,我们需要从 GraphQL 服务后端下载 schema.graphql,放置到 frontend-yew/graphql 文件夹中。schema 是我们要描述的 GraphQL 查询的类型系统,包括可用字段,以及返回对象等。

然后,在 frontend-yew/graphql 文件夹中创建一个新的文件 all_projects.graphql,描述我们要查询的项目数据。项目数据查询很简单,我们查询所有项目,不需要传递参数:

query AllProjects {
  allProjects {
    id
    userId
    subject
    website
  }
}

最后,在 frontend-yew/graphql 文件夹中创建一个新的文件 all_users.graphql,描述我们要查询的用户数据。用户的查询,需要权限。也就是说,我们需要先进行用户认证,用户获取到自己在系统的令牌(token)后,才可以查看系统用户数据。每次查询及其它操作,用户都要将令牌(token)作为参数,传递给服务后端,以作验证。

query AllUsers($token: String!) {
  allUsers(
    token: $token
  ) {
    id
    email
    username
  }
}

用户需要签入系统,才能获取个人令牌(token)。此部分我们不做详述,请参阅文章《基于 tide + async-graphql + mongodb 构建异步 Rust GraphQL 服务》、《基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务》,以及项目 zzy/tide-async-graphql-mongodb 进行了解。

请求(request)的构建

使用 graphql_client 构建查询体(QueryBody)

在此,我们需要使用到上一节定义的 GraphQL 查询描述,通过 GraphQLQuery 派生属性注解,可以实现与查询描述文件(如 all_users.graphql)中查询同名的结构体。当然,Rust 文件中,结构体仍然需要我们定义,注意与查询描述文件中的查询同名。如,与 all_users.graphql 查询描述文件对应的代码为:

#[derive(GraphQLQuery)]
#[graphql(
    schema_path = "./graphql/schema.graphql",
    query_path = "./graphql/all_users.graphql",
    response_derives = "Debug"
)]
struct AllUsers;
type ObjectId = String;

type ObjectId = String; 表示我们直接从 MongoDB 的 ObjectId 中提取其 id 字符串。

接下来,我们构建 graphql_client 查询体(QueryBody),我们要将其转换为 Value 类型。项目列表查询没有参数,构造简单。我们以用户列表查询为例,传递我们使用 PBKDF2 对密码进行加密(salt)和散列(hash)运算后的令牌(token)。

本文实例中,为了演示,我们将令牌(token)获取后,作为字符串传送,实际应用代码中,当然是作为 cookie/session 参数来获取的,不会进行明文编码。

    let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJlbWFpbCI6ImFzZmZhQGRzYWZhLmNvbSIsInVzZXJuYW1lIjoi5a-G56CBMTExIiwiZXhwIjoxMDAwMDAwMDAwMH0.NyEN13J5trkn9OlRqWv2xMHshysR9QPWclo_-q1cbF4y_9rbkpSI6ern-GgKIh_ED0Czk98M1fJ6tzLczbdptg";
    let build_query = AllUsers::build_query(all_users::Variables {
        token: token.to_string(),
    });
    let query = serde_json::json!(build_query);

构造 web-sys 请求

构建 web-sys 请求时:

  • 我们需要设定请求的方法(method),GraphQL 请求须为 POST
  • 我们需要将 graphql_client 查询体(QueryBody)转换为字符串,压入到 web-sys 请求体中。
  • 可选地,我们需要声明查询请求是否为跨域资源共享(Cross-Origin Resource Sharing)。web-sys 请求中,默认为跨域资源共享。
    let mut req_opts = RequestInit::new();
    req_opts.method("POST");
    req_opts.body(Some(&JsValue::from_str(&query.to_string())));
    req_opts.mode(RequestMode::Cors); // 可以不写,默认为 Cors

    let gql_uri = "http://127.0.0.1:8000/graphql";
    let request = Request::new_with_str_and_init(gql_uri, &req_opts)?;

注 1:如果你遇到同源策略禁止读取的错误提示,请检查服务后端是否设定了 Access-Control-Allow-Origin 指令,指令可以用通配符 * 或者指定数据源链接地址(可为列表)。

注 2let gql_uri = "http://127.0.0.1:8000/graphql"; 一行,实际项目中,通过配置环境变量来读取,是较好的体验。

响应(response)数据的接收和解析

响应(response)数据的接收

响应(response)数据的接受部分代码,来自 sansx(yew 中文文档翻译者) 的 yew 示例项目 sansx/yew-graphql-demo

提交请求方面,web-sys 提供了四种方式:

  • Window::fetch_with_str
  • Window::fetch_with_request
  • Window::fetch_with_str_and_init
  • Window::fetch_with_request_and_init

我们使用 Window::fetch_with_request 提交请求,返回的数据为 JsValue,需要通过 dyn_into() 方法转换为响应(Response)类型。

    let window = yew::utils::window();
    let resp_value =
        JsFuture::from(window.fetch_with_request(&request)).await?;
    let resp: Response = resp_value.dyn_into().unwrap();
    let resp_text = JsFuture::from(resp.text()?).await?;

响应(response)数据的解析

我们接收到的数据是 JsValue 类型。首先,需要将其转换为 Value 类型,再提取我们需要的目标数据。本文示例中,我们需要的目标数据都是列表,所以转换为动态数组(Vector)。

    let users_str = resp_text.as_string().unwrap();
    let users_value: Value = serde_json::from_str(&users_str).unwrap();
    let users_vec =
        users_value["data"]["allUsers"].as_array().unwrap().to_owned();

    Ok(users_vec)

数据的渲染

我们实现了数据获取、转换,以及部分解析。但是,组件的状态和数据请求的关联——如前几篇文章所述——是通过 yew 中的 Message 关联的。如,组件和消息的定义:

pub struct Users {
    list: Vec<Value>,
    link: ComponentLink<Self>,
}

pub enum Msg {
    UpdateList(Vec<Value>),
}

组件定义方面,我们不再赘述。我们集中于数据展示渲染方面:yew 的 html! 宏中,是不能使用 for <val> in Vec<val> 这样的循环控制语句的,其也不能和 html! 宏嵌套使用。但 html! 宏中提供了 for 关键字,用于对包含项(item)类型为 VNode 的迭代体(即实现了 Iterator)进行渲染。如用户列表的渲染代码:

   fn view(&self) -> Html {
        let users = self.list.iter().map(|user| {
            html! {
                <div>
                    <li>
                        <strong>
                            { &user["username"].as_str().unwrap() }
                            { " - length: " }
                            { &user["username"].as_str().unwrap().len() }
                        </strong>
                    </li>
                    <ul>
                        <li>{ &user["id"].as_str().unwrap() }</li>
                        <li>{ &user["email"].as_str().unwrap() }</li>
                    </ul>
                </div>
            }
        });

        html! {
            <>
                <h1>{ "all users" }</h1>
                <ul>
                    { for users }
                </ul>
            </>
        }
    }
}

对于项目列表的数据展示,是类似的,不过我们需要注意的一点为:yew 中的数据输出,有字面量和 IntoPropValue 两种。前者比较灵活:String 和 &str 均可;而后者须为实现 IntoPropValue<std::option::Option<Cow<'static, str>>> 特质(trait)的类型,如 String。比如:项目列表中,对于链接的 href 属性,必须是实现了 IntoPropValue<std::option::Option<Cow<'static, str>>> 特质(trait)的 String,而直接输出的字面量则不同。

    <a href={ project["website"].as_str().unwrap().to_owned() }>
        { &project["website"].as_str().unwrap() }
    </a>

完整代码

推荐你从项目 zzy/tide-async-graphql-mongodb 下载完整代码,更欢迎你做出任何贡献。

pages/users.rs

use graphql_client::GraphQLQuery;
use serde_json::Value;
use std::fmt::Debug;
use wasm_bindgen::{prelude::*, JsCast};
use wasm_bindgen_futures::{spawn_local, JsFuture};
use yew::web_sys::{Request, RequestInit, RequestMode, Response};
use yew::{html, Component, ComponentLink, Html, ShouldRender};

#[derive(Debug, Clone, PartialEq)]
pub struct FetchError {
    err: JsValue,
}

impl From<JsValue> for FetchError {
    fn from(value: JsValue) -> Self {
        Self { err: value }
    }
}

#[derive(GraphQLQuery)]
#[graphql(
    schema_path = "./graphql/schema.graphql",
    query_path = "./graphql/all_users.graphql",
    response_derives = "Debug"
)]
struct AllUsers;
type ObjectId = String;

async fn fetch_users() -> Result<Vec<Value>, FetchError> {
    let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJlbWFpbCI6ImFzZmZhQGRzYWZhLmNvbSIsInVzZXJuYW1lIjoi5a-G56CBMTExIiwiZXhwIjoxMDAwMDAwMDAwMH0.NyEN13J5trkn9OlRqWv2xMHshysR9QPWclo_-q1cbF4y_9rbkpSI6ern-GgKIh_ED0Czk98M1fJ6tzLczbdptg";
    let build_query = AllUsers::build_query(all_users::Variables {
        token: token.to_string(),
    });
    let query = serde_json::json!(build_query);

    let mut req_opts = RequestInit::new();
    req_opts.method("POST");
    req_opts.body(Some(&JsValue::from_str(&query.to_string())));
    req_opts.mode(RequestMode::Cors); // 可以不写,默认为 Cors

    let gql_uri = "http://127.0.0.1:8000/graphql";
    let request = Request::new_with_str_and_init(gql_uri, &req_opts)?;

    let window = yew::utils::window();
    let resp_value =
        JsFuture::from(window.fetch_with_request(&request)).await?;
    let resp: Response = resp_value.dyn_into().unwrap();
    let resp_text = JsFuture::from(resp.text()?).await?;

    let users_str = resp_text.as_string().unwrap();
    let users_value: Value = serde_json::from_str(&users_str).unwrap();
    let users_vec =
        users_value["data"]["allUsers"].as_array().unwrap().to_owned();

    Ok(users_vec)
}

pub struct Users {
    list: Vec<Value>,
    link: ComponentLink<Self>,
}

pub enum Msg {
    UpdateList(Vec<Value>),
}

impl Component for Users {
    type Message = Msg;
    type Properties = ();

    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self { list: Vec::new(), link }
    }

    fn rendered(&mut self, first_render: bool) {
        let link = self.link.clone();
        if first_render {
            spawn_local(async move {
                let res = fetch_users().await;
                link.send_message(Msg::UpdateList(res.unwrap()))
            });
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::UpdateList(res) => {
                self.list = res;
                true
            }
        }
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        let users = self.list.iter().map(|user| {
            html! {
                <div>
                    <li>
                        <strong>
                            { &user["username"].as_str().unwrap() }
                            { " - length: " }
                            { &user["username"].as_str().unwrap().len() }
                        </strong>
                    </li>
                    <ul>
                        <li>{ &user["id"].as_str().unwrap() }</li>
                        <li>{ &user["email"].as_str().unwrap() }</li>
                    </ul>
                </div>
            }
        });

        html! {
            <>
                <h1>{ "all users" }</h1>
                <ul>
                    { for users }
                </ul>
            </>
        }
    }
}

pages/projects.rs

use graphql_client::GraphQLQuery;
use serde_json::Value;
use std::fmt::Debug;
use wasm_bindgen::{prelude::*, JsCast};
use wasm_bindgen_futures::{spawn_local, JsFuture};
use yew::web_sys::{Request, RequestInit, RequestMode, Response};
use yew::{html, Component, ComponentLink, Html, ShouldRender};

#[derive(Debug, Clone, PartialEq)]
pub struct FetchError {
    err: JsValue,
}

impl From<JsValue> for FetchError {
    fn from(value: JsValue) -> Self {
        Self { err: value }
    }
}

#[derive(GraphQLQuery)]
#[graphql(
    schema_path = "./graphql/schema.graphql",
    query_path = "./graphql/all_projects.graphql",
    response_derives = "Debug"
)]
struct AllProjects;
type ObjectId = String;

async fn fetch_projects() -> Result<Vec<Value>, FetchError> {
    let build_query = AllProjects::build_query(all_projects::Variables {});
    let query = serde_json::json!(build_query);

    let mut opts = RequestInit::new();
    opts.method("POST");
    opts.body(Some(&JsValue::from_str(&query.to_string())));
    opts.mode(RequestMode::Cors); // 可以不写,默认为 Cors

    let gql_uri = "http://127.0.0.1:8000/graphql";
    let request = Request::new_with_str_and_init(gql_uri, &opts)?;

    let window = yew::utils::window();
    let resp_value =
        JsFuture::from(window.fetch_with_request(&request)).await?;
    let resp: Response = resp_value.dyn_into().unwrap();
    let resp_text = JsFuture::from(resp.text()?).await?;

    let projects_str = resp_text.as_string().unwrap();
    let projects_value: Value = serde_json::from_str(&projects_str).unwrap();
    let projects_vec =
        projects_value["data"]["allProjects"].as_array().unwrap().to_owned();

    Ok(projects_vec)
}

pub struct Projects {
    list: Vec<Value>,
    link: ComponentLink<Self>,
}

pub enum Msg {
    UpdateList(Vec<Value>),
}

impl Component for Projects {
    type Message = Msg;
    type Properties = ();

    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self { list: Vec::new(), link }
    }

    fn rendered(&mut self, first_render: bool) {
        let link = self.link.clone();
        if first_render {
            spawn_local(async move {
                let res = fetch_projects().await;
                link.send_message(Msg::UpdateList(res.unwrap()))
            });
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::UpdateList(res) => {
                self.list = res;
                true
            }
        }
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        let projects = self.list.iter().map(|project| {
            html! {
                <div>
                    <li>
                        <strong>{ &project["subject"].as_str().unwrap() }</strong>
                    </li>
                    <ul>
                        <li>{ &project["userId"].as_str().unwrap() }</li>
                        <li>{ &project["id"].as_str().unwrap() }</li>
                        <li>
                            <a href={ project["website"].as_str().unwrap().to_owned() }>
                                { &project["website"].as_str().unwrap() }
                            </a>
                        </li>
                    </ul>
                </div>
            }
        });

        html! {
            <>
                <h1>{ "all projects" }</h1>
                <ul>
                    { for projects }
                </ul>
            </>
        }
    }
}

运行和测试

执行 trunk serve 命令,浏览器会自动打开一个页面,或者手动在浏览器中访问 http://127.0.0.1:3001。如果你未按照上篇 trunk.toml 所介绍的配置,请访问你自定义的端口(默认为 8080)。

此次 WebAssembly 实践成果,如下图片所示,你可以和第二篇文章《组件和路由》中设定实现目标做以对比。

yew 实现结果

结语

yew 开发 WebAssembly 前端的系列文章,本文即告以第一阶段。

如果你下载源码,也可以使用浏览器的性能基准测试功能,简单对模板引擎开发的 web 前端,和 yew 开发的 web 前端进行性能的粗略比较。

总体体验而言,笔者个人认为,yew 开发熟练以后,效率是较高的。同时,也可更加专注于业务。

后续的文章中,我们将进行更加深入的应用。

谢谢您的阅读!


Rust 生态与实践

Related Articles

  1. [Rust] Rust 官方周报 395 期(2021-06-16)
  2. [Rust] Rust 1.53.0 明日发布,关键新特性一瞥
  3. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(3)- rhai 脚本、静态/资源文件、环境变量等
  4. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(2)- 获取并解析 GraphQL 数据
  5. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(1)- crate 选择及环境搭建
  6. [Rust] Rust 官方周报 394 期(2021-06-09)
  7. [Rust] Rust web 前端库/框架评测,以及和 js 前端库/框架的比较
  8. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(4)- 获取 GraphQL 数据并解析
  9. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(3)- 资源文件及小重构
  10. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(2)- 组件和路由
  11. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(1)- 起步及 crate 选择
  12. [Rust] Rust 官方周报 393 期(2021-06-02)
  13. [Rust] Rust 官方周报 392 期(2021-05-26)
  14. [Rust] Rust 中,对网址进行异步快照,并添加水印效果的实践
  15. [Rust] Rust 官方周报 391 期(2021-05-19)
  16. [Rust] Rust,风雨六载,砥砺奋进
  17. [Rust] 为什么我们应当将 Rust 用于嵌入式开发?
  18. [Rust] Rust 官方周报 390 期(2021-05-12)
  19. [Rust] Rust + Android 的集成开发设计
  20. [Rust] Rust 1.52.1 已正式发布,及其新特性详述
  21. [Rust] 让我们用 Rust 重写那些伟大的软件吧
  22. [Rust] Rust 1.52.0 已正式发布,及其新特性详述
  23. [Rust] Rust 官方周报 389 期(2021-05-05)
  24. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(4) - 变更服务,以及小重构
  25. [Rust] Rust 1.52.0 稳定版预发布测试中,关键新特性一瞥
  26. [Rust] Rust 生态中,最不知名的贡献者和轶事
  27. [Rust] Rust 基金会迎来新的白金会员:Facebook
  28. [Rust] Rustup 1.24.1 已官宣发布,及其新特性详述
  29. [Rust] Rust 官方周报 388 期(2021-04-28)
  30. [Rust] Rust 官方周报 387 期(2021-04-21)
  31. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(4)- 变更服务,以及第二次重构
  32. [Rust] Rustup 1.24.0 已官宣发布,及其新特性详述
  33. [Rust] basedrop:Rust 生态中,适用于实时音频的垃圾收集器
  34. [Rust] Rust 编译器团队对成员 Aaron Hill 的祝贺
  35. [Rust] Jacob Hoffman-Andrews 加入 Rustdoc 团队
  36. [机器人] 为什么应将 Rust 引入机器人平台?以及机器人平台的 Rust 资源推荐
  37. [Rust] rust-lang.org、crates.io,以及 docs.rs 的管理,已由 Mozilla 转移到 Rust 基金会
  38. [Rust] Rust 官方周报 386 期(2021-04-14)
  39. [Rust] Rust 编译器(Compiler)团队 4 月份计划 - Rust Compiler April Steering Cycle
  40. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(3) - 重构
  41. [Rust] 头脑风暴进行中:Async Rust 的未来熠熠生辉
  42. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(2) - 查询服务
  43. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务 - 起步及 crate 选择
  44. [Rust] Rust 2021 版本特性预览,以及工作计划
  45. [Rust] Rust 用在生产环境的 42 家公司
  46. [Rust] 构建最精简的 Rust Docker 镜像
  47. [Rust] Rust 官方周报 385 期(2021-04-07)
  48. [Rust] 使用 Rust 做异步数据采集的实践
  49. [Rust] Android 支持 Rust 编程语言,以避免内存缺陷
  50. [Rust] Android 平台基础支持转向 Rust
  51. [Rust] Android 团队宣布 Android 开源项目(AOSP),已支持 Rust 语言来开发 Android 系统本身
  52. [Rust] RustyHermit——基于 Rust 实现的下一代容器 Unikernel
  53. [Rust] Rustic:完善的纯粹 Rust 技术栈实现的国际象棋引擎,多平台支持(甚至包括嵌入式设备树莓派 Raspberry Pi、Buster)
  54. [Rust] Rust 迭代器(Iterator trait )的要诀和技巧
  55. [Rust] 使用 Rust 极致提升 Python 性能:图表和绘图提升 24 倍,数据计算提升 10 倍
  56. [Rust] 【2021-04-03】Rust 核心团队人员变动
  57. [Rust] Rust web 框架现状【2021 年 1 季度】
  58. [Rust] Rust 官方周报 384 期(2021-03-31)
  59. [Rust] Rust 中的解析器组合因子(parser combinators)
  60. [生活] 毕马威(KPMG)调查报告:人工智能的实际采用,在新冠疫情(COVID-19)期间大幅提升
  61. [Python] HPy - 为 Python 扩展提供更优秀的 C API
  62. [Rust] 2021 年,学习 Rust 的网络资源推荐(2)
  63. [Rust] 2021 年,学习 Rust 的网络资源推荐
  64. [生活] 况属高风晚,山山黄叶飞——彭州葛仙山露营随笔
  65. [Rust] Rust 1.51.0 已正式发布,及其新特性详述
  66. [Rust] 为 Async Rust 构建共享的愿景文档—— Rust 社区的讲“故事”,可获奖
  67. [Rust] Rust 纪元第 382 周最佳 crate:ibig 的实践,以及和 num crate 的比较
  68. [Rust] Rust 1.51.0 稳定版本改进介绍
  69. [Rust] Rust 中将 markdown 渲染为 html
  70. [生活] 国民应用 App 的用户隐私数据窥探
  71. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(3)- 重构
  72. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(2)- 查询服务
  73. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(1)- 起步及 crate 选择
  74. [Rust] Rust 操控大疆可编程 tello 无人机

Topics

rust(73)

graphql(16)

rust-官方周报(12)

webassembly(9)

async-graphql(8)

rust-官方博客(8)

tide(7)

rust-web(7)

wasm(6)

this-week-in-rust(6)

yew(6)

mysql(5)

rbatis(5)

android(4)

actix-web(4)

mongodb(3)

json-web-token(3)

jwt(3)

cargo(3)

技术延伸(3)

trunk(3)

handlebars(3)

rhai(3)

用户隐私(2)

学习资料(2)

python(2)

ai(2)

人工智能(2)

postgresql(2)

rust-compiler(2)

rust-基金会(2)

rust-foundation(2)

rustup(2)

rust-toolchain(2)

rust-工具链(2)

rust-游戏开发(2)

rust-区块链(2)

graphql-client(2)

tello(1)

drone(1)

无人机(1)

隐私数据(1)

markdown(1)

html(1)

crate(1)

async(1)

异步(1)

旅游(1)

不忘生活(1)

葛仙山(1)

hpy(1)

python-扩展(1)

正则表达式(1)

解析器组合因子(1)

组合器(1)

regular-expression(1)

parser-combinator(1)

regex(1)

官方更新(1)

rust-工作招聘(1)

rust-技术资料(1)

rust-周最佳-crate(1)

rust-web-框架(1)

rust-web-framework(1)

rust-核心团队(1)

rust-core-team(1)

rust-language-team(1)

pyo3(1)

rust-python-集成(1)

python-性能改进(1)

迭代器(1)

iterator-trait(1)

国际象棋(1)

chess(1)

游戏引擎(1)

game-engine(1)

虚拟化(1)

unikernel(1)

rustyhermit(1)

linux(1)

virtualization(1)

sandboxing(1)

沙箱技术(1)

数据采集(1)

异步数据采集(1)

docker(1)

镜像(1)

生产环境(1)

rust-评价(1)

rust-2021-edition(1)

rust-2021-版本(1)

graphql-查询(1)

vision-doc(1)

愿景文档(1)

代码重构(1)

steering-cycle(1)

方向周期(1)

隐私声明(1)

机器人(1)

robotics(1)

rustdoc(1)

rust-编译器(1)

实时音频(1)

real-time-audio(1)

变更服务(1)

mutation(1)

查询服务(1)

query(1)

rust-贡献者(1)

rust-轶事(1)

rust-稳定版(1)

rust-预发布(1)

rust-测试(1)

安全编程(1)

可信计算(1)

安全代码(1)

secure-code(1)

rust-android-integrate(1)

rust-embedded(1)

rust-嵌入式(1)

rust-生产环境(1)

rust-2021(1)

rust-production(1)

网页快照(1)

网页截图(1)

水印效果(1)

图片水印(1)

rust-wasm(1)

yew-router(1)

css(1)

web-前端(1)

wasm-bindgen(1)

区块链(1)

blockchain(1)

surf(1)

dotenv(1)

标识符(1)

rust-1.53.0(1)

Elsewhere

- Open Source
  1. github/zzy
  2. github/sansx
- Awesome Blog
  1. Sansx's Studio
  2. 曙光磁铁的博客
- Learning & Studying
  1. Rust 学习资料 - 芽之家