Front end created
parent
c439bf61da
commit
a11642e0e8
|
@ -4,3 +4,10 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[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() {
|
||||
println!("Hello, world!");
|
||||
use gloo_net::http::Request;
|
||||
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