go web template css js 静态资源引用

最新推荐文章于 2024-10-11 22:55:17 发布

原创最新推荐文章于 2024-10-11 22:55:17 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

go 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Go Web应用中引用CSS和JS等静态资源的方法。通过项目结构的展示和`web.go`及`web.gtpl`的代码示例，讲解了如何正确设置和访问静态文件。当遇到资源加载无效时，可以通过检查浏览器开发者工具中的文件路径来定位问题，确保静态资源的路径正确无误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、项目结构
我项目的目录结构
2、web.go (go 后端代码)

package main

import (
	"net/http"
    // "fmt"
    "html/template"
)

//网站首页
func index(w http.ResponseWriter ,r *http.Request){
    t,_ := template.ParseFiles("view/web.gtpl")  //加载模板文件
    t.Execute(w,nil)    //模板文件显示在页面上
    // fmt.Fprintf(w,"<h1>go web</h1>")  //直接显示在页面上
}

func main(){

    //静态资源的引用  我之前是用的 /static/ 然后模板中写的是 /static/css/然后访问不到css  
    //所以路由应该需要指到具体文件的当前文件夹名   eg: /static/css/1.css  如果渲染1.css 需注册路由/static/css/
    http.Handle("/static/css/", http.StripPrefix("/static/css/", http.FileServer(http.Dir("static/css/")))) 
    http.Handle("/static/js/", http.StripPrefix("/static/js/", http.FileServer(http.Dir("static/js/"))))
    http.Handle("/static/images/", http.StripPrefix("/static/images/", http.FileServer(http.Dir("static/images/"))))
    http.Handle("/static/fonts/", http.StripPrefix("/static/fonts/", http.FileServer(http.Dir("static/fonts/"))))

    http.HandleFunc("/",index)   //路由 网站是当前这种路径时调用index  (类似nginx的rewrite 根据不同的路径调用不同的方法 )
    http.ListenAndServe(":9090",nil)  //http的localhost运行时的端口 eg:http://localhost:9090
}

3、web.gtpl （前台代码）

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/swipebox.css">
<script src="/static/js/jquery-1.11.1.min.js"></script>
<body>
	<div class="top-header-agile">
		<div class="container">
			<div class="col-md-6 top-header-agile-left">
				<ul>
					<li><i class="fa fa-phone" aria-hidden="true"></i></li>
					<li>+18084563326</li>
					<li><i class="fa fa-envelope" aria-hidden="true"></i></li>
					<li><a href="mailto:info@example.com">info@example.com</a></li>
				</ul>
			</div>
			<div class="col-md-6 top-header-agile-right">
				<ul>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>