首页 >web前端 >js教程 >Rust WebAssembly 中的货币转换器

Rust WebAssembly 中的货币转换器

DDD原创: 2024-12-05 06:01:12194浏览

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 文件，并在其中写入以下代码：

<html lang="zh-cn">
<头>
  
  
  <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中文网其他相关文章！

Python JavaScript rust html for Error using pointer JS this display margin padding border viewport background transition flex input windows http https wasm Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Do I Properly Include a Hyphen in a Regex Character Set?下一篇：How Can I Reliably Check if a JavaScript Value is an Object and Not Null, an Array, or a Function?

查看更多