cari

Rumah >hujung hadapan web >tutorial js >Penukar mata wang dalam Rust WebAssembly

Penukar mata wang dalam Rust WebAssembly

DDD
DDDasal
2024-12-05 06:01:12194semak imbas

Currency converter in Rust WebAssembly

Hai semua orang dalam siaran ini saya akan menunjukkan kepada anda cara membuat penukar mata wang mudah yang ditulis dalam Rust dengan WebAssembly, mula-mula anda perlu memasang Rust menggunakan laman web rasmi Rust di bawah untuk tingkap :

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

Selepas anda memasang Rust berjaya, kami perlu memastikan kami memasang WASM atau WebAssembly menggunakan arahan di bawah dengan membuka Windows Powershell dan jalankannya sebagai pentadbir:

pek wasm pasang kargo

Kargo ialah sistem binaan dan pengurus pakej untuk Rust.

Kami memasang pek Wasm atau WebAssembly untuk menjalankan Rust on Web view dan menjalankan kod HTML jadi selepas berjaya memasang WebAssembly dalam Windows Powershell pilih laluan yang anda mahu buat fail untuk Rust dan kemudian taip arahan di bawah untuk mencipta folder dan fail yang diperlukan:

kargo baharu **nama folder pilihan anda di sini** --lib
ini akan mencipta nama folder dan fail yang diperlukan untuk Rust dijalankan dengan WebAssembly.

Kemudian kita perlu mengubah suai fail Cargo.toml yang terletak dalam folder anda yang anda buat dengan arahan di atas, klik kanan dan edit Saya menggunakan notepad (untuk memuat turun notepad gunakan pautan ini (https://notepad-plus-plus.org /) jadi anda akan mendapat pilihan untuk mengedit fail terus.

dalam fail Cargo.toml tulis ini di dalamnya:

[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"]

Kemudian di dalam folder src yang terletak di dalam folder utama anda yang mula-mula dibuat dengan arahan Cargo, anda akan menemui fail lain yang kami perlukan untuk mengeditnya dipanggil lib.rs dalam fail ini kami akan menulis kod 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)))
    }
}

Kemudian kita akan sampai ke bahagian di mana kita perlu mencipta folder dan fail yang diperlukan untuk paparan web.
Buka Powershell kemudian navigasi ke laluan folder anda pastikan anda berada di dalam folder utama yang anda buat dengan arahan baharu Cargo kemudian jalankan arahan ini:

pembinaan wasm-pack --sasarkan web

Ini akan mencipta folder bernama pkg dan sasaran serta fail lain.

Kemudian pada folder utama anda yang anda buat dengan nama folder baharu kargo di sini --lib buat fail HTML bernama index.html di dalamnya tulis kod ini:

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Penukar Mata Wang</title>
  <gaya>
    badan {
      font-family: Arial, sans-serif;
      warna latar belakang: #f0f8ff;
      margin: 0;
      padding: 0;
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      ketinggian: 100vh;
    }

    .bekas {
      latar belakang: #ffffff;
      bayang-kotak: 0 4px 6px rgba(0, 0, 0, 0.1);
      jejari sempadan: 10px;
      padding: 20px 30px;
      lebar: 350px;
      text-align: tengah;
    }

    h1 {
      warna: #333;
      jidar bawah: 20px;
    }

    label {
      paparan: blok;
      jidar: 10px 0 5px;
      font-weight: tebal;
      warna: #555;
    }

    input {
      lebar: 100%;
      padding: 10px;
      jidar bawah: 15px;
      sempadan: 1px pepejal #ccc;
      jejari sempadan: 5px;
      saiz fon: 16px;
    }

    butang {
      lebar: 100%;
      padding: 10px;
      warna latar belakang: #007bff;
      sempadan: tiada;
      jejari sempadan: 5px;
      warna: putih;
      saiz fon: 16px;
      kursor: penunjuk;
      peralihan: warna latar belakang 0.3s;
    }

    butang:tuding {
      warna latar belakang: #0056b3;
    }

    .hasil {
      jidar atas: 20px;
      saiz fon: 18px;
      warna: hijau;
      font-weight: tebal;
    }

    .error {
      jidar atas: 20px;
      saiz fon: 16px;
      warna: merah;
    }
  </style>
</head>
<badan>
  <div>



<p>Pastikan bahawa baris ini mengimport init, { convert_currency } daripada "../pkg/**nama folder anda.js**"; fail javascript ditemui dalam folder pkg pastikan ia menunjuk ke fail .js yang betul biasanya ia dinamakan selepas nama folder utama anda berakhir dengan .js ditemui di dalam folder pkg.</p>

<p>Untuk menjalankan pelayan anda pada mesin tempatan, navigasi ke folder utama anda yang kami buat dengan kargo baharu **nama folder di sini** --lib dan jalankan arahan ini untuk memulakan pelayan pada mesin anda:<br>
python -m http.server<br><br>
untuk memasang python rujuk <br>
(https://www.python.org/downloads/windows/)</p>

<p>selepas menjalankan arahan, buka pelayar web pilihan anda dan taip localhost:8000 atau 127.0.0.1:8000 dan masukkan.</p>

<p>Anda perlu memasukkan kod mata wang untuk itu semak tapak web ini:<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>Semoga anda menikmatinya dan mohon maaf atas catatan yang panjang.</p>

Atas ialah kandungan terperinci Penukar mata wang dalam Rust WebAssembly. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China 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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Memasukkan Tanda Sempang dengan Betul dalam Set Aksara Regex?Artikel seterusnya：Bagaimanakah Saya Memasukkan Tanda Sempang dengan Betul dalam Set Aksara Regex?

Artikel berkaitan

Lihat lagi