rust 为yew项目创建自己的服务端渲染环境

引言

  最近了解yew的rust项目，感觉挺有意思的，不知道能不能避开前端相关的技术，毕竟现在前端体系需要了解的东西过于繁杂，yew的项目编译后貌似只能服务端渲染才能运行，但是官方介绍的服务端渲染方式总感觉还得继续安装奇奇怪怪的东西，为了减少依赖，才有了自己写一个简单的用于测试运行yew项目。

一、rust web框架选择

  目前生产环境可用的web框架貌似只有acitx，rocket也行不过自己使用的时候必须使用rust的不稳定版本，这会导致项目突然一下无法运行，很是玄学，actix个人认为有点过于庞大，这里采用官方的tide框架，之所以选择这个框架第一个原因是官方的，第二个原因是支持协程，第三个原因比较小巧，废话不多说，上代码吧!

二、Cargo.toml配置

[dependencies]
tide = "0.16.0"
async-std = { version = "1.8.0", features = ["attributes"] }

三、核心代码

use tide::http::Mime;
use tide::{Redirect, Response, StatusCode};
use std::io::{BufRead, BufReader};
use std::fs::File;

use tide::Request;
// cargo build --release

#[async_std::main]
async fn main() -> tide::Result<()> {
    let mut app = tide::new();

    app.at("/").get(redirect_index);
    // app.at("/static").serve_dir("static/")?;
    app.at("/").serve_dir("static/")?;

    let ip_and_prot: String = "127.0.0.1:8080".into();
    println!("{0} >> http://{1}", "start service:", ip_and_prot);
    app.listen(ip_and_prot).await?;
    Ok(())
}

// 重定向到index.html
async fn redirect_index(mut _req: Request<()>) -> tide::Result {
    Ok(Redirect::new("/index.html").into())
}

// 读取index.html返回
async fn _root_page(mut _req: Request<()>) -> tide::Result {
    // 读取文件
    let file = File::open("static/index.html").unwrap();
    let buffer: BufReader<File> = BufReader::new(file);
    let mut html_string = String::new();
    for line in buffer.lines() {
        html_string.push_str(line.unwrap().as_str())
    }

    let mut resp = Response::new(StatusCode::Ok);
    let mime: Mime = "text/html;charset=utf-8".into();
    resp.set_content_type(mime);
    resp.set_body(html_string);

    Ok(resp)
}

总结

  将代码使用cargo build --release生成可执行文件，在’target/release/项目名’中找到对应可执行文件，将这个文件拷贝到yew项目的跟目录下，这里需要注意的是yew项目必须生成在static目录下,使用如下指令’wasm-pack build --target web --out-name wasm --out-dir ./static’,然后启动服务就不用管了，每次你生成新代码之后刷新一下页面即可。