【问题标题】:Golang to create a main layout webpageGolang 创建主布局网页
【发布时间】:2019-05-14 17:36:21
【问题描述】:

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

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

发生的情况是页眉、页脚等组合得很好,但它在浏览器中显示为文本,带有标签和所有内容。我不确定为什么它没有正确显示。我不确定这是否可能是因为我没有使用 templates.HTML 将其呈现为 html,但我找不到太多关于此的信息。谢谢大家! Go代码如下: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 标头有多余字符的问题!

【问题讨论】:

  • w.Header.Add("Content-Type", "text/html") 在执行模板之前。
  • 我收到 w.Header.Add undefined (type func() http.Header has no field or method Add) 。是 go 版本问题还是我没有包含所需的库?
  • @JianZhenNg:不客气。

标签: html go render


【解决方案1】:

试试这个(对我有用):

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 文件中,在 &lt;!DOCTYPE html&gt; 之前删除额外的 &lt;/(在此图像中的红色圆圈内):

【讨论】:

  • 感谢您的帮助,在修改我的代码以匹配您的代码后,我发现我的模板没有被解析。我将其更改为您提供的内容,现在模板已被解析,但我仍然遇到同样的问题,页面显示文本而不是 html。
  • 已按要求更新。你需要我包含我的页眉/页脚等的html代码吗?正如我在更新中所述,我确实有一些 javascripts(分隔文件),不确定这是否会影响解析。
  • @JianZhenNg:转到您的文件:https://github.com/jzng89/TLDR-GO/blob/master/static/template/header.html 并在此文件中的第 2 行 &lt;!DOCTYPE html&gt; 之前有多余的字符:&lt;/ 只需删除这些 &lt;/ 多余的字符就可以了去吧!
  • 哦哇@A.R,谢谢你的指出!小学以来第一次写html,没有注意到这可能会导致解析问题。现在我必须找出如何让 CSS 也能正常工作。我会先自己解决,再次感谢!
  • 在多本 golang 书籍中找不到好的示例后,我在这里学到了很多东西。
【解决方案2】:

您并没有完全按照看起来的方式学习本教程。

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

(如果你打开你的开发者工具会看到索引或关于页面被破坏并且没有被正确解析)

请在您的代码中添加页面结构

//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")
}

这应该与“ma​​in.html”模板匹配

{{define "index"}}

【讨论】:

  • 我已经添加了 Page 结构,但仍然遇到同样的问题。它仍然只将页面显示为纯文本。我认为我的 html 代码没有问题,因为当我复制显示的文本并将其另存为单独的 html 并打开它时,它可以正常工作。
  • 我昨天检查了我的实现,它按预期工作。你能把你的代码放在github repo中吗,否则我无能为力:)
  • @A.R 救援 :) 干杯
猜你喜欢
  • 1970-01-01
  • 2020-05-08
  • 2010-10-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多