Vapor에서 Leaf를 사용하여 예제 애플리케이션 구현

10741 단어 SwiftVapor
Leaf는 동적 HTML을 생성할 수 있는 Swift의 영향을 받는 템플릿 엔지니어입니다.
Leaf is a powerful templating language with Swift-inspired syntax. You can use it to generate dynamic HTML pages for a front-end website or generate rich emails to send from an API.
Leaf Overview
웹 모드에서 항목을 작성한 후 즉시 Leaf를 사용할 수 있습니다.
Vapor의 환경 구축과 프로젝트 제작은 여기서 ↓
Swift 웹 프레임워크 Vapor 소개 2019
프로젝트 완료 후 먼저 확인routes.swift.
routes.swift
// "It works" page
router.get { req in
    return try req.view().render("welcome")
}

// Says hello
router.get("hello", String.parameter) { req -> Future<View> in
    return try req.view().render("hello", [
        "name": req.parameters.next(String.self)
    ])
}
두 개의 라우팅이 설정되어 있습니다.
하나는 첫 페이지입니다./ it works 방문!의 양곡 탄젠트 값입니다.
또 하나는 /hello/{String}./hello 뒤에 이 경로와 일치하는 문자열 매개 변수를 입력하십시오.
구체적으로 말하면 http://localhost:8080/hello/Kabigon 이 주소를 방문하면 Hello, Kabigon! 표시됩니다.
다음으로 봅시다base.leaf.welcome.leaf에서 읽기base.leaf, 제목과 바디를 삽입합니다.base.leafhello.leaf에서도 사용되는 기본 파일은 거의 HTML입니다.
아주 간단하네.
base.leaf
<!DOCTYPE html>
<html>
<head>
    <title>#get(title)</title>
    <link rel="stylesheet" href="/styles/app.css">
</head>
<body>
    #get(body)
</body>
</html>
welcome.leaf
#set("title") { It works }

#set("body") {
    <div class="welcome">
        <img src="/images/it-works.png">
    </div>
}

#embed("base")
이번에 Vapor로 제작2ch 요약한 기술 블로그판 같은 사이트.
나는 먼저 기술 블로그의 제목을 표시하고 싶다.쿠크파드 씨와 반방법 씨의 기술 블로그를 특히 좋아하기 때문에 우선 그 두 사이트의 블로그 이름을 표시해 보세요.2chmm.leaf의 파일입니다.블로그 문자열을 포함하는 그룹을 받아들이고 블로그의 요소수에 따라 목록을 표시합니다.
2chmm.leaf
#set("title") { 技術ブログまとめ }

#set("body") {
    <ul>
    #for(blog in blogs) {
        <li>#(blog)</li>
    }
    </ul>
}

#embed("base")
routes.swift에서 문자열을 포함하는 블로그 수조를 2chmm.leaf에 전달합니다.
이렇게 하면 블로그 이름을 나란히 표시할 수 있다.
routes.swift
import Vapor

public func routes(_ router: Router) throws {
    // 2chmm page
    router.get { req -> Future<View> in
        return try req.view().render("2chmm", [
            "blogs": ["クックパッド開発者ブログ", "クラスメソッド発「やってみた」系技術メディア | Developers.IO"]
        ])
    }
}
하지만 문자열만으로는 사용하기 어려워서 제가 정의한 Struct를 leaf에게 맡기고 싶습니다.
먼저 Blog라는 구조를 만듭니다.leaf에 전달되는 Struct는 Encodable 프로토콜을 준수해야 합니다.
Blog.swift
struct Blog: Encodable {
    let name: String
    let url: String
}
routes.swift
import Vapor

public func routes(_ router: Router) throws {
    // 2chmm page
    router.get { req -> Future<View> in
        return try req.view().render("2chmm", [
            "blogs": [
                Blog(name: "クックパッド開発者ブログ", url: "https://techlife.cookpad.com/"),
                Blog(name: "クラスメソッド発「やってみた」系技術メディア | Developers.IO", url: "https://dev.classmethod.jp/")
            ]
        ])
    }
}
2chmm.leaf
#set("title") { 技術ブログまとめ }

#set("body") {
    <ul>
    #for(blog in blogs) {
        <li>
          <a href="#(blog.url)">#(blog.name)</a>
        </li>
    }
    </ul>
}

#embed("base")
다음 HTML을 내보냅니다.
<!DOCTYPE html>
<html>
<head>
    <title> 技術ブログまとめ </title>
    <link rel="stylesheet" href="/styles/app.css">
</head>
<body>    
    <ul>
        <li>
          <a href="https://techlife.cookpad.com/">クックパッド開発者ブログ</a>
        </li>
        <li>
          <a href="https://dev.classmethod.jp/">クラスメソッド発「やってみた」系技術メディア | Developers.IO</a>
        </li>
    </ul>
</body>
</html>
#006 DS&A - 스택 및 큐
GraphQL - 응답

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage