Go で AG-Grid の API を作成する

AG-Grid は強力な JavaScript データ グリッド ライブラリであり、並べ替え、フィルタリング、ページネーションなどの機能を備えた動的で高性能なテーブルの構築に最適です。この記事では、AG-Grid をサポートする API を Go で作成し、フィルタリング、並べ替え、ページネーションなどの効率的なサーバー側のデータ操作を可能にします。 AG-Grid を Go API と統合することで、大規模なデータセットを操作する場合でもスムーズなパフォーマンスを保証する堅牢なソリューションを開発します。

前提条件

• Go 1.21
• MySQL

プロジェクトのセットアップ

Go プロジェクトの依存関係を設定します。

go mod init app
go get github.com/gin-gonic/gin
go get gorm.io/gorm
go get gorm.io/driver/mysql
go get github.com/joho/godotenv

「example」という名前のテスト データベースを作成し、database.sql ファイルを実行してテーブルとデータをインポートします。

プロジェクトの構造

├─ .env
├─ main.go
├─ config
│  └─ db.go
├─ controllers
│  └─ product_controller.go
├─ models
│  └─ product.go
├─ public
│  └─ index.html
└─ router
   └─ router.go

プロジェクトファイル

.env

このファイルにはデータベース接続情報が含まれています。

DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=example
DB_USER=root
DB_PASSWORD=

db.go

このファイルは、GORM を使用してデータベース接続を設定します。これは、アプリケーションで後で使用するデータベース接続インスタンスを保持するグローバル変数 DB を宣言します。

package config

import (
    "fmt"
    "os"

    "github.com/joho/godotenv"
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
    "gorm.io/gorm/schema"
)

var DB *gorm.DB

func SetupDatabase() {
    godotenv.Load()
    connection := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s?charset=utf8mb4&parseTime=true", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD"), os.Getenv("DB_HOST"), os.Getenv("DB_PORT"), os.Getenv("DB_DATABASE"))
    db, _ := gorm.Open(mysql.Open(connection), &gorm.Config{NamingStrategy: schema.NamingStrategy{SingularTable: true}})
    DB = db
}

ルーター.ゴー

このファイルは、Gin Web アプリケーションのルーティングを設定します。 DataTables API のルーターを初期化し、ルート URL で静的なindex.html ファイルを提供します。

package router

import (
    "app/controllers"

    "github.com/gin-gonic/gin"
)

func SetupRouter() {
    productController := controllers.ProductController{}
    router := gin.Default()
    router.StaticFile("/", "./public/index.html")
    router.GET("/api/products", productController.Index)
    router.Run()
}

製品.go

このファイルは、アプリケーションの製品モデルを定義します。

package models

type Product struct {
    Id int
    Name string
    Price float64
}

product_controller.go

このファイルは、受信リクエストを処理し、DataTables データを返す関数を定義します。

package controllers

import (
    "app/config"
    "app/models"
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
)

type ProductController struct {
}

func (con *ProductController) Index(c *gin.Context) {
    size, _ := strconv.Atoi(c.DefaultQuery("length", "10"))
    start, _ := strconv.Atoi(c.Query("start"))
    order := "id"
    if c.Query("order[0][column]") != "" {
        order = c.Query("columns[" + c.Query("order[0][column]") + "][data]")
    }
    direction := c.DefaultQuery("order[0][dir]", "asc")
    var products []models.Product
    query := config.DB.Model(&products)
    var recordsTotal, recordsFiltered int64
    query.Count(&recordsTotal)
    search := c.Query("search[value]")
    if search != "" {
        search = "%" + search + "%"
        query.Where("name like ?", search)
    }
    query.Count(&recordsFiltered)
    query.Order(order + " " + direction).
        Offset(start).
        Limit(size).
        Find(&products)
    c.JSON(http.StatusOK, gin.H{"draw": c.Query("draw"), "recordsTotal": recordsTotal, "recordsFiltered": recordsFiltered, "data": products})
}

product_controller.go ファイルは、Gin フレームワークを使用して Go アプリケーションで製品関連の API リクエストを管理するためのコントローラーを定義します。これには、ページ分割、並べ替え、および検索のためのクエリ パラメーターに基づいて、ページ分割された製品のリストを取得する Index メソッドが備えられています。このメソッドは、ページネーションのパラメータを抽出し、データベースから製品を取得するクエリを構築し、検索語が指定されている場合はフィルタリングを適用します。一致する製品の合計をカウントした後、製品データと合計数を含む JSON 応答を返す前に、結果を順序付けして制限し、フロントエンド アプリケーションとの統合を容易にします。

メイン.ゴー

このファイルは、アプリケーションのメインのエントリ ポイントです。これにより、Gin Web アプリケーションが作成および設定されます。

package main

import (
    "app/config"
    "app/router"
)

func main() {
    config.SetupDatabase()
    router.SetupRouter()
}

インデックス.html

    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>


    <div>



<p>The index.html file sets up a web page that uses the AG-Grid library to display a dynamic data grid for products. It includes a grid styled with the AG-Grid theme and a JavaScript section that constructs query parameters for pagination, sorting, and filtering. The grid is configured with columns for ID, Name, and Price, and it fetches product data from an API endpoint based on user interactions. Upon loading, the grid is initialized, allowing users to view and manipulate the product list effectively.</p>

<h2>
  
  
  Run project
</h2>



<pre class="brush:php;toolbar:false">go run main.go

Web ブラウザを開いて http://localhost:8080 に移動します

このテスト ページが表示されます。

テスト

ページサイズのテスト

[ページ サイズ] ドロップダウンから 50 を選択して、ページ サイズを変更します。ページごとに 50 レコードが取得され、最後のページは 5 から 2 に変更されます。

選別試験

最初の列のヘッダーをクリックします。 id 列が降順でソートされていることがわかります。

検索テスト

「名前」列の検索テキストボックスに「no」と入力すると、フィルタリングされた結果データが表示されます。

結論

結論として、私たちは AG-Grid を Go API と効果的に統合して、堅牢で効率的なデータ グリッド ソリューションを作成しました。 Go のバックエンド機能を利用することで、AG-Grid がサーバー側のフィルタリング、並べ替え、ページネーションを処理できるようになり、大規模なデータセットでもスムーズなパフォーマンスを確保できました。この統合により、データ管理が最適化されるだけでなく、フロントエンドの動的で応答性の高いテーブルによるユーザー エクスペリエンスも向上します。 AG-Grid と Go が連携して動作することで、現実世界のアプリケーションに適したスケーラブルで高性能なグリッド システムを構築しました。

ソースコード: https://github.com/stackpuz/Example-AG-Grid-Go

数分で CRUD Web アプリを作成: https://stackpuz.com