魔改出一个 Encoder | Rust 学习笔记（一）

新年新目标

打算在 2021 年学习一门新的编程语言，Rust 是一个很好的标的，一方面它及其具备实用性；另一个方面它也能让我们在更高的层面上理解计算机。

本系列将是我从Rust小学生开始的Rust学习过程全记录。

话不多说，我们开整。

由于是一门新的语言（相对 Java），所以传统的到网上去找一本好的入门教材的方法失效了。

那我们就来康康 Rust 能做什么有趣的事情，有什么有趣的Repo。

Substrate（Polkadot公链）、Libra（Facebook链）、WeDPR（FISCO BCOS 隐私保护组件）都是用 Rust 写的，不过评估一下，这些 Repo 的难度太高了，不适合用来作为语言入门。

后来发现 Rust 在 WebAssembly 方面目前进展很不错：

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

简而言之

对于网络平台而言，WebAssembly具有巨大的意义——它提供了一条途径，以使得以各种语言编写的代码都可以以接近原生的速度在Web中运行。在这种情况下，以前无法以此方式运行的客户端软件都将可以运行在Web中。

所以，Rust 的学习路线就这么定下来了，从wasm开始！

检索实例

既然确定了目标，那么可以开始检索相应的实例。这个实例有两个条件：

•光有文章是不行的，必须配套相应的的源码•这个源码必须足够简洁，适合用来入门

经过一番检索，最后找到了这个：

项目代码：

https://github.com/RodionChachura/rust-js-snake-game/

运行地址：

https://rodionchachura.github.io/rust-js-snake-game/

教程地址：

https://geekrodion.com/blog/rustsnake

git clone 下来，运行了试试，的确可以。

但感觉不是我想要的，因为前端代码的内容太多了。

然后打开官方教程：

https://developer.mozilla.org/zh-CN/docs/WebAssembly/Rust_to_wasm

看到：

Rust 和 WebAssembly 有两大主要用例：

•构建完整应用 —— 整个 Web 应用都基于 Rust 开发！•构建应用的组成部分 —— 在现存的 JavaScript 前端中使用 Rust。

目前，Rust 团队正专注于第二种用例，因此我们也将着重介绍它。对于第一种用例，可以参阅 yew 这类项目。

Yep，感觉我需要的是yew！

Yew 的探索之旅

首先找到 yew的官网：

Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.

https://github.com/yewstack/yew

找到它官方的例子：

https://yew.rs/docs/zh-CN/getting-started/build-a-sample-app

结果，运行报错……

cargo-web is not compatible with web-sys.

遇到问题，第一时间，当然是到官方Repo里去检索啦，然后就搜到这么一条 Issue：

https://github.com/yewstack/yew/issues/1081

建议使用 trunk，妥~

Trunk 的探索之旅

跳转到 Trunk Repo：

https://github.com/thedodd/trunk

发现里面有examples，于是直接 clone 下来运行：

执行没问题，很好！

但是只有一个简单的实例，没法基于这个进行学习，怎么办？

我们回到 yew 的 Repo 里面，看下有没啥实例。

https://github.com/yewstack/yew/tree/master/examples

Examples 很多，也都能跑通，赞：

魔改出 Base64 Encoder！

在之前的编程课程里面，有一个编程要义我会经常提及：

在入门一个新的计算机技术的时候，千万不要一开始就从0到1！因为从0到1的难度对新手来说太高。最开始应该先去魔改一个已有的项目。

我选择的是todomvc，原始是长这样：

目的是把它修改成一个 Base64-Encoder：

Ok，那我们来看看原始代码：

......
    fn view(&self) -> Html {
        let hidden_class = if self.state.entries.is_empty() {
            "hidden"
        } else {
            ""
        };
        html! {
            <div class="todomvc-wrapper">
                <section class="todoapp">
                    <header class="header">
                        <h1>{ "todos" }</h1>
                        { self.view_input() }
                    </header>
                    <section class=classes!("main", hidden_class)>
                        <input
                            type="checkbox"
                            class="toggle-all"
                            id="toggle-all"
                            checked=self.state.is_all_completed()
                            onclick=self.link.callback(|_| Msg::ToggleAll)
                        />
                        <label for="toggle-all" />
                        <ul class="todo-list">
                            { for self.state.entries.iter().filter(|e| self.state.filter.fits(e)).enumerate().map(|e| self.view_entry(e)) }
                        </ul>
                    </section>
                    <footer class=classes!("footer", hidden_class)>
                        <span class="todo-count">
                            <strong>{ self.state.total() }</strong>
                            { " item(s) left" }
                        </span>
                        <ul class="filters">
                            { for Filter::iter().map(|flt| self.view_filter(flt)) }
                        </ul>
                        <button class="clear-completed" onclick=self.link.callback(|_| Msg::ClearCompleted)>
                            { format!("Clear completed ({})", self.state.total_completed()) }
                        </button>
                    </footer>
                </section>
                <footer class="info">
                    <p>{ "Double-click to edit a todo" }</p>
                    <p>{ "Written by " }<a href="https://github.com/DenisKolodin/" target="_blank">{ "Denis Kolodin" }</a></p>
                    <p>{ "Part of " }<a href="http://todomvc.com/" target="_blank">{ "TodoMVC" }</a></p>
                </footer>
            </div>
        }
    }
}
......

挺好，这个就是前端部分了，我们把它删减一下：

    fn view(&self) -> Html {
        let hidden_class = if self.state.entries.is_empty() {
            "hidden"
        } else {
            ""
        };
        html! {
            <div class="todomvc-wrapper">
                <h1>{ "encode/decode" }</h1>
                { self.view_input() }
                <section class=classes!("main", hidden_class)>
                    <ul class="todo-list">
{ for self.state.entries.iter().filter(|e| self.state.filter.fits(e)).enumerate().map(|e| self.view_entry(e)) }
                    </ul>
                </section>
            </div>
        }
    }

我们可以看到，输入的逻辑在view_input()这个地方，于是我们找到那个函数：

fn view_input(&self) -> Html {
        html! {
            // You can use standard Rust comments. One line:
            // <li></li>
            <input
                class="new-todo"
                      // 改掉replaceholder
                placeholder="What needs to be encode/decode?"
                value=&self.state.value
                oninput=self.link.callback(|e: InputData| Msg::Update(e.value))
                onkeypress=self.link.batch_callback(|e: KeyboardEvent| {
                    if e.key() == "Enter" { Some(Msg::Add) } else { None }
                })
            />
            /* Or multiline:
            <ul>
                <li></li>
            </ul>
            */
        }
    }

再找到Msg::Add：

fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::Add => {
                //info!("add things");
                let description = self.state.value.trim();
                let description_handled = format!("{}: {}", description, encode(description.to_string()));

                if !description.is_empty() {
                    let entry = Entry {
                        description: description_handled,
                        completed: false,
                        editing: false,
                    };
                    //info!("{}", entry.description);
                    self.state.entries.push(entry);
                }
                self.state.value = "".to_string();
            }
......

这个时候，我想先调试一下，因此需要把一些数据打印出来。

这个时候，首先想到的是print大法：

println!("Input: {}", val);

但是，在trunk serve命令中，println!这个函数失效了！

在trunk和yew的 Repo 中进行检索，均未找到解决方案。

但是随即发现yew有 Discord Chatroom，于是乎进去搜索聊天记录。

Yummy，这里提到只要使用wasm-logger即可。

https://crates.io/crates/wasm-logger

在项目里添加wasm-logger：

......
// in the first of main.rs
#[macro_use] extern crate log;
......
fn main() {
        // init wasm logger!
    wasm_logger::init(wasm_logger::Config::default());
    yew::start_app::<Model>();
}

调用试试看：

fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::Add => {
                info!("add things");
......

妥了！

接下来找到Rust Base64 的库，调用之（修改的地方用new标出了）：

......
use base64::{encode, decode};
......
fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::Add => {
                // new
                info!("add things");
                let description = self.state.value.trim();
                // new
                let description_handled = format!("{}: {}", description, encode(description.to_string()));

                if !description.is_empty() {
                    let entry = Entry {
                          // new
                        description: description_handled,
                        completed: false,
                        editing: false,
                    };
                      // new
                    info!("{}", entry.description);
                    self.state.entries.push(entry);
                }
                self.state.value = "".to_string()
            }

运行之。

Okay，Base64-Encoder 就做好了！

效果：

Day1 的 Rust学习就到这里了。

对了，Cargo.toml最后长这样：

[package]
name = "encoder"
version = "0.1.0"
authors = ["Denis Kolodin <[e-mail]>"]
edition = "2018"

[dependencies]
strum = "0.20"
strum_macros = "0.20"
serde = "1"
serde_derive = "1"
yew = { path = "./packages/yew" }
yew-services = { path = "./packages/yew-services" }

log = "0.4.6"
wasm-logger = "0.2.0"
base64 = "0.13.0"

---

后台输入关键字有自动回复：

输入「 比特币」，推送比特币技术入门教程；

输入「 联盟链 」，推送联盟链开发系列教程；

输入「 项目 」，看看大狗最近在玩什么。