go語言快速入門：使用靜態檔案(20)
阿新 • • 發佈：2018-12-22
在前面關於如何在go中使用BootStrap的時候，css和javascript檔案的引用我們使用了cdn。css和javascript可以繞過去不訪問本地的靜態檔案，但是關於工程所需要用到靜態檔案時應該如何處理這個問題，在這篇文章中我們將通過使用本地BootStrap的css和javascript檔案的方式來實現。
BootStrap
Bootstrap源於Twitter的一個機遇HTML/CSS/JS的前端開發框架，它由Twitter的Mark Otto和Jacob Thornton合作開發,簡單靈活，使得 Web 開發更加快速便捷。
版本
下載
使用如下步驟，下載和準備BootStrap
例子程式碼
需要使用http.Handle引入靜態資源.
[[email protected] bootstrap-3.3.7-dist]# cat basic-web-bootstrap.go
package main
import "fmt"
import "net/http"
import "html/template"
func Hello(response http.ResponseWriter, request *http.Request) {
type person struct {
Id int BootStrap模板檔案
注意路徑位置,比如css檔案為：css/bootstrap.min.css
[[email protected] bootstrap-3.3.7-dist]# cat user.tpl
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Template Page for Go Web Programming</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Person general infor</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Hello, {{.Name}}</h1>
<ul>
<li>Name : {{.Name}}<p>
<li>Id : {{.Id}}<p>
<li>Country: {{.Country}}
</ul>
<p><a class="btn btn-primary btn-lg" href="#" role="button">More »</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Name</h2>
<p>Name has the value of : {{.Name}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
<div class="col-md-4">
<h2>Id</h2>
<p>Id has the value of : {{.Id}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
<div class="col-md-4">
<h2>Country</h2>
<p>Country has the value of : {{.Country}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
</div>
<hr>
<footer>
<nav class="navbar navbar-inverse ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hello, {{.Name}}, Welcome to go programming...</a>
</div>
</div>
</nav>
</footer>
</div> <!-- /container -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[[email protected] bootstrap-3.3.7-dist]#執行確認
[root@liumiaocn bootstrap-3.3.7-dist]# go run basic-web-bootstrap.go結果畫面
總結
通過http.Handle(“/css/”, http.StripPrefix(“/css/”, http.FileServer(http.Dir(“./css”))))的方式引入靜態css檔案，結合相對路徑的寫法，保證了靜態檔案也能夠正常地被使用。