首頁 web前端 js教程 Rust WebAssembly 中的貨幣轉換器

Rust WebAssembly 中的貨幣轉換器

Dec 05, 2024 am 06:01 AM

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;
      顏色: 紅色;
    }
  風格&gt;
頭&gt;

  <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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

示例顏色json文件 示例顏色json文件 Mar 03, 2025 am 12:35 AM

示例顏色json文件

8令人驚嘆的jQuery頁面佈局插件 8令人驚嘆的jQuery頁面佈局插件 Mar 06, 2025 am 12:48 AM

8令人驚嘆的jQuery頁面佈局插件

10個jQuery語法熒光筆 10個jQuery語法熒光筆 Mar 02, 2025 am 12:32 AM

10個jQuery語法熒光筆

構建您自己的Ajax Web應用程序 構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

什麼是這個&#x27;在JavaScript? 什麼是這個&#x27;在JavaScript? Mar 04, 2025 am 01:15 AM

什麼是這個&#x27;在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles