Golang创建主布局网页

时间:2018-12-13 13:26:39

标签: html go render

我是Golang的新手,正在尝试使用Go启动Web服务器。我已经为基本布局编写了html,css和js,但是在启动服务器后无法显示网站。

使用此页面作为指南link。只需使用我自己编写的html,CSS和JS文件作为视觉布局。

发生的是,页眉,页脚等结合得很好,但它在浏览器中显示为带有标签和所有标签的文本。我不确定为什么无法正确显示。我不确定是否可以,因为我没有使用template.HTML渲染为html,但是我找不到很多信息。谢谢大家!编写如下代码:Github link

 package main

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "os"
    "path/filepath"
    "strings"
)

type Page struct {
    Title string
}

//-------------------------------------------------------------------------------------//
//Compile templates on start
var templ = func() *template.Template {
    t := template.New("")
    err := filepath.Walk("./", func(path string, info os.FileInfo, err error) error {
        if strings.Contains(path, ".html") {
            fmt.Println(path)
            _, err = t.ParseFiles(path)
            if err != nil {
                fmt.Println(err)
            }
        }
        return err
    })

    if err != nil {
        panic(err)
    }
    return t
}()

//---------------------------------------Page Handlers----------------------------------//
//Handler for homepage
func homepageHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Home")
    err := templ.ExecuteTemplate(w, "index", &Page{Title: "Welcome to TL;DR"})
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

//Handler for about page
func aboutHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("About")
    err := templ.ExecuteTemplate(w, "about", &Page{Title: "About TL;DR"})
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

//Handler for test Page
func testHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == "GET" {
        fmt.Println("Test")
        testT, _ := template.ParseFiles("static/test.html")
        testT.Execute(w, nil)
    }
}

func main() {
    //--------------------------------------Routers-------------------------------------//
    http.HandleFunc("/", homepageHandler)
    http.HandleFunc("/about", aboutHandler)
    http.HandleFunc("/test", testHandler)

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

    //log to file
    f, err := os.OpenFile("serverlog.log", os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0644)
    if err != nil {
        log.Fatalf("Error opening file: %v", err)
    }
    defer f.Close()
    logger := log.New(f, "Logged : ", log.LstdFlags)
    log.SetOutput(f)

    //start server
    logger.Println("Starting server on port 9090")
    logger.Fatal(http.ListenAndServe(":9090", nil))

}

编辑:更新于20181214

File Directory

Snapshot of webpage after code update

我的html代码基本上与网站格式相同,但是我确实有一些javascript和本地CSS文件,这些文件是我的html的一部分(仅用于简单转换,没有jquery)。这会影响解析吗?转到版本go version go1.10.1 windows/amd64

已解决:已更新20181215

感谢@ A.R指出我的html标头中包含多余字符的问题!

2 个答案:

答案 0 :(得分:0)

尝试一下(对我有用)

package main

import (
    "fmt"
    "html/template"
    "net/http"
    "os"
    "path/filepath"
    "strings"
)

func homepageHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Home")
    templ.ExecuteTemplate(w, "main", &Page{Title: "Welcome to TL;DR"})
}
func aboutHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("About")
    templ.ExecuteTemplate(w, "about", &Page{Title: "About TL;DR"})
}
func main() {
    http.HandleFunc("/", homepageHandler)
    http.HandleFunc("/about", aboutHandler)
    fmt.Println("Server started on port 8080")
    fmt.Println(http.ListenAndServe(":8080", nil))
}

var templ = func() *template.Template {
    t := template.New("")
    err := filepath.Walk("./", func(path string, info os.FileInfo, err error) error {
        if strings.Contains(path, ".html") {
            fmt.Println(path)
            _, err = t.ParseFiles(path)
            if err != nil {
                fmt.Println(err)
            }
        }
        return err
    })

    if err != nil {
        panic(err)
    }
    return t
}()

type Page struct {
    Title string
}

main.html文件内容:

{{define "main"}}
{{template "header" .}}
<div class="content">
    <h2>Main</h2>
    <div>This is the Main page</div>
</div>
{{template "footer" .}}
{{end}}

about.html文件内容:

{{define "about"}}
{{template "header" .}}
<div class="content">
    <h2>About</h2>
    <div>This is the About page</div>
</div>
{{template "footer" .}}
{{end}}

footer.html文件内容:

{{define "footer"}}
<p class="navbar-text navbar-fixed-bottom">Go Rocks!</p>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>

</html>
{{end}}

header.html文件内容:

{{define "header"}}
<!DOCTYPE html>
<html>

<head>
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
    <style type="text/css">
        body {
            padding-bottom: 70px;
        }

        .content {
            margin: 10px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Go App</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Main</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </div>
    </nav>
    {{end}}

注意:
并参见this中的模板。

编辑: 在第2行的static/template/header.html文件中,删除</之前的多余<!DOCTYPE html>(在此图像的红色圆圈内): enter image description here

答案 1 :(得分:-1)

您并未完全按照本教程学习。

您缺少“ 标题”模板中必需的“ .Title ”属性,此处失败。

(如果您打开开发人员工具,则会看到索引或关于页面的信息已损坏并且无法正确解析)

请在您的代码中添加Page结构

//A Page structure
type Page struct {
    Title string
}

在处理程序函数中使用

//Handler for homepage
func homepageHandler(w http.ResponseWriter, r *http.Request) {
    display(w, "main", &Page{Title: "Home"})
}

它在显示函数中被调用

func display(w http.ResponseWriter, tmpl string, data interface{}) {
    templ.ExecuteTemplate(w, tmpl, data)
}

主页处理程序中的另一件事是,您使用“ index”调用ExecuteTemplate

//Handler for homepage
func homepageHandler(w http.ResponseWriter, r *http.Request) {
    templ.ExecuteTemplate(w, "index", "Welcome to TL;DR")
}

这应与“ main.html ”模板匹配

{{define "index"}}