hashira

基于yew构建的服务器端渲染框架。

入门指南

要使用hashira创建项目，您需要安装命令行工具。

cargo install --force hashira-cli

创建新项目

使用hashira new可以创建新项目，CLI将提示您使用模板和项目名称。

您还可以使用快捷方式创建新项目

hashira new --{{template}} --name {{name}}

目前可用的模板有

• actix-web
• axum
• rocket
• deno

未来还将添加更多。或者，如果您想为您自己的创建适配器，请查看代码，大多数模板只是使用一个适配器来启动服务器，您可以在/packages/adapters中检查适配器。

此项目仍在alpha阶段

hashira仍在alpha阶段，这意味着

• 一些功能可能不完整
• 一些功能可能会被移除

功能

SSR（服务器端渲染）

允许在服务器上渲染您的yew组件，并从服务器传递属性。

async fn render_page(ctx: RenderContext) -> Result<Response> {
    let products = get_products().await?;
    let res = ctx.render_with_props(ProductsPageProps { products }).await;
    Ok(res)
}

#[page_component("/products", render = "render_page")]
fn ProductsPage(props: &ProductsPageProps) -> yew::Html {
    yew::html! {
        // ...
    }
}

服务器操作

从您的组件执行服务器端的代码。

struct CreateProduct {
    name: String,
    price: i64,
    description: Option<String>
}

#[action("/api/products/create")]
async fn CreateProductAction(form: Form<CreateProduct>) -> Json<Product> {
    // server side logic
}

#[page_component("/products/add", render = "...")]
fn CreateProductPage() -> yew::Html {
    let action = use_action();

    if action.is_loading() {
        return yew::html! {
            "Creating product..."
        };
    }

    yew::html! {
        <Form<CreateProductAction> action={action.clone()}>
            <input name="name" required={true} />
            <input name="price" required={true} />
            <textarea name="description" rows={4}></textarea>
        </Form<CreateProductAction>>
    }
}

提取器

渲染函数和服务器操作允许注入任何实现了FromRequest的参数。

#[action("/api/products/create")]
async fn CreateProductAction(
    form: Form<CreateProduct>,
    headers: HeadersMap,
    method: Method,
    Inject(pool): Inject<MySqlPool>) -> Json<Product> {
    // server side logic
}