Question

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

我正在通过BootStrap使用Golang和HTML。

该程序最终将在小型设备上的Raspberry Pi上运行。因此，我认为最好使用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;
}

我想要哪种样式。任何帮助表示感谢，谢谢。

Answer 1

事实证明，这个开源项目的其他人对此做了回答。

他们所做的是将所有静态CSS和HTML页面打包到Go可执行文件中。他们使用名为packr的软件包来完成此操作：https://github.com/gobuffalo/packr

这是为您做到的工具。

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

Answer 2

您实际上是从Go代码中提供JS和CSS代码吗？如果不是，则您的浏览器正在向Go HTTP服务器询问资源，但是却不知道您在说什么（如果您在浏览器中查看开发者控制台，则会显示对这些文件请求的404响应

您可能需要做类似的事情（假设您将CSS和JS放在了资产目录中）

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)

更多信息，this suggestion

使用本地版本时丢失BootStrap格式

2 个答案: