Rust WebAssembly의 환율 변환기-JS 튜토리얼-php.cn

Rust WebAssembly의 환율 변환기

DDD

풀어 주다： 2024-12-05 06:01:12

원래의

189명이 탐색했습니다.

Currency converter in Rust WebAssembly

안녕하세요 여러분 이번 게시물에서는 WebAssembly를 사용하여 Rust로 작성된 간단한 통화 변환기를 만드는 방법을 보여 드리겠습니다. 먼저 Windows용 아래 Rust 공식 웹사이트를 사용하여 Rust를 설치해야 합니다. :

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

Rust를 성공적으로 설치한 후에는 Windows Powershell을 열고 관리자 권한으로 실행하여 아래 명령을 사용하여 WASM 또는 WebAssembly를 설치해야 합니다.

화물 설치 wasm-pack

Cargo는 Rust용 빌드 시스템 및 패키지 관리자입니다.

Wasm 팩 또는 WebAssembly를 설치하여 웹 보기에서 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 및 기타 파일이 생성됩니다.

그런 다음 여기에서 화물 새 폴더 이름으로 생성한 기본 폴더에 index.html이라는 HTML 파일을 생성하고 다음 코드를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>통화 변환기</title>
  <스타일>
    몸 {
      글꼴 모음: Arial, sans-serif;
      배경색: #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.3초;
    }

    버튼:호버 {
      배경색: #0056b3;
    }

    .결과 {
      여백 상단: 20px;
      글꼴 크기: 18px;
      색상: 녹색;
      글꼴 두께: 굵게;
    }

    .오류 {
      여백 상단: 20px;
      글꼴 크기: 16px;
      색상: 빨간색;
    }
  </스타일>
</머리>
<본문>
  <div>



<p>이 줄은 "../pkg/**폴더 이름.js**"에서 init, { Convert_currency }를 가져오는지 확인하세요. pkg 폴더에 있는 javascript 파일이 올바른 .js 파일을 가리키는지 확인하세요. 일반적으로 기본 폴더 이름이 pkg 폴더에 있는 .js로 끝나는 이름을 따서 명명됩니다.</p>

<p>로컬 시스템에서 서버를 실행하려면 우리가 새로운 **폴더 이름 여기에** --lib를 사용하여 생성한 기본 폴더로 이동하고 다음 명령을 실행하여 시스템에서 서버를 시작하세요.<br>
python -m http.server<br><br>
Python을 설치하려면 <br>을 참조하세요.
(https://www.python.org/downloads/windows/)</p>

<p>명령을 실행한 후 원하는 웹 브라우저를 열고 localhost:8000 또는 127.0.0.1:8000을 입력하고 Enter를 누르세요.</p>

<p>이 웹사이트를 확인하려면 통화 코드를 입력해야 합니다.<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>즐거운 시간 되시기 바라며, 글이 길어 죄송합니다.</p>

로그인 후 복사

위 내용은 Rust WebAssembly의 환율 변환기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!