Vapor 3 + Leaf 3でHTML表示

7542 ワード
Swift Vapor Swift テキストリンク

VaporでHTMLどうすればいいのかと思って一回やって見た結果はこちらです。

Step 1 - パッケージのセットアップ

Package Version
Vapor 3.0.0-rc
Leaf 3.0.0-rc
FluentSQLite 3.0.0-rc
Validation 2.0.0 
// swift-tools-version:4.0
import PackageDescription

let package = Package(
    name: "project_name",
    dependencies: [
        // 💧 A server-side Swift web framework.
        .package(url: "https://github.com/vapor/vapor.git", from: "3.0.0-rc"),

        .package(url: "https://github.com/vapor/leaf.git", from: "3.0.0-rc"),

        // 🔵 Swift ORM (queries, models, relations, etc) built on SQLite 3.
        .package(url: "https://github.com/vapor/fluent-sqlite.git", from: "3.0.0-rc")
    ],
    targets: [
        .target(name: "App", dependencies: ["FluentSQLite", "Vapor", "Leaf"]),
        .target(name: "Run", dependencies: ["App"]),
        .testTarget(name: "AppTests", dependencies: ["App"])
    ]
)

Step 2 - LeafRender作成

  • configファイルにLeafProvider取得
try services.register(LeafProvider())
  • LeafRenderingルート作成
public func routes(_ router: Router) throws {
    router.get { req -> Future<View> in
        let leaf = try req.make(LeafRenderer.self)
        let context = [String: String]()
        return leaf.render("home", context)
    }
}

いくつかの項目あるんですが説明しましょう。

contextの入れるべき物はLeafRendererに何の情報渡したい。
例えば：

let context = ["name": "monolithic-adam"]

これをRendererに渡して

return leaf.render("home", context)

この二行でhome.leafっていうファイルにnameの値渡してレンダリングする

Step 3 - .leafファイル作成

上の例homeに見ているからhome.leaf作って見ましょう

Resources > Views > _____.leafに入れましょう!
問題はXcode側で.leafファイルパースできないので外部エディター使った方が効率的にいいかも

Hi my name is #(name)

これでhome.leaf作って上記の一行入れて見ましょう。
Leafファイルにcontext使いたい時#()で値名入れれば表示される。

コンパイルしてランしたら

Hi my name is monolithic-adamが出てくるはず

結果・まとめ

HTMLページ表示するのはVapor+Leafで簡単で楽しくServer Side Swiftで色々作れます。

続きで入力ページ次回やって見たいと思います。

配列の中の最大の差あるいは最小の差を求めます
反応:あなたのアプリを殺している状態を持ち上げる