Templ 통합-Golang-php.cn

집

백엔드 개발

Golang

Templ 통합

王林

Sep 12, 2024 am 10:20 AM

지금은 3개의 파일이 필요하므로 시간이 더 길어질 것입니다. 또한 favicon.ico, CSS 파일(CSS를 사용하도록 선택한 경우), 로고 또는 기타 정적 파일과 같은 파일을 위한 정적 디렉터리가 필요합니다.

net/http 문서. 이들은 당신의 가장 친한 친구입니다.

시작해볼까요?

설치 및 설정

다행히 Go가 설정된 방식은 간단한 과정입니다.
github.com/a-h/templ/cmd/templ@latest를 설치하세요
위의 명령은 templ 바이너리를 가져옵니다(PATH를 설정했지요?).
github.com/a-h/templ을 방문하세요
이것은 go.mod에 임시 파일을 로드합니다.

그렇습니다. 설치 및 설정이 완료되었습니다.

그리고 투쟁

이 과정에서 가장 어려운 부분은 styles.css를 제대로 로드하는 것이었습니다. CSS 파일을 사용하지 않는 경우 정적 디렉터리 관련 줄은 건너뛰어도 됩니다.

// File: /root/cmd/server/main.go
package main

import (
    [go mod module name]/internal/views
)
func main(){
    port := ":3000"
    home := templ.Component(views.Home())

    http.Handle("/", templ.Handler(home))
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

    log.Fatal(http.ListenAndServe(port, nil))
}

로그인 후 복사

실제보다 더 복잡해 보입니다. 한 번에 한 단계씩 살펴보겠습니다.

port := ":3000"

로그인 후 복사

포트는 뭐, 포트입니다(포트가 무엇인지 아시리라 생각합니다). 포트를 http.ListenAndServe(addr string, handler Handler)에 전달할 때 :을 포함해야 합니다. 그렇지 않으면 실행되거나 빌드되지 않습니다.

home := templ.Component(views.Home())

로그인 후 복사

home은 home.templ의 Home 기능 인스턴스입니다.

http.Handle("/", templ.Handler(home))

로그인 후 복사

여기서 우리가 하는 일은 http.Handler()와 동일한 작업을 수행하는 templ의 Handler()로 홈을 전달하는 것뿐입니다. templ.Handler()의 소스는 다음과 같습니다.

type Handler struct {
    h slog.Handler
    m *sync.Mutex
    w io.Writer
}

로그인 후 복사

이 핸들러는 루트 디렉터리 패턴에 할당된 다음 http 멀티플렉서인 ServeMux에서 사용됩니다. 특정 최상위 도메인에 대한 모든 경로를 처리한다는 멋진 표현입니다.

http.Handle("/static", http.StripPrefix("/static", http.FileServer(http.Dir("./static"))))

로그인 후 복사

긴 내용이지만 쉽게 소화하실 수 있습니다. http.Handle(pattern string, handler Handler) 위에서 살펴보았습니다. 이 경우 패턴은 정적 디렉터리입니다. 핸들러는 고차 함수로 구성됩니다. 이는 단순히 함수도 데이터로 처리되며 변수에 할당되거나 매개변수로 전달될 수 있음을 의미합니다.

이 경우 http.Dir("./static")을 전달합니다. http.Dir(dir 문자열)은 기본 FileSystem(dir 열기)을 구현하는 데 사용되며 $pwd/$cwd로 제한됩니다. 이것이 바로 "."을 전달하는 이유입니다. 우리는 뿌리부터 시작합니다. 이는 필요한 핸들러를 반환하는 http.FileServer(root FileSystem) 핸들러로 전달됩니다. 그런 다음 이를 http.StripPrefix(pattern string, fs FileSystem)로 전달합니다. 이는 정확히 들리는 대로 경로에서 디렉터리 이름을 제거합니다. /static이 수행하는 작업에 대해 생각해 보면 실제 이점은 이제 루트인 /입니다. 그렇다면 CSS는 어디에 적용되나요? 홈페이지에서.

그렇게 나쁘지는 않았죠?

log.Fatal(http.ListenAndServe(port, nil))

로그인 후 복사

http.ListenAndServe(addr string, handler Handler) 오류가 마지막 부분입니다. 이 함수는 nil이 아닌 오류 값도 반환하므로 오류 처리를 적극 권장합니다. log.Fatal(v ...any)는 모든 유형을 취하며 "os.Exit(1)에서 Print()를 호출하는 것과 동일"합니다. 즉, 프로그램이 0이 아닌 다른 값(예: 충돌)으로 종료되면 이벤트가 기록됩니다.

언젠가 http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) 오류를 살펴보도록 하겠습니다. 현재 TLS는 내 호스트(자체 호스팅 아님)에서 제공되고 있습니다.

이제 main.go는 이제 끝났습니다.

템플릿 템플릿

첫 번째 템플릿은 ./internal/views/layout.templ입니다. 이 파일은 페이지가 표시되는 방식을 처리합니다. React 또는 Nextjs에서 온 경우 page.tsx 파일입니다.

// File: /root/internal/views/layout.templ
package views

templ Layout( title string ){
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <link rel="icon" type="image/x-icon" href="/static/favicon.ico"/>
            <link rel="stylesheet" type="text/css" href="/static/styles.css"/>
            <title>{title}</title>
        </head>
        <body>
            {children ...}
        </body>
    </html>
}

로그인 후 복사

정말 간단합니다.

다음 템플릿은 home.templ입니다. 여기에는 /의 내용이 포함됩니다.

// File: /root/internal/views/home.templ
package views

templ Home(){
    @Layout("Home")
}

로그인 후 복사

@Layout(제목 문자열)에 "Home"을 전달하면 페이지 제목이 Home으로 설정됩니다.

마무리

그래요, 처음에 말씀드린 것처럼 이번에는 많이 나오네요. 두 가지를 더 수행하면 templ 구현 및 테스트가 완료됩니다.

# 1 - make sure `go.sum` is up-to-date
go mod tidy
# 2 - have templ generate go files
templ generate
# 3a - build it out
go build ./cmd/server/main.go
./main
# 3b - or test it out
go run ./cmd/server/main.go
# you can shorten the path to
go run ./cmd/server/.

로그인 후 복사

go/templ 웹페이지의 멋진 모습을 볼 수 있습니다. CSS에서 배경색을 변경하는 것을 잊었기 때문에 망막이 타는 경우에도 마찬가지입니다.

부록

jsx 태그를 템플릿 템플릿으로 사용하도록 선택한 경우 콘텐츠 templ.Component를 매개변수로 전달할 수 있습니다. 마찬가지로 templ은 사용자 정의 템플릿을 위한 CSS 구성 요소도 제공합니다.

정오표

오류를 발견했거나, 문제가 있거나, 놓친 부분이 있으면 언제든지 댓글을 남겨주세요. 최선을 다해 업데이트 및/또는 도움을 드리겠습니다.

웹 사이트가 변경(콘텐츠 추가)될 예정이므로 배포할 수 있도록 파일 빌드 및 커밋을 처리하기 위해 GitHub 호스팅 Runner를 설정하는 단계를 진행하겠습니다.

향후 이 프로젝트에 git repo를 추가할 예정입니다. 여기에는 우리가 작성 중인 모든 파일과 GitHub Actions용 .github/go.yml 파일이 포함됩니다.

Integrating Templ

위 내용은 Templ 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7478

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Debian Openssl의 취약점은 무엇입니까? Apr 02, 2025 am 07:30 AM

보안 통신에 널리 사용되는 오픈 소스 라이브러리로서 OpenSSL은 암호화 알고리즘, 키 및 인증서 관리 기능을 제공합니다. 그러나 역사적 버전에는 알려진 보안 취약점이 있으며 그 중 일부는 매우 유해합니다. 이 기사는 데비안 시스템의 OpenSSL에 대한 일반적인 취약점 및 응답 측정에 중점을 둘 것입니다. DebianopensSL 알려진 취약점 : OpenSSL은 다음과 같은 몇 가지 심각한 취약점을 경험했습니다. 심장 출혈 취약성 (CVE-2014-0160) :이 취약점은 OpenSSL 1.0.1 ~ 1.0.1F 및 1.0.2 ~ 1.0.2 베타 버전에 영향을 미칩니다. 공격자는이 취약점을 사용하여 암호화 키 등을 포함하여 서버에서 무단 읽기 민감한 정보를 사용할 수 있습니다.