goland-gin框架渲染模板1

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、定义路由

//定义路由组
share := r.Group("")
{
   share.GET("/profile", UserProfile)
   share.GET("/index", addIndex)
   share.GET("/cart", CartGood)
   share.GET("/category-details/:Species", CategoryDetails)
   share.GET("/chat", ChatStatic)
   share.GET("/edit-need", EditNeedStatic)
   share.GET("/edit-profile", EditProfileStatic)
   share.GET("/goods-category", goodsCategory)
   share.GET("/lend-items", LendStatic)
   share.GET("/login", LoginStatic)
   share.GET("/myneed", MyNeedStatic)

2、如：index方法 addIndex渲染,使用c.HTML(状态码，name，gin.H{ 名： 数据 }) 数据可为 数组，基本类型数据，结构体。。。 名可任取，相当于赋值给前端使用

//首页-动态展示
func addIndex(c *gin.Context) {
   client, err := config.GetClient()
   if err != nil {
      fmt.Println(err)
      respError(c, err)
      return
   }
   contract, err := config.GetAddress(client)
   if err != nil {
      respError(c, err)
      return
   }

   //获取id
   id := config.HaveId(client)
   if err != nil {
      fmt.Println(err)
      respError(c, err)
      return
   }
   //种类
   var stickArr []StickAll
   for j := 1; j < 8; j++ {

      StickData, err := config.ShowStick(client, big.NewInt(int64(j)))
      if err != nil {
         respError(c, err)
         return
      }
      stickArr1 := []StickAll{StickAll{Sticks: StickData.Name, SticksImg: StickData.Img}}
      stickArr = append(stickArr, stickArr1...)
   }
   fmt.Println(stickArr)
   //定义一个结构体数组
   var arr1 []GoodsPort
   var goodArr []GoodsPort
   var goodArr1 []GoodsPort
   //nums := make([]int64, 0)
   nums := generateRandomNumber(0, len(id), len(id))
   fmt.Println("len(id):", len(id))
   //goodNums:=generateRandomNumber(0, len(id), 4)
   fmt.Println("nums", nums)
   //gRand := rand.New(rand.NewSource(time.Now().UnixNano()).(rand.Source64))、

   //轮播
   for j := 0; j < 3; j++ {

      goodData, goodData1, err2 := config.HaveIndex(client, id[j])
      //print("图片路径",goodImg)
      if err2 != nil {
         //respError(c, err2)
         fmt.Println(err2)
         return
      }
      arr0 := []GoodsPort{GoodsPort{Id: goodData.Id, Names: goodData.Name, Species: goodData.Species, Rent: goodData.Rent, EthPledge: goodData.EthPledge, GoodImg: goodData1.GoodImg, GoodSign: goodData1.GoodSign}}
      goodArr1 = append(goodArr1, arr0...)
      fmt.Println("goodArr", goodArr1)
   }
   for j := 0; j < 3; j++ {
      x := int64(rand.Intn(len(id)))
      goodData, goodData1, err2 := config.HaveIndex(client, big.NewInt(x))
      //print("图片路径",goodImg)
      if err2 != nil {
         fmt.Println("err2",err2)

         return
      }
      if goodData.Name != "" && goodData.Available == true && goodData.IsBorrow == false {
         arr2 := []GoodsPort{GoodsPort{Id: goodData.Id, Names: goodData.Name, Species: goodData.Species, Rent: goodData.Rent, EthPledge: goodData.EthPledge, GoodImg: goodData1.GoodImg, GoodSign: goodData1.GoodSign}}
         goodArr = append(goodArr, arr2...)
      }
   }
   for i := 0; i < len(id)+1; i++ {
      if i < len(id) {
         //var Owner common.Address
         //xint:=int64(rand.Intn(len(id)))
         //xint := int64(gRand.Intn(len(id)))
         goodData, goodData1, err3 := config.HaveIndex(client, big.NewInt(nums[i]))
         //print("图片路径",goodImg)
         if err3 != nil {
            fmt.Println(err3)

            return
         }
         if goodData.Name != "" && goodData.Available == true && goodData.IsBorrow == false {
            arr2 := []GoodsPort{GoodsPort{Id: goodData.Id, Names: goodData.Name, Species: goodData.Species, Rent: goodData.Rent, EthPledge: goodData.EthPledge, GoodImg: goodData1.GoodImg, GoodSign: goodData1.GoodSign}}
            arr1 = append(arr1, arr2...)
         }

         //goodsPort1 := goodsPort{ Names: names, Species: species, Rent: rent, EthPledge: ethPledge}
         //fmt.Println(goodsPort{},addr)
      } else {
         userName, people, _, _, _, err := config.GetUserMethod(contract, LoginUser)
         userImg, err := contract.GetUserImg(nil, LoginUser)
         fmt.Println("res", userName)
         if err != nil {
            fmt.Println(err)
            return
         }
         c.HTML(http.StatusOK, "Static/index.html", gin.H{
            "goodArr":  goodArr,
            "goodArr1": goodArr1,
            "goodsPor": arr1,
            "userName": userName,
            "userImg":  userImg,
            "address":  people,
            "stickArr": stickArr,
         })
      }
   }
}

3、前端代码

{{ define "Static/index.html" }}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Share Fish-首页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="share/static/js/public.js"></script>
    <link rel="stylesheet" href="share/css/not-login.css">
    <link rel="stylesheet" href="share/css/materialize2.css">
    <link href="share/css/styletb.css" rel="stylesheet" type="text/css"/>

    <!-- 图标 -->
    <link rel="stylesheet" href="share/static/css/flaticon.css">
    <!-- 底部导航 -->
   <link rel="stylesheet" href="share/css/tabbar.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="share/assets/css/plugins/slick.min.css">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="share/assets/css/style.css">

    <!-- App css搜索框 -->
    <link href="share/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="share/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <link href="share/static/css/app.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- 未登录 -->

    {{if eq "" .userName}}
        <div class="slider" style=" position: fixed;
        left: 0;
        bottom: 86px;
        width: 100%;
        height: 49px;
        line-height: 49px;
        z-index: 1010;">
            <ul class="slides" style="background: none;">
                <li><img src="" alt="">
                    <div class="caption slider-content center-align ">
                        <span style="font-size: 15px;">登录Share Fish打开精彩世界</span>
                        <a href="../login" class="button-default" style="float: right;">立即登录</a>
                    </div>
                </li>
            </ul>
        </div>
    {{else}}
        <div></div>
    {{end}}

    <!--====================  preloader area ====================-->
    <div class="preloader-activate preloader-active">
        <div class="preloader-area-wrap">
            <div class="spinner d-flex justify-content-center align-items-center h-100">
                <div class="img-loader"></div>
            </div>
        </div>
    </div>
    <!--====================  End of preloader area  ====================-->

    <div class="body-wrapper space-pt--70 ">
        <!--====================  header area ====================-->
        <header>
            <div class="header-wrapper border-bottom">
                <div class="container space-y--15">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- header logo -->
                            <div class="header-logo">
                                <a href="../index">
                                   <img src="share/assets/img/logo.png" class="img-fluid" alt="" style="width: 75px;">
                                </a>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-center">
                            <!-- 搜索框 -->
                            <div class="header-search">
                                <a href="../search-page">
                                    <div class="input-group">
                                        <input type="text" id="chat-search" name="chat-search" class="form-control"
                                            placeholder="搜索好物" style="    padding-left: 30px;">

                                </a>

                                <span style="position: absolute;padding-top: 7px;padding-left: 10px;
                                       "><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button class="header-menu-trigger" id="header-menu-trigger">
                            <i class="fas fa-align-right" style="font-size: 20px;
                                color: grey;"></i>
                        </button>
                    </div>
                </div>
            </div>
        </header>
        <!--====================  End of header area  ====================-->
        <!--====================  mobile menu overlay ====================-->

        {{ template "Static/menu.html" . }}

        <!--====================  End of mobile menu overlay  ====================-->
        <!--====================  hero slider ====================-->

        <div class="hero-slider bg-color--grey space-y--10">
            <div class="container">
                <div class="row row-10">
                    <div class="col-12">
                        <div class="hero-slider-wrapper">
                            {{range  $key,$vlaue:=.goodArr1}}
                            <a href="../shop-product/{{$vlaue.Id}}">
                                {{range $k,$v:=$vlaue.GoodImg}}
                                <div class="hero-slider-item d-flex bg-img"
                                    data-bg=../{{$v}}>
                                    {{end}}
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
                                                <!-- hero slider content -->
                                                <div class="hero-slider-content">
                                                    <h2 class="hero-slider-content__title space-mb--10">Share Fish <br>
                                                        让闲置游起来</h2>
                                                    <p class="hero-slider-content__text">-----</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {{end}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--====================  End of hero slider  ====================-->
        <!--====================  category slider ====================-->

        <div class="jq22-palace jq22-palace-one">
            <div class="page-title-box" style="padding-left: 8px;">
                <h4 class="mb-0"><b>商品分类</b></h4>
            </div>
            {{range $k,$v:=.stickArr}}
         <a href="../category-details/{{$v.Sticks}}" class="jq22-palace-grid">
            <div class="jq22-palace-grid-icon">
               <img src="{{$v.SticksImg}}" alt="">
            </div>
            <div class="jq22-palace-grid-text">
               <h2>{{$v.Sticks}}</h2>
            </div>
         </a>
            {{end}}
         <a href="goods-category" class="jq22-palace-grid">
            <div class="jq22-palace-grid-icon">
               <img src="share/images/nav-008.png" alt="">
            </div>
            <div class="jq22-palace-grid-text">
               <h2>更多品类</h2>
            </div>
         </a>
      </div>

        <!--====================  End of category slider  ====================-->
        <!--====================  featured product ====================-->
        <div class="featured-product-area space-mb--25">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- section title -->
                        <div class="page-title-box">
                            <h4 class="mb-0"><b>口碑推荐</b></h4>
                        </div>

                        <!-- featured products -->
                        <div class="featured-product-wrapper space-mb-m--15">
                            <div class="row row-5">
                                {{ range $key ,$value:=.goodArr }}
{{/*                                    {{if  le 3 $key }}<div></div>*/}}
{{/*                                    {{else}}*/}}
                                        <div class="col-4">
                                            <div class="featured-product space-mb--15">
                                                <div class="featured-product__image">
                                                    <a href="shop-product/{{$value.Id}}">
                                                        {{ range $k ,$v:=$value.GoodImg}}
                                                            <img src={{$v}} class="img-fluid" alt="">
                                                        {{end}}
                                                    </a>
                                                </div>
                                                <div class="featured-product__content">
                                                    <div class="price" style="padding-left: 17px;
                                            padding-right: 17px;">
                                                        <span class="discounted-price">{{ $value.Rent }}元/天</span>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
{{/*                                    {{end}}*/}}
                                {{end}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--====================  End of featured product  ====================-->
        <!--====================  products area ====================-->
        <div class="products-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- section title -->
                        <div class="page-title-box">
                            <h4 class="mb-0"><b>更多好物</b></h4>
                        </div>
                        <!-- all products -->
                        <div class="all-products-wrapper space-mb-m--20">
                            <div class="row">
                                {{ range $key ,$value:=.goodsPor }}
                                    <div class="col-6">
                                        <div class="grid-product space-mb--20">
                                            <div class="grid-product__image">
                                                <a href="shop-product/{{$value.Id}}">
                                                    {{ range $k ,$v:=$value.GoodImg}}
                                                        <img src={{$v}} class="img-fluid" alt="">
                                                    {{end}}
                                                </a>
                                            </div>
                                            <div class="grid-product__content">
                                                <h3 class="title"><a href="shop-product">{{ $value.Names }}</a></h3>

                                                <span class="category">{{ $value.Species }}</span>
                                                <div class="price">
                                                    <span class="discounted-price">{{ $value.Rent }}元/天</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {{end}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--====================  End of products area  ====================-->
        <!--====================  footer area ====================-->
        <footer style="padding-bottom: 100px;">

            <div class="sc-bottom-bar">
                <a class="sc-menu-item sc-current" href="#"><i class="fas fa-home"></i></a>
                <a class="sc-menu-item " href="../goods-category"><i class="fas  fa-list"></i></a>
                <a href="../chat" class="sc-menu-item "><i class="fas fa-plus"></i></a>
                <a class="sc-nav-indicator"></a>
                <a class="sc-menu-item" href="../select_chat_list"><i class="fas fa-comments"></i></a>
                <a class="sc-menu-item" href="../ui-me"><i class="fas fa-user"></i></a>
            </div>

        </footer>
        <!--====================  End of footer area  ====================-->
    </div>
    <!-- JS
    ============================================ -->
    <!-- Modernizer JS -->
    <script src="share/js/tabbar.js"></script>
    <script src="share/assets/js/modernizr-2.8.3.min.js"></script>
    <!-- jQuery JS -->
    <script src="share/assets/js/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="share/assets/js/bootstrap.min.js"></script>
    <!-- IonRanger JS -->
    <script src="share/assets/js/plugins/ion.rangeSlider.min.js"></script>
    <!-- SVG inject JS -->
    <script src="share/assets/js/plugins/svg-inject.min.js"></script>
    <!-- Slick slider JS -->
    <script src="share/assets/js/plugins/slick.min.js"></script>

    <script src="share/assets/js/main.js"></script>

    <!-- script js -->
    <script src="share/js/script1.js"></script>

    <script src="share/js/pop-message.js"></script>
    <script type="text/javascript" src="share/static/js/logout.js"></script>
    
    <script type="text/javascript" src="share/static/js/slider.js"></script>
    <script type="text/javascript" src="share/static/js/swiper-3.4.1.jquery.min.js"></script>
    <script type="text/javascript">
        var swiper = new Swiper('.swiper-container',{
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
    </script>
 <script src="share/js/materialize.min.js"></script>
 <script src="share/js/sliderbg.js"></script>
</body>
{{ end }}
</html>