Vapor 大型教程
全部用户页
本章做一个「所有用户」的列表页,并在每个页面的导航栏里加上访问入口,方便随时查看。
创建列表页模板
新建 Resources/Views/allUsers.leaf,用表格展示用户名与昵称,每个用户名链接到该用户的主页。
#set("content") {
<h1>All Users</h1>
#if(count(users) > 0) {
<table class="table table-borderd table-hover">
<thead class="thead-light">
<tr>
<th>
Username
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody>
#for(user in users) {
<tr>
<td>
<a href="/users/#(user.id)">#(user.username)</a>
</td>
<td>
#(user.name)
</td>
</tr>
}
</tbody>
</table>
} else {
<h2>There aren't any uses yet!</h2>
}
}
#embed("base")
控制器里加访问逻辑
在 WebsiteController.swift 定义上下文 AllUsersContext(注意这里 users 是已经解析好的 [User] 数组),注册 GET /users 路由并渲染模板。
struct AllUsersContext: Encodable {
let title: String
let users: [User]
}
...
router.get("users", use: allUsersHandler)
...
func allUsersHandler(_ req: Request) throws -> Future<View> {
return User.query(on: req).all()
.flatMap(to: View.self) { users in
let context = AllUsersContext(title: "All Users", users: users)
return try req.view().render("allUsers", context)
}
}
在导航栏加入口
因为所有页面都能进入该列表,所以把入口加在 base.leaf 的导航列表中,并用 #if(title=="All Users"){active} 在访问本页时高亮。
<li class="nav-item #if(title=="All Users"){active}">
<a href="/users" class="nav-link">All Users</a>
</li>