Penukar mata wang dalam Rust WebAssembly-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Penukar mata wang dalam Rust WebAssembly

DDD

Dec 05, 2024 am 06:01 AM

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

Atas ialah kandungan terperinci Penukar mata wang dalam Rust WebAssembly. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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