Submillisecond LiveView 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00509/article/details/142012750

Submillisecond LiveView 项目教程

submillisecond-live-viewLive view for the submillisecond web framework项目地址:https://gitcode.com/gh_mirrors/su/submillisecond-live-view

1. 项目介绍

Submillisecond LiveView 是一个为 Submillisecond 网络框架提供的 LiveView 实现。它允许开发者创建丰富的实时用户界面，通过服务器渲染的 HTML 来实现动态内容更新。该项目依赖于 Lunatic 运行时和 wasm32-wasi 目标平台。

2. 项目快速启动

2.1 环境准备

在开始之前，确保你已经安装了 Lunatic 运行时和 wasm32-wasi 目标平台。你可以参考项目的 README 文件中的安装指南来完成这些准备工作。

2.2 添加依赖

在你的 Cargo.toml 文件中添加以下依赖：

[dependencies]
submillisecond = "*"
submillisecond-live-view = "*"
serde = { version = "*", features = ["derive"] }

2.3 创建 HTML 模板

在你的项目根目录下创建一个 index.html 文件，作为 LiveView 的模板：

<html>
<head>
    <title>My LiveView App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

2.4 实现 LiveView

创建一个新的 Rust 文件（例如 main.rs），并实现 LiveView：

use submillisecond_live_view::prelude::*;
use serde::{Deserialize, Serialize};

#[derive(Clone, Serialize, Deserialize)]
struct Counter {
    count: u32,
}

impl LiveView for Counter {
    type Events = (Increment, Decrement);

    fn mount(_uri: Uri, _socket: Option<Socket>) -> Self {
        Counter { count: 0 }
    }

    fn render(&self) -> Rendered {
        html! {
            p { "Count is " (self.count) }
            button @click=(Increment) { "Increment" }
            button @click=(Decrement) { "Decrement" }
        }
    }
}

#[derive(Serialize, Deserialize)]
struct Increment;

impl LiveViewEvent<Increment> for Counter {
    fn handle(state: &mut Self, _event: Increment) {
        state.count += 1;
    }
}

#[derive(Serialize, Deserialize)]
struct Decrement;

impl LiveViewEvent<Decrement> for Counter {
    fn handle(state: &mut Self, _event: Decrement) {
        state.count -= 1;
    }
}

fn main() -> std::io::Result<()> {
    Application::new(router![
        GET "/" => Counter::handler("index.html", "#app")
    ]).serve("127.0.0.1:3000")
}