go语言快速入门：BootStrap应用(16)

来源：互联网发布：java商城系统源码下载编辑：程序博客网时间：2024/06/02 07:40

这篇文章中我们将会通过简单的实例介绍如何在go语言Web编程中使用BootStrap的方式

BootStrap

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

版本

目前BootStrap虽然推出了4.0.0,但是仍然是Alpha版。这篇文章中仍然使用稳定的BootStrap3.3.7版本。

项目版本 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/

例子代码

[root@liumiaocn bootstrap-3.3.7-dist]# cat basic-web-bootstrap.gopackage mainimport "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.HandleFunc("/", Hello)        http.ListenAndServe(":8080", nil)}[root@liumiaocn bootstrap-3.3.7-dist]#

BootStrap模板文件

例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用。

[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="//cdn.bootcss.com/bootstrap/3.3.7/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="//cdn.bootcss.com/bootstrap/3.3.7/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

结果画面

这里写图片描述

总结

本文使用BootStrap作为模板页面渲染，go语言提供Web框架和控制，可以看出仅仅需要非常少的动作即可开发。但是在实际的开发中目前还没有那么轻松，比如在例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用，使用cdn不但非常简单，而且能够减轻网站IO的压力。但是使用cdn这个角度上来说，事前的准备比如下载BootStrap解压设定等操作均为无用之举，但是如果需要用go进行框架的设计又不需要或者不想使用reveal等Web框架，自行设计的时候这些在很多情况下都是绕不过去的问题，在后续的讨论中会继续延伸如何设计go的Web框架。

参考项目

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

0 0