Front end created
parent
c439bf61da
commit
a11642e0e8
|
@ -4,3 +4,10 @@ version = "0.1.0"
|
||||||
edition = "2021"
|
edition = "2021"
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
|
console_error_panic_hook = "0.1.7"
|
||||||
|
gloo-net = "0.6.0"
|
||||||
|
log = "0.4.22"
|
||||||
|
wasm-bindgen-futures = "0.4.42"
|
||||||
|
wasm-logger = "0.2.0"
|
||||||
|
yew = { version = "0.21.0", features = ["csr"] }
|
||||||
|
yew-router = "0.18.0"
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
[build]
|
||||||
|
target = "index.html"
|
||||||
|
dist = "../dist"
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
|
||||||
|
<title>Yew App</title>
|
||||||
|
</head>
|
||||||
|
<body>loading...</body>
|
||||||
|
</html>
|
|
@ -1,3 +1,86 @@
|
||||||
fn main() {
|
use gloo_net::http::Request;
|
||||||
println!("Hello, world!");
|
use wasm_bindgen_futures::spawn_local;
|
||||||
|
use yew::prelude::*;
|
||||||
|
use yew_router::prelude::*;
|
||||||
|
|
||||||
|
#[derive(Clone, Routable, PartialEq)]
|
||||||
|
enum Route {
|
||||||
|
#[at("/")]
|
||||||
|
Home,
|
||||||
|
#[at("/hello-server")]
|
||||||
|
HelloServer,
|
||||||
|
}
|
||||||
|
|
||||||
|
fn switch(routes: Route) -> Html {
|
||||||
|
match routes {
|
||||||
|
Route::Home => html! { <h1>{ "Hello Frontend" }</h1> },
|
||||||
|
Route::HelloServer => html! { <HelloServer /> },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[function_component(App)]
|
||||||
|
fn app() -> Html {
|
||||||
|
html! {
|
||||||
|
<BrowserRouter>
|
||||||
|
<Switch<Route> render={switch} />
|
||||||
|
</BrowserRouter>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[function_component(HelloServer)]
|
||||||
|
fn hello_server() -> Html {
|
||||||
|
let data = use_state(|| None);
|
||||||
|
|
||||||
|
// Request `/api/hello` once
|
||||||
|
{
|
||||||
|
let data = data.clone();
|
||||||
|
use_effect(move || {
|
||||||
|
if data.is_none() {
|
||||||
|
spawn_local(make_request(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
|| {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
match data.as_ref() {
|
||||||
|
None => {
|
||||||
|
html! {
|
||||||
|
<div>{"No server response"}</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Some(Ok(data)) => {
|
||||||
|
html! {
|
||||||
|
<div>{"Got server response: "}{data}</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Some(Err(err)) => {
|
||||||
|
html! {
|
||||||
|
<div>{"Error requesting data from server: "}{err}</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fn make_request(data: UseStateHandle<Option<Result<String, String>>>) {
|
||||||
|
let resp = Request::get("/api/hello").send().await.unwrap();
|
||||||
|
let result = {
|
||||||
|
if !resp.ok() {
|
||||||
|
Err(format!(
|
||||||
|
"Error fetching data {} ({})",
|
||||||
|
resp.status(),
|
||||||
|
resp.status_text()
|
||||||
|
))
|
||||||
|
} else {
|
||||||
|
resp.text().await.map_err(|err| err.to_string())
|
||||||
|
}
|
||||||
|
};
|
||||||
|
data.set(Some(result));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
|
||||||
|
console_error_panic_hook::set_once();
|
||||||
|
yew::Renderer::<App>::new().render();
|
||||||
}
|
}
|
Loading…
Reference in New Issue