How do I serve CSS and JS in Go

huangapple go评论86阅读模式
英文:

How do I serve CSS and JS in Go

问题

我按照《Go编写Web应用程序》教程进行操作,但出现了一些问题,无法使应用程序提供CSS和JS。如果我在不运行Go服务器的情况下运行静态页面,页面的CSS就能正常工作。然而,当我运行Go服务器时,CSS就无法正常工作。

这是我的HTML代码的大致样子:

<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../assets/css/custom.css">

然后在body标签下面:

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>

我的文件树结构如下:

go-affect/
├── data
│   └── …
├── static
│   ├── css
│   │   └── …
│   └── js
│       └── …
├── tmpl
│   ├── edit.html
│   ├── index.html
│   └── view.html
└── main.go

我该如何让我的Go应用程序提供所需的CSS和JavaScript?

编辑:

问题已经解决,以下是工作正常的main函数:

func main() {
    http.HandleFunc("/view/", makeHandler(viewHandler))
    http.HandleFunc("/edit/", makeHandler(editHandler))
    http.HandleFunc("/save/", makeHandler(saveHandler))
    http.HandleFunc("/index/", makeHandler(indexHandler))

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

    http.ListenAndServe(":8080", nil)
}

这是我使用的处理程序示例:

func indexHandler(w http.ResponseWriter, r *http.Request, title string) {
    p := &Page{Title: title}
    err := templates.ExecuteTemplate(w, "index.html", p)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}
英文:

I followed the Go Writing Web Applications tutorial but for whatever reason I am having trouble getting the app to serve CSS and JS. If I run my static page without the Go server the page CSS works fine. When I run the Go server on the other hand the CSS just doesn't work.

Here is what my HTML sort of looks like:

&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/css/bootstrap-theme.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/css/custom.css&quot;&gt;

then under the body tag:

&lt;script src=&quot;../assets/js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

My file tree looks like this:

go-affect/
├── data
│&#160;&#160; └── …
├── static
│&#160;&#160; ├── css
│&#160;&#160; │&#160;&#160; └── …
│&#160;&#160; └── js
│&#160;&#160; │&#160;&#160; └── …
├── tmpl
│&#160;&#160; ├── edit.html
│&#160;&#160; ├── index.html
│&#160;&#160; └── view.html
└── main.go

How do I get my Go application to serve the CSS and JavaScript I need?

EDIT:

The problem has since been solved, here is the working main:

func main() {
    http.HandleFunc(&quot;/view/&quot;, makeHandler(viewHandler))
    http.HandleFunc(&quot;/edit/&quot;, makeHandler(editHandler))
    http.HandleFunc(&quot;/save/&quot;, makeHandler(saveHandler))
    http.HandleFunc(&quot;/index/&quot;, makeHandler(indexHandler))

    
    http.Handle(&quot;/static/&quot;, http.StripPrefix(&quot;/static/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))

    http.ListenAndServe(&quot;:8080&quot;, nil)
}

Here is an example of the handlers I am using:

func indexHandler(w http.ResponseWriter, r *http.Request, title string) {
    p := &amp;Page{Title: title}
    err := templates.ExecuteTemplate(w, &quot;index.html&quot;, p)
    if err != nil {
	    http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

答案1

得分: 38

http.Handle("/", http.FileServer(http.Dir("css/")))

这段代码会将你的css目录服务于根路径/。当然,你可以选择将任何目录服务于任何路径。

你可能希望确保静态路径不会干扰其他路径,并使用以下代码:

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

将你的jscss文件都放置在项目的static目录中。这样,它们将被服务于domain.com/static/css/filename.cssdomain.com/static/js/filename.js

StripPrefix方法会移除前缀,这样它就不会尝试在static目录中搜索static/css/filename.css,当然,它是找不到的。它会在static目录中搜索css/filename.css,这是正确的做法。

英文:
http.Handle(&quot;/&quot;, http.FileServer(http.Dir(&quot;css/&quot;)))

Would serve your css directory at /. Of course you can serve whichever directory at whatever path you choose.

You probably want to make sure that the static path isn't in the way of other paths and use something like this.

http.Handle(&quot;/static/&quot;, http.StripPrefix(&quot;/static/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))

Placing both your js and css in the directory static in your project. This would then serve them at domain.com/static/css/filename.css and domain.com/static/js/filename.js

The StripPrefix method removes the prefix, so it doesn't try to search e.g. in the static directory for static/css/filename.css which, of course, it wouldn't find. It would look for css/filename.css in the static directory, which would be correct.

答案2

得分: 1

我将我的 Apache 服务器的 CSS 目录链接添加到模板文件的 head 部分中。我将任何 Go 应用程序使用的模板和数据文件保存在 Go 应用程序运行的目录下,即此示例中的 cgi-bin 目录。

模板使用来自我的 Apache 服务器 assets/css 目录的 CSS:

<link rel="stylesheet" href="/assets/css/main.css" />

我的 Go 应用程序从 cgi-bin 目录运行

样式表从我的 Apache assets/css 目录提供

英文:

I added a link to my apache servers css dir into the head section of my template files. I keep the template and data files used by any go application under dir that the go application is running from. In this instance cgi-bin.

The template uses the css from my apache server assets/css directory :

&lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/main.css&quot; /&gt;

go apps run from my cgi-bin dir

sytle sheets are served from my apache assets/css dir

huangapple
  • 本文由 发表于 2017年4月25日 12:02:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/43601359.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定