天天看點
傳回

Gin-Go學習筆記三：Gin-Web架構 JS分頁

JS 分頁

1>     JS分頁，業務邏輯

(1)     分頁采用的是一個叫jquery.pagination.js的一個jquery插件

(2)     需要jquery的支援，此項目中使用到的是jquery-2.1.1.min.js

(3)     分頁需要的參數有:記錄總數，每頁顯示個數，頁碼

(4)     添加搜尋的條件，作為查詢使用

2>     編寫新的model，命名為person.go.其代碼如下:

package models

import (
	"log"
	"fmt"
 db "GinLearn/GinLearn/database"
)
//表結構
type Person struct {
   Id        int    `json:"id" form:"id"`
   FirstName string `json:"first_name" form:"first_name"`
   LastName  string `json:"last_name" form:"last_name"`
}

//新增記錄
func (p *Person) AddPerson() bool {
   rs, err := db.SqlDB.Exec("INSERT INTO person(first_name, last_name) VALUES (?, ?)", p.FirstName, p.LastName)
   if err != nil {
     return false
   }
   id, err := rs.LastInsertId()
   fmt.Println(id)
   if err!=nil{
     return false
   }else{
     return true
   }
}

//修改記錄
func (p *Person) EditPerson() bool {
  rs, err := db.SqlDB.Exec("UPDATE person set first_name=?,last_name=? where id=?", p.FirstName, p.LastName,p.Id)
  if err != nil {
    return false
  }
  id, err := rs.RowsAffected()
  fmt.Println(id)
  if err!=nil{
    return false
  }else{
    return true
  }
}

//删除記錄
func DeletePerson(Id int) bool {
  rs, err := db.SqlDB.Exec("Delete From person where id=?", Id)
  if err != nil {
    return false
  }
  id, err := rs.RowsAffected()
  fmt.Println(id)
  if err!=nil{
    return false
  }else{
    return true
  }
}

//得到記錄清單
func GetPersonList(pageno,pagesize int,search string) (persons []Person) {

    fmt.Println("搜尋參數:"+search)
    persons = make([]Person, 0)
    //SQL查詢分頁語句
    if search!=""{
      rows, err := db.SqlDB.Query("SELECT id, first_name, last_name FROM person where 1=1 and last_name like '%"+search+"%' or first_name like '%"+search+"%' limit ?,?",(pageno-1)*pagesize,pagesize)
      if err != nil {
        return nil
       }
       defer rows.Close()
    
       //資料添加到資料集中
       for rows.Next() {
         var person Person
         rows.Scan(&person.Id, &person.FirstName, &person.LastName)
         persons = append(persons, person)
       }
       if err = rows.Err(); err != nil {
         return nil
       }
     
    }else{
      rows, err := db.SqlDB.Query("SELECT id, first_name, last_name FROM person where 1=1  limit ?,?",(pageno-1)*pagesize,pagesize)
      if err != nil {
        return nil
      }
      defer rows.Close()

    
     //資料添加到資料集中
     for rows.Next() {
       var person Person
       rows.Scan(&person.Id, &person.FirstName, &person.LastName)
       persons = append(persons, person)
      }
      if err = rows.Err(); err != nil {
       return nil
     }
  }
  return persons
}
//得到記錄數
func GetRecordNum(search string) int {
   num:=0;

  //SQL查詢分頁語句
  if search!=""{
    rows, err := db.SqlDB.Query("SELECT id, first_name, last_name FROM person where 1=1 and first_name like '%?%' or last_name '%?%'",search,search)
    if err != nil {
      return 0
     }
     defer rows.Close()
  
     //資料添加到資料集中
     for rows.Next() {
       num++;
     }
   
  }else{
    rows, err := db.SqlDB.Query("SELECT id, first_name, last_name FROM person where 1=1")
    if err != nil {
      return 0
    }
    defer rows.Close()

  
   //資料添加到資料集中
  //資料添加到資料集中
  for rows.Next() {
    num++;
  }
  
}
return num
}
//得到使用者資料
func  GetPersonById(Id int) (p *Person) {
 
  var person Person
  //根據ID查詢得到對象
  err := db.SqlDB.QueryRow("SELECT id, first_name, last_name FROM person WHERE id=?", Id).Scan(
    &person.Id, &person.FirstName, &person.LastName,
   )
 
   //列印錯誤
   if err != nil {
    log.Println(err)
   }
   //傳回對象
   return &person
}

　　

3>     控制器person.go,其代碼如下:

package apis

import (
	"fmt"
	"strconv"
  "net/http"
  "log"
  "github.com/gin-gonic/gin"
 . "GinLearn/GinLearn/models"
)
//初始頁面
func IndexApi(c *gin.Context) {
  c.String(http.StatusOK, "Hello World!")
}
//渲染html頁面
func ShowHtmlPage(c *gin.Context) {
  c.HTML(http.StatusOK, "index.html", gin.H{
      "title": "GIN: HTML頁面",
  })
}


//清單頁面
func ListHtml(c *gin.Context) {  
  c.HTML(http.StatusOK, "list.html", gin.H{
      "title": "GIN: 使用者清單頁面",
  })
}
//清單頁面資料
func GetDataList(c *gin.Context) {  
  //得到請求的參數
  search:=c.PostForm("search")
  num:=c.PostForm("pageno")
  pageno,err:= strconv.Atoi(num) 
  if err!=nil{
    log.Fatalln(err)
  }
  //得到資料集
  datalist:=GetPersonList(pageno,3,search)

  //得到記錄的總數
  count:=GetRecordNum(search)
 //傳回結果
 c.JSON(http.StatusOK, gin.H{
  "datalist": datalist,
  "count":count,
  "pagesize":3,
  "pageno":pageno,
 })
}
//清單頁面資料
func PageNextData(c *gin.Context) {  
  //得到請求的參數
  search:=c.PostForm("search")
  num:=c.PostForm("pageno")
  pageno,err:= strconv.Atoi(num) 
  if err!=nil{
    log.Fatalln(err)
  }
  //得到資料集
  datalist:=GetPersonList(pageno,3,search)

  //得到記錄的總數
  count:=GetRecordNum(search)
 //傳回結果
 c.JSON(http.StatusOK, gin.H{
  "datalist": datalist,
  "count":count,
  "pagesize":3,
  "pageno":pageno,
 })
}
//新增頁面
func AddHtml(c *gin.Context){
  c.HTML(http.StatusOK, "add.html", gin.H{
    "title": "GIN: 新增使用者頁面",
  })
}
//新增記錄
func AddPersonApi(c *gin.Context) {
 
   //得到請求的參數
   firstName := c.PostForm("first_name")
   lastName := c.PostForm("last_name")
   fmt.Println("執行到此處A")
   //指派
   p := Person{FirstName: firstName, LastName: lastName}
   //調用模型中的新增的方法
   ra:= p.AddPerson()
   //傳回結果
   c.JSON(http.StatusOK, gin.H{
    "success": ra,
  })
  c.Redirect(http.StatusOK,"/home/list")
}
//編輯頁面
func EditHtml(c *gin.Context){
  //得到URL請求的參數
  num:=c.Query("id")

  id,err:= strconv.Atoi(num) 
 
  if err!=nil{
    log.Fatalln(err)
  }

  p:=GetPersonById(id)
   if p==nil{
    fmt.Println("得到資料錯誤")
   }else{
    fmt.Println(p)
    fmt.Println("得到資料正确")
   }

  c.HTML(http.StatusOK, "edit.html", gin.H{
    "title": "GIN: 編輯使用者頁面",
    "id":p.Id,
    "firstname":p.FirstName,
    "lastname":p.LastName,
  })
}
//編輯記錄
func EditPersonApi(c *gin.Context) {
  fmt.Println("執行到此處")
  //得到請求的參數
  num:=c.PostForm("id")
  fmt.Println(num)
  id,err:= strconv.Atoi(num) 
  if err!=nil{
    log.Fatalln(err)
  }
  firstName := c.PostForm("first_name")
  lastName := c.PostForm("last_name")
  //指派
  p := GetPersonById(id)
  p.FirstName=firstName
  p.LastName=lastName
  //調用模型中的編輯的方法
  ra:= p.EditPerson()
  //傳回結果
  c.JSON(http.StatusOK, gin.H{
    "success": ra,
  })
  c.Redirect(http.StatusOK,"/home/list")
}

//删除記錄
func DeletePersonApi(c *gin.Context) {
 
  //得到請求的參數
   num:=c.PostForm("id")
   fmt.Println(num)
   id,err:= strconv.Atoi(num) 
   if err!=nil{
    log.Fatalln(err)
  }
  //調用模型中的删除的方法
  ra:= DeletePerson(id)
  if ra == false {
   log.Fatalln("删除失敗")
  }
  //傳回結果
  c.JSON(http.StatusOK, gin.H{
    "success": ra,
  })
}

4>     路由配置如下：

package routers

import (
  "github.com/gin-gonic/gin"
  . "GinLearn/GinLearn/apis"
 )
 
func InitRouter() *gin.Engine{
  router := gin.Default()
  //Hello World
  router.GET("/", IndexApi)
  //渲染html頁面
  router.LoadHTMLGlob("views/*")
  router.GET("/home/index", ShowHtmlPage)
  //清單頁面
  router.GET("/home/list", ListHtml)
  router.POST("/home/PageData", GetDataList)
  router.POST("/home/PageNextData", PageNextData)

  //新增頁面
  router.GET("/home/add", AddHtml)
  router.POST("/home/saveadd", AddPersonApi)
  
   //編輯頁面
   router.GET("/home/edit", EditHtml)
   router.POST("/home/saveedit", EditPersonApi)

    //删除
    router.POST("/home/delete", DeletePersonApi)
  return router
 }

5>     建立list.html作為分頁展示，建立add.html和edit.html頁面，作為資料的新增和編輯,其具體代碼如下:

1->list.html頁面代碼如下:

<!DOCTYPE html>
 
<html>
      <head>
        <title>首頁 - 使用者清單頁面</title>
        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
        <script type="text/javascript" src="/static/js/jquery.paginationNew.js"></script> 
        <style>
          .am-cf{
            height: 50px;          
            margin-top: 30px;
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
            margin-left: 40%;
          }
          .am-fr{
              float: left;
              line-height: 50px;
              text-align: center;
              vertical-align: middle;
              height: 50px;
              margin-top: -15px;
          }
          .am-pagination{
            list-style:none;
            height: 50px;    
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
          }
          .am-pagination li{
            float:left;
            margin-left: 10px;
          }
          .am-pagination li a{
            text-decoration:none;
          }
          .am-jl{
              float: left;
              margin-left: 20px;
          }
          .am-active{
              color: #f00;
          }
        </style>
      </head>
       
    <body>
     
        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">
      
          <input type="text" placeholder="請輸入名稱" id="txt_search"/>
          <button class="" onclick="search()">搜尋</button>

          <button class="" onclick="adddata()">新增</button>
        </div>
            
        <table class="table table-striped table-hover table-bordered ">
          <thead>
           <th style="text-align: center">ID</th>
           <th style="text-align: center">姓氏</th>
           <th style="text-align: center">名稱</th>
           <th style="text-align: center">操作</th>
         </thead>
        
         <tbody id="sortable">
         </tbody>
        </table> <!--分頁部分-->
        <div style="margin: 20px 0px 10px 0;">
         <table style="margin: 0 auto;">
             <tr>
                 <td>
                     <div id="pagination" class="pagination"></div>
                 </td>
             </tr>
         </table>
        </div>
          
        <script type="text/javascript">
            //頁面的初始化
            $(function () {            
              //分頁資料
              InitData();
            })
            //搜尋頁面
            function search(){
                var search = $("#txt_search").val();//名稱
                InitData();
            }
            //使用分頁插件pagination分頁顯示1
        function InitData() {
            var search = $("#txt_search").val();//名稱

            $.ajax({
                async: false,
                type: "post",
                url: "/home/PageData",
                data: {
                    search: search,
                    pageno:0
                },
                success: function (data) {
                    console.log('首頁資料')
                    console.log(data)      
                    var Count = data.count
                    var PageSize = data.pagesize;
                    var Page =data.pageno;
                    $("#pagination").pagination(Count, {
                        callback: pageselectCallback,
                        num_edge_entries: 1,
                        prev_text: "上一頁",
                        prev_show_always: true,
                        next_text: "下一頁",
                        next_show_always: true,
                        items_per_page: PageSize,
                        current_page: Page,
                        link_to: '#__aurl=!/home/PageData',
                        num_display_entries: 4
                    });
                }
            });
        }

        //使用分頁插件分頁後的回調函數2
        function pageselectCallback(page_id, jq) {
            var search = $("#txt_search").val();//名稱

            $.ajax({
                async: false,
                type: "post",
                url: "/home/PageNextData",
                data: {
                    search: search,
                    pageno: (parseInt(page_id) + parseInt(1)),
                },
                success: function (data) {
                    console.log('下一頁的資料')
                    console.log(data)
                    console.log(data.datalist)
                    htmlData(data.datalist)
                }
            });
        }
        function htmlData(data){
             var html='';
             for(var i=0;i<data.length;i++){
                html+='<tr class="sort-item"  id="module_'+data[i].id+'" value="'+data[i].id+'">';  
                html+='   <td style="text-align: center;width: 350px;"><span class="label label-default" >'+data[i].id+'</span></td>';  
                html+='   <td style="text-align: center;width: 350px;" ><strong>'+data[i].first_name+'</strong></td>';  
                html+='   <td style="text-align: center;width: 350px;" ><strong>'+data[i].last_name+'</strong></td>';  
                html+='   <td style="text-align: center;width: 350px;"><button onclick="editdata('+data[i].id+')">編輯</button><button onclick="deletedata('+data[i].id+')">删除</button></td>';                   
                html+='</tr>';  
             }
              
             $("#sortable").html(html);
        }

        //新增資料
        function adddata(){
            window.location.href="/home/add";  
        }  

        //編輯資料
        function editdata(id){
            window.location.href="/home/edit?id="+id; 
        }

        //删除資料
        function deletedata(id){
            $.ajax({
                async: false,
                type: "post",
                url: "/home/delete",
                data: {
                    id: id
                },
                success: function (data) {
                    if(data){
                        alert("删除成功")
                        //初始化資料
                        InitData();
                    }else{
                        alert("删除失敗")
                    }
                }
            });
        }
        </script>
    </body>
</html>

2->add.html頁面代碼如下:

<!DOCTYPE html>
 
<html>
    <head>
      <title>首頁 - 新增使用者頁面</title>
      <link rel="shortcut icon" href="/static/img/favicon.png" />  
      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
      <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
      <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>    
    </head>
       
    <body>
      <div class="container">        
           <div class="form-group">
               <label for="text">姓氏:</label>
               <input type="text" class="form-control" id="firstname" placeholder="姓氏" />
           </div>
           <div class="form-group">
               <label for="number">名稱:</label>
               <input type="text" class="form-control" id="lastname" placeholder="名稱" />
            </div>
            <button class="btn btn-default" onclick="save()">送出</button>
            <button class="btn btn-primary" onclick="reset()"></button>>重置</button>
       </div>
    <!--Js部分-->   
    <script type="text/javascript">
       //儲存
       function save(){

        $.ajax({
            type: "post",
            url: "/home/saveadd",
            data: {
                "first_name":$("#firstname").val(),
                "last_name":$("#lastname").val(),
            },
            success: function (data) {
               
                console.log(data)
                if(data){
                    alert("新增成功")
                    window.location.href="/home/list";                   
                }else{
                    alert("新增失敗")
                    return false;
                }
            }
        });
       }
       //重置
       function reset(){
        $("#firstname").val('');
        $("#lastname").val('');
       }
    </script>
    </body>
</html>

3->edit.html頁面代碼如下:

<!DOCTYPE html>
 
<html>
    <head>
      <title>首頁 - 新增使用者頁面</title>
      <link rel="shortcut icon" href="/static/img/favicon.png" />  
      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
      <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
      <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>    
    </head>
       
    <body>
      <div class="container">
        
           <div class="form-group">
               <label for="text">姓氏:</label>
               <input type="text" class="form-control" id="firstname" placeholder="姓氏" value="{{.firstname}}"/>
           </div>
           <div class="form-group">
               <label for="number">名稱:</label>
               <input type="text" class="form-control" id="lastname" placeholder="名稱" value="{{.lastname}}"/>
            </div>
            <input type="hidden" id="idval" value="{{.id}}"/>
            <button class="btn btn-default" onclick="save()">送出</button>
            <button class="btn btn-primary" onclick="reset()">重置</button>
         
       </div>
    <!--Js部分-->   
    <script type="text/javascript">
       //儲存
       function save(){
        $.ajax({
            type: "post",
            url: "/home/saveedit",
            data: {
                "id": $("#idval").val(),
                "first_name":$("#firstname").val(),
                "last_name":$("#lastname").val(),
            },
            success: function (data) {
                console.log(data)
                if(data.success){
                    alert("儲存成功")
                    window.location.href="/home/list";
                }else{
                    alert("儲存失敗")
                }
            }
        });
       }
        //重置
       function reset(){
        $("#firstname").val('');
        $("#lastname").val('');
       }
    </script>
    </body>
</html>

6>     Main.go的代碼如下:

package main

import (
 db "GinLearn/GinLearn/database"
 router "GinLearn/GinLearn/routers"
)

func main() {
   //資料庫
   defer db.SqlDB.Close()

   //路由部分
   router:=router.InitRouter()

   //靜态資源
   router.Static("/static", "./static")

   //運作的端口
   router.Run(":8000")

}

7>     資料庫配置檔案mysql.go的代碼如下:

package database

import (
 "database/sql"
 _ "github.com/go-sql-driver/mysql"
 "log"
)

var SqlDB *sql.DB

func init() {
 var err error
 SqlDB, err = sql.Open("mysql", "root:123456@tcp(192.168.1.87:3306)/test?parseTime=true")
 if err != nil {
  log.Fatal(err.Error())
 }
 err = SqlDB.Ping()
 if err != nil {
  log.Fatal(err.Error())
 }
}

8>     運作起來的效果如下:

Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁
Gin-Go學習筆記三：Gin-Web架構 JS分頁

9>     下一章節，講bootstrap布局

上一篇: Gin-Go學習筆記七：Gin-Web架構 布局頁面
下一篇: node.js基本工作原理及流程