[Day21] 用 WASM 做一个凯萨密码 加密 / 解密 网站

那今天就把昨天的东西讲完吧
然後我觉得标题好难定
POPcat 这麽赞的内容竟然没人看
QQ

那这边先放一下凯萨密码解密的 Code 昨天应该都有大概思考过了

pub fn encrypt(content: String, offset: i32) -> String {
    let mut result = String::new();

    for c in content.chars() {
        if c.is_lowercase() {
            let i = c as i32 + offset;
            if i > 122 {
                let i = 96 + i - 122;
                result.push(i as u8 as char);
            } else if i < 97 {
                let i = 96 + 97 - i;
                result.push(i as u8 as char);
            } else {
                result.push(i as u8 as char);
            }
        } else if c.is_uppercase() {
            let i = c as i32 + offset;
            if i > 90 {
                let i = 64 + i - 90;
                result.push(i as u8 as char);
            } else if i < 65 {
                let i = 64 + 65 - i;
                result.push(i as u8 as char);
            } else {
                result.push(i as u8 as char);
            }
        }
    }

    result
}

那结合昨天所讲的整体要怎麽做
就先有一个 enum

enum Msg {
    Str(String),
    Num(i32),
    Decrypt,
    Encrypt,
}

可以看到说 Str 跟 Num 都是有赋值的
Str 是他要解密的内容
Num 则是他的 Offset 也就是凯萨密码中的移动位置
那下面 Model 的部份则是定义了 他输入的 str 还有 offset 跟 output

struct Model {
    link: ComponentLink<Self>,
    output: String,
    str: String,
    num: i32,
}

上面的 Link 我不知道有没有讲过
总之就是一个连结器 主要用来 callback 列举体
好OK 那个就进到我们 impl 的部份
create 这边就略过了 毕竟大概都讲过了
下面的 update 的部份

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    match msg {
        Msg::Decrypt => {
            console::log!("aaa");
            self.output = caesar::decrypt(self.str.clone(), self.num.clone());
            true
        }
        Msg::Encrypt => {
            self.output = caesar::encrypt(self.str.clone(), self.num.clone());
            true
        }
        Msg::Str(str) => {
            self.str = str.clone();
            true
        }
        Msg::Num(num) => {
            self.num = num;
            true
        }
    }
}

那这边可以看到说
Decrypt 就是传入我们昨天写出来的函数
当然 他会回传你所要的内容
这边也要记得注意所有权
至少我是都会用 clone 来让他复制出一个一样的来避免拉
至於最後的部份就使用之前讲的 oninput 来让来作为值的更新

<input
type="text"
oninput=self.link.callback(|e: InputData|Msg::Str(e.value))
/>

这样的话传入的刚好就是我们要的 String 类型 所以不用转型

<input
type="number"
oninput=self.link.callback(|e: InputData|Msg::Num(e.value.parse::<i32>().unwrap()))
/>

至於 number 的部份就必须要注意一下了 因为传入的会是字串 所以使用 Day19 讲的技巧将其转型。
最後就是建立按纽跟输出
这边不多赘述

<button onclick=self.link.callback(|_| Msg::Decrypt)>{ "Decrypt" }</button>
<button onclick=self.link.callback(|_| Msg::Encrypt)>{ "Encrypt" }</button>
<p>{ &self.output } </p>

那这是我们最後能拿到的结果

後面还能做一些加强

• 增加 CSS
• 增加更多加密演算法

但是这些就留给读者自己练习吧
明天可能会讲 SQLx 的部份 可以期待一下owob