使用本地版本时丢失引导程序格式

我正在编写我的第一个web服务器，所以不要讨厌。

我正在使用Golang和HTML与BootStrap。

这个程序最终将在一个小设备中的树莓派上运行。所以我认为最好使用下载版本的BootStrap，而不是CDN版本，对吧？

但当我这样做时，我页面上的按钮会丢失格式。

这是我使用CDN版本的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- <a href="CameraPositioning" class="btn btn-primary" type="button">Camera Positioning</a> -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>        
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
<h4>{{.Head}}<h4>
</body>
</html>

这是不起作用的新HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href = "css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- <a href="CameraPositioning" class="btn btn-primary" type="button">Camera Positioning</a> -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>        
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>

我只更改了2行，所以我使用(或尝试(本地BootStrap CSS和JS。

我把它叫做Go，就像这样：

http.HandleFunc("/", managementinterface.IndexHandler)
log.Fatal(http.ListenAndServe(":8080", nil))

IndexHandler是这样的：

func IndexHandler(w http.ResponseWriter, r *http.Request) {
t, _ := template.ParseFiles("../html/index.html")
t.Execute(w, "")
}

最后一点：CDN版本是3.3.7，我下载的版本是4.1.1

如果我查看本地BootStrap CSS文件，我可以看到：

.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}

这就是我想要的造型。感谢任何帮助，谢谢。

事实证明，这个开源项目上的其他人回答了这个问题。

他们所做的是将所有静态css和html页面打包到Go可执行文件中。他们用一个名为packer的软件包做到了这一点：https://github.com/gobuffalo/packr

这是一个为你做这件事的工具。

因此，您只需要部署一个文件，这真的很好。

你真的在为Go代码中的JS和CSS代码服务吗？如果没有，你的浏览器会向Go HTTP服务器请求资源，但它不知道你在说什么(如果你在浏览器中查看开发人员控制台，它会显示404对这些文件请求的响应。

你可能需要做一些类似的事情(假设你把CSS和JS放在一个名为assets的目录中(

cssFs := http.FileServer(http.Dir("/home/user/www/assets/css"))
http.Handle("/css", fs)
jsFs := http.FileServer(http.Dir("/home/user/www/assets/js"))
http.Handle("/js", fs)

更多信息，请访问http。FileServer

相关内容

最新更新

热门标签：