那今天就把昨天的東西講完吧
然後我覺得標題好難定
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