sauron
0.40.0
Sauron เป็นเฟรมเวิร์กเว็บและไลบรารีที่หลากหลายสำหรับการสร้างเว็บแอพพลิเคชั่นฝั่งไคลเอ็นต์และ/หรือเซิร์ฟเวอร์โดยมุ่งเน้นที่การยศาสตร์ความเรียบง่ายและความสง่างาม สิ่งนี้ช่วยให้คุณสามารถเขียนรหัสจำนวนน้อยที่สุดเท่าที่จะเป็นไปได้และมุ่งเน้นไปที่ตรรกะทางธุรกิจมากกว่ารายละเอียดภายในของเฟรมเวิร์ก
Sauron ได้รับแรงบันดาลใจจาก Elm-Lang และกำลังติดตามสถาปัตยกรรม Elm
ในแอปพลิเคชัน Sauron มีเพียงรุ่นมุมมองและการอัปเดตเท่านั้น รูปแบบคือสถานะแอปพลิเคชันของคุณ มุมมองอธิบายวิธีการนำเสนอโมเดลให้กับผู้ใช้ ฟังก์ชั่นการอัปเดตอธิบายวิธีการอัปเดตโมเดลสิ่งนี้ใช้ข้อความซึ่งมีข้อมูลที่จำเป็นสำหรับการอัปเดตโมเดล
ใน src/lib.rs ของคุณ
use sauron :: {
html :: text , html :: units :: px , jss , node , wasm_bindgen , Application , Cmd , Node , Program ,
} ;
enum Msg {
Increment ,
Decrement ,
Reset ,
}
struct App {
count : i32 ,
}
impl App {
fn new ( ) -> Self {
App { count : 0 }
}
}
impl Application for App {
type MSG = Msg ;
fn view ( & self ) -> Node < Msg > {
node ! {
<main>
<input type = "button"
value= "+"
on_click=|_| {
Msg :: Increment
}
/>
<button class= "count" on_click=|_| { Msg :: Reset } > { text ( self . count ) } </button>
<input type = "button"
value= "-"
on_click=|_| {
Msg :: Decrement
}
/>
</main>
}
}
fn update ( & mut self , msg : Msg ) -> Cmd < Msg > {
match msg {
Msg :: Increment => self . count += 1 ,
Msg :: Decrement => self . count -= 1 ,
Msg :: Reset => self . count = 0 ,
}
Cmd :: none ( )
}
fn stylesheet ( ) -> Vec < String > {
vec ! [ jss! {
"body" : {
font_family : "verdana, arial, monospace" ,
} ,
"main" : {
width : px ( 30 ) ,
height : px ( 100 ) ,
margin : "auto" ,
text_align : "center" ,
} ,
"input, .count" : {
font_size : px ( 40 ) ,
padding : px ( 30 ) ,
margin : px ( 30 ) ,
}
} ]
}
}
# [ wasm_bindgen ( start ) ]
pub fn start ( ) {
Program :: mount_to_body ( App :: new ( ) ) ;
} index.html
<!doctype html >
< html >
< head >
< meta content =" text/html;charset=utf-8 " http-equiv =" Content-Type " />
< title > Counter </ title >
< script type = module >
import init from './pkg/counter.js' ;
await init ( ) . catch ( console . error ) ;
</ script >
</ head >
< body >
</ body >
</ html > ใน Cargo.toml ระบุประเภทของลังให้เป็น cdylib
[ package ]
name = " counter "
version = " 0.1.0 "
edition = " 2021 "
[ lib ]
crate-type = [ " cdylib " ]
[ dependencies ]
sauron = " 0.61.0 " cargo install wasm-pack
cargo install basic-http-serverสร้างโดยใช้
wasm-pack build --target web --releaseเสิร์ฟโดยใช้
basic-http-server -a 0.0.0.0:4000จากนั้นนำทางไปที่ http: // localhost: 4000
ตรงไปที่ getting-started.md MD สำหรับการสอนเต็มรูปแบบ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับคำสั่งในการสร้างและให้บริการดูตัวอย่างเกี่ยวกับ repo นี้แต่ละรายการมีสคริปต์เกี่ยวกับวิธีการสร้างและเรียกใช้
ใบอนุญาต: MIT
