虽然 Loco 主推的是前后端分离的方式写页面，但是我还是喜欢后端渲染的 HTML 页面。
因为我的使用场景，大部分不适用前后端分离：
- 后端渲染的页面更 SEO 友好
- 页面需要多语言支持，而前端实现并不合适。例如如果支持 10 门语言，总不能一次加载所有语言吧。
- 前端技术更新过快，而且毫无意义。不想耗费过多的时间去跟进。
言归正传。
实际上 loco 官方文档中介绍 HTML template view 还是相对简单，要了解 view 的全面可以参考 loco 的一个 demo：
https://github.com/loco-rs/loco/blob/master/examples/demo/src/views/dashboard.rs
新建 HTML 模板
例如，使用 loco 默认创建的一个 HTML 模板。
> cat assets/views/home/hello.html
<html><body>
<img src="/static/image.png" width="200"/>
<br/>
find this tera template at <code>assets/views/home/hello.html</code>:
<br/>
<br/>
{{ t(key="hello-world", lang="en-US") }},
<br/>
{{ t(key="hello-world", lang="de-DE") }}
</body></html>
新建 View
src/views/hello.rs
use loco_rs::prelude::*;
use serde_json::json;
/// Home view
///
/// # Errors
///
/// This function will return an error if render fails
pub fn index(v: &impl ViewRenderer) -> Result<Response> {
format::render().view(v, "home/hello.html", json!({}))
}
src/views/mod.rs 中添加：
pub mod hello;
新建 Controller
src/controllers/hello.rs
#![allow(clippy::unused_async)]
use loco_rs::prelude::*;
use crate::views;
/// Renders the dashboard home page
///
/// # Errors
///
/// This function will return an error if render fails
pub async fn render_index(ViewEngine(v): ViewEngine<TeraView>) -> Result<Response> {
views::hello::index(&v)
}
pub fn routes() -> Routes {
Routes::new()
.prefix("hello")
.add("/", get(render_index))
}
src/controllers/mod.rs 中添加：
pub mod hello;
添加路由
src/app.rs
.add_route(controllers::hello::routes())
这个风格跟 django 很像，将一个 web 网站拆分为 N 个小的 app （例如文章管理，跟投票功能就是两个相对独立的 app），每个 app 有独立的路由。 我自己维护的 golang gin 项目也是采用的这个风格。
没想到 loco 也是这样设计的，估计 Rails 也是吧。
切换 static 目录
最后不要忘了切换 static 目录为 server-side 的配置 （默认为 client-side, 即前后端分离方案的前端部分)。
打开 config/development.yaml 文件：
- 取消 server-side 的注释
- 注释掉 client-side 的配置
# server-side static assets config
# for use with the view_engine in initializers/view_engine.rs
#
static:
enable: true
must_exist: true
precompressed: false
folder:
uri: "/static"
path: "assets/static"
fallback: "assets/static/404.html"
# client side app static config
#static:
# enable: true
# must_exist: true
# precompressed: false
# folder:
# uri: "/"
# path: "frontend/dist"
# fallback: "frontend/dist/index.html"
注意：如果不进行这步配置修改，会发现页面中的图片无法加载，报 404 错误。
测试
启动 loco 服务：
cargo loco start
然后，浏览器中访问：
http://localhost:3000/hello
即可看到：
参考
- loco demo: https://github.com/loco-rs/loco/blob/master/examples/demo
- rust web 框架 loco 的后端 HTML 模板
关于作者 🌱
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式
