go语言快速入门：使用静态文件(20)

最新推荐文章于 2024-02-23 10:16:39 发布

淼叔

最新推荐文章于 2024-02-23 10:16:39 发布

阅读量6.4k

点赞数

分类专栏： # 编程语言 # go语言快速入门文章标签： go语言 bootstrap

本文链接：https://blog.csdn.net/liumiaocn/article/details/54930004

版权

编程语言同时被 2 个专栏收录

61 篇文章 2 订阅

订阅专栏

go语言快速入门

29 篇文章 54 订阅

订阅专栏

在前面关于如何在go中使用BootStrap的时候，css和javascript文件的引用我们使用了cdn。css和javascript可以绕过去不访问本地的静态文件，但是关于工程所需要用到静态文件时应该如何处理这个问题，在这篇文章中我们将通过使用本地BootStrap的css和javascript文件的方式来实现。

BootStrap

Bootstrap源于Twitter的一个机遇HTML/CSS/JS的前端开发框架，它由Twitter的Mark Otto和Jacob Thornton合作开发,简单灵活，使得 Web 开发更加快速便捷。

版本

项目	版本
BootStrap版本	3.3.7
下载地址	https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

下载

使用如下步骤，下载和准备BootStrap

步骤	详细
Step 1	wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
Step 2	unzip bootstrap-3.3.7-dist.zip
Step 3	cd bootstrap-3.3.7-dist/

例子代码

需要使用http.Handle引入静态资源.

[root@liumiaocn 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
                Name    string
                Country string
        }

        liumiaocn := person{Id: 1001, Name: "liumiaocn", Country: "China"}

        tmpl, err := template.ParseFiles("./user.tpl")
        if err != nil {
                fmt.Println("Error happened..")
        }
        tmpl.Execute(response, liumiaocn)
}

func main() {
        http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css"))))
        http.HandleFunc("/", Hello)
        http.ListenAndServe(":8080", nil)
}
[root@liumiaocn bootstrap-3.3.7-dist]#

BootStrap模板文件

注意路径位置,比如css文件为：css/bootstrap.min.css

[root@liumiaocn 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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>
[root@liumiaocn 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文件，结合相对路径的写法，保证了静态文件也能够正常地被使用。

参考项目

项目名称	URL
go-bootstrap	https://github.com/go-bootstrap/go-bootstrap

淼叔

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
go语言快速入门：使用静态文件(20)

在前面关于如何在go中使用BootStrap的时候，css和javascript文件的引用我们使用了cdn。css和javascript可以绕过去不访问本地的静态文件，但是关于工程所需要用到静态文件时应该如何处理这个问题，在这篇文章中我们将通过使用本地BootStrap的css和javascript文件的方式来实现。
复制链接

扫一扫