suchen

Heim >Web-Frontend >js-Tutorial >Währungsrechner in Rust WebAssembly

Währungsrechner in Rust WebAssembly

DDD
DDDOriginal
2024-12-05 06:01:12190Durchsuche

Currency converter in Rust WebAssembly

Hallo zusammen, in diesem Beitrag werde ich euch zeigen, wie man mit WebAssembly einen einfachen, in Rust geschriebenen Währungsumrechner erstellt. Zuerst muss man Rust über die unten stehende offizielle Rust-Website für Windows installieren :

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

Nachdem Sie Rust erfolgreich installiert haben, müssen wir sicherstellen, dass wir WASM oder WebAssembly mit dem folgenden Befehl installieren, indem wir Windows Powershell öffnen und es als Administrator ausführen:

Cargo Install Wasm-Pack

Cargo ist ein Build-System und Paketmanager für Rust.

Wir installieren Wasm Pack oder WebAssembly, um Rust in der Webansicht auszuführen und HTML-Code auszuführen. Wählen Sie also nach der erfolgreichen Installation von WebAssembly in Windows Powershell den Pfad aus, in dem Sie Dateien für Rust erstellen möchten, und geben Sie dann den folgenden Befehl ein, um den Ordner und die erforderlichen Dateien zu erstellen:

Laden Sie hier einen neuen **Ordnernamen Ihrer Wahl** --lib
Dadurch werden der Ordnername und die Dateien erstellt, die für die Ausführung von Rust mit WebAssembly erforderlich sind.

Dann müssen wir die Datei Cargo.toml ändern, die sich in Ihrem Ordner befindet, den Sie mit dem obigen Befehl erstellt haben. Klicken Sie mit der rechten Maustaste und bearbeiten Sie sie. Ich verwende Notepad (um Notepad herunterzuladen, verwenden Sie diesen Link (https://notepad-plus-plus.org). /), damit Sie die Möglichkeit haben, die Datei direkt zu bearbeiten.

Schreiben Sie Folgendes in die Datei 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"]

Dann finden Sie im src-Ordner in Ihrem Hauptordner, der zuerst mit dem Cargo-Befehl erstellt wurde, eine weitere Datei, die wir bearbeiten müssen. Sie heißt lib.rs. In diese Datei schreiben wir Rust-Code:

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)))
    }
}

Dann kommen wir zu dem Teil, in dem wir Ordner und Dateien erstellen müssen, die für die Webansicht benötigt werden.
Öffnen Sie Powershell und navigieren Sie dann zu Ihrem Ordnerpfad. Stellen Sie sicher, dass Sie sich im Hauptordner befinden, den Sie mit dem neuen Befehl „Cargo“ erstellt haben, und führen Sie dann diesen Befehl aus:

wasm-pack build --target web

Dadurch werden Ordner mit den Namen pkg und target sowie andere Dateien erstellt.

Dann erstellen Sie in Ihrem Hauptordner, den Sie mit dem neuen Ordnernamen „cargo“ erstellt haben, hier eine HTML-Datei mit dem Namen index.html und schreiben darin diesen Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Währungsumrechner</title>
  <Stil>
    Körper {
      Schriftfamilie: Arial, serifenlos;
      Hintergrundfarbe: #f0f8ff;
      Rand: 0;
      Polsterung: 0;
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Höhe: 100 Vh;
    }

    .container {
      Hintergrund: #ffffff;
      Box-Shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      Randradius: 10px;
      Polsterung: 20px 30px;
      Breite: 350px;
      Textausrichtung: Mitte;
    }

    h1 {
      Farbe: #333;
      Rand unten: 20px;
    }

    Etikett {
      Anzeige: Block;
      Rand: 10px 0 5px;
      Schriftstärke: fett;
      Farbe: #555;
    }

    Eingabe {
      Breite: 100 %;
      Polsterung: 10px;
      Rand unten: 15px;
      Rand: 1px fest #ccc;
      Randradius: 5px;
      Schriftgröße: 16px;
    }

    Taste {
      Breite: 100 %;
      Polsterung: 10px;
      Hintergrundfarbe: #007bff;
      Grenze: keine;
      Randradius: 5px;
      Farbe: weiß;
      Schriftgröße: 16px;
      Cursor: Zeiger;
      Übergang: Hintergrundfarbe 0,3 s;
    }

    button:hover {
      Hintergrundfarbe: #0056b3;
    }

    .Ergebnis {
      Rand oben: 20px;
      Schriftgröße: 18px;
      Farbe: grün;
      Schriftstärke: fett;
    }

    .Fehler {
      Rand oben: 20px;
      Schriftgröße: 16px;
      Farbe: rot;
    }
  </style>
</head>
<Körper>
  <div>



<p>Stellen Sie sicher, dass diese Zeile import init, { convert_currency } from „../pkg/**name of your Folder.js**“; Javascript-Datei im pkg-Ordner gefunden. Stellen Sie sicher, dass sie auf die richtige .js-Datei verweist. Normalerweise ist sie nach dem Namen Ihres Hauptordners benannt, der auf .js endet und sich im pkg-Ordner befindet.</p>

<p>Um Ihren Server auf einem lokalen Computer auszuführen, navigieren Sie zu Ihrem Hauptordner, den wir mit „cargo new **folder name here** --lib“ erstellt haben, und führen Sie diesen Befehl aus, um den Server auf Ihrem Computer zu starten:<br>
python -m http.server<br><br>
Informationen zur Installation von Python finden Sie unter <br>
(https://www.python.org/downloads/windows/)</p>

<p>Nachdem Sie den Befehl ausgeführt haben, öffnen Sie den Webbrowser Ihrer Wahl und geben Sie „localhost:8000“ oder 127.0.0.1:8000 ein und drücken Sie die Eingabetaste.</p>

<p>Dazu müssen Sie Währungscodes eingeben. Überprüfen Sie diese Website:<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>Ich hoffe, es gefällt euch und entschuldigt den langen Beitrag.</p>

Das obige ist der detaillierte Inhalt vonWährungsrechner in Rust WebAssembly. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Python JavaScript rust html for Error using pointer JS this display margin padding border viewport background transition flex input windows http https wasm Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie füge ich einen Bindestrich ordnungsgemäß in einen Regex-Zeichensatz ein?Nächster Artikel：Wie füge ich einen Bindestrich ordnungsgemäß in einen Regex-Zeichensatz ein?

In Verbindung stehende Artikel

Mehr sehen