Rust WebAssembly 中的貨幣轉換器-js教程-PHP中文網

Rust WebAssembly 中的貨幣轉換器

DDD

發布： 2024-12-05 06:01:12

原創

189 人瀏覽過

Currency converter in Rust WebAssembly

大家好，在這篇文章中我將向您展示如何使用WebAssembly 創建一個用Rust 編寫的簡單貨幣轉換器，首先您需要使用下面的Rust 官方網站安裝Rust （適用於Windows） :

(https://www.rust-lang.org/tools/install)

成功安裝 Rust 後，我們需要確保使用下面的命令安裝 WASM 或 WebAssembly，打開 Windows Powershell 並以管理員身份運行它：

貨件安裝 wasm-pack

Cargo 是 Rust 的建置系統和套件管理器。

我們安裝Wasm pack 或WebAssembly 以在Web 視圖上執行Rust 並執行HTML 程式碼，因此在Windows Powershell 中成功安裝WebAssembly 後，選擇要為Rust 建立檔案的路徑，然後鍵入下列命令以建立所需的檔案夾和文件：

cargo new **您在此處選擇的資料夾名稱** --lib
這將建立 Rust 與 WebAssembly 一起運行所需的資料夾名稱和檔案。

然後我們需要修改位於您使用上述命令創建的文件夾中的Cargo.toml 文件，右鍵單擊並編輯我使用記事本（要下載記事本，請使用此鏈接(https://notepad-plus -plus.org /) 這樣你就可以選擇直接編輯文件。

在 Cargo.toml 檔案中寫入以下內容：

[dependencies]
reqwest = { version = "=0.11.7", features = ["json"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"

[dev-dependencies]
wasm-bindgen-test = "0.3"

[lib]
crate-type = ["cdylib"]

登入後複製

然後在最初使用Cargo 命令創建的主資料夾內的src 資料夾中，您會發現另一個我們需要編輯的文件，名為lib.rs，在該文件中我們將編寫Rust 程式碼：

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use reqwest::Error;
use serde::Deserialize;
use std::collections::HashMap;

#[derive(Deserialize)]
struct ExchangeRates {
    rates: HashMap<String, f64>,
}

#[wasm_bindgen]
pub async fn convert_currency(base: String, target: String, amount: f64) -> Result<JsValue, JsValue> {
    let url = format!("https://api.exchangerate-api.com/v4/latest/{}", base);

    let response = reqwest::get(&url)
        .await
        .map_err(|err| JsValue::from_str(&format!("Failed to fetch rates: {}", err)))?;

    let rates: ExchangeRates = response.json()
        .await
        .map_err(|err| JsValue::from_str(&format!("Invalid response format: {}", err)))?;

    if let Some(&rate) = rates.rates.get(&target) {
        let converted = amount * rate;
        Ok(JsValue::from_f64(converted)) // Return the converted amount
    } else {
        Err(JsValue::from_str(&format!("Currency {} not found", target)))
    }
}

登入後複製

然後我們將進入需要建立網頁檢視所需的資料夾和檔案的部分。

開啟 Powershell，然後導航到您的資料夾路徑，確保您位於使用 Cargo new 命令建立的主資料夾內，然後執行此命令：

wasm-pack build --target web

這將建立名為 pkg 和 target 的資料夾以及其他檔案。

然後在您使用 Cargo 新資料夾名稱 --lib 建立的主資料夾中建立名為 index.html 的 HTML 文件，並在其中寫入以下程式碼：



  
  
  <title>貨幣轉換器</title>
  
    身體 {
      字體系列：Arial、無襯線字體；
      背景顏色：#f0f8ff；
      保證金：0；
      填充：0；
      顯示：柔性；
      調整內容：居中；
      對齊項目：居中；
      高度：100vh；
    }

    。容器 {
      背景：#ffffff；
      盒子陰影：0 4px 6px rgba(0, 0, 0, 0.1);
      邊框半徑：10px；
      內邊距：20px 30px；
      寬度：350px；
      文字對齊：居中；
    }

    h1 {
      顏色：#333；
      下邊距：20px；
    }

    標籤 {
      顯示：塊；
      邊距：10px 0 5px；
      字體粗細：粗體；
      顏色：#555；
    }

    輸入 {
      寬度：100%；
      內邊距：10px；
      下邊距：15px；
      邊框：1px實心#ccc；
      邊框半徑：5px；
      字體大小：16px；
    }

    按鈕 {
      寬度：100%；
      內邊距：10px；
      背景顏色：#007bff；
      邊框：無；
      邊框半徑：5px；
      顏色: 白色;
      字體大小：16px；
      遊標：指針；
      過渡：背景色0.3s；
    }

    按鈕：懸停{
      背景顏色：#0056b3；
    }

    。結果 {
      上邊距：20px；
      字體大小：18px；
      顏色：綠色；
      字體粗細：粗體；
    }

    。錯誤 {
      上邊距：20px；
      字體大小：16px；
      顏色: 紅色;
    }
  風格>
頭>

  <div>



<p>確保此行import init, { Convert_currency } from "../pkg/**name of yourfolder.js**";在pkg 資料夾中找到的javascript 文件，確保它指向正確的.js 文件，通常它是根據您的主資料夾名稱以pkg 資料夾中的.js 結尾命名的。 </p>

<p>要在本機電腦上執行伺服器，請導航至我們使用 Cargo new **資料夾名稱** --lib 建立的主資料夾，並執行此命令以在您的電腦上啟動伺服器：<br>
python -m http.server<br><br>
安裝python請參考<br>
(https://www.python.org/downloads/windows/)</p>

<p>執行指令後，開啟您選擇的 Web 瀏覽器並輸入 localhost:8000 或 127.0.0.1:8000，然後回車。 </p>

<p>您需要輸入貨幣代碼才能檢查此網站：<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>希望您喜歡它，並對這麼長的帖子表示歉意。 </p>


          </div>

登入後複製

以上是Rust WebAssembly 中的貨幣轉換器的詳細內容。更多資訊請關注PHP中文網其他相關文章！