全部用户页 封面
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>

本系列其他文章