Créez une API pour AG-Grid avec Go

AG-Grid est une puissante bibliothèque de grilles de données JavaScript, idéale pour créer des tableaux dynamiques et performants avec des fonctionnalités telles que le tri, le filtrage et la pagination. Dans cet article, nous allons créer une API dans Go pour prendre en charge AG-Grid, permettant des opérations de données efficaces côté serveur, notamment le filtrage, le tri et la pagination. En intégrant AG-Grid à l'API Go, nous développerons une solution robuste qui garantit des performances fluides, même lorsque vous travaillez avec de grands ensembles de données.

Conditions préalables

• Allez 1.21
• MySQL

Projet d'installation

Configuration des dépendances du projet 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

Créez une base de données de test nommée "exemple" et exécutez le fichier database.sql pour importer la table et les données.

Structure du projet

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

Fichiers de projet

.env

Ce fichier contient les informations de connexion à la base de données.

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

db.go

Ce fichier configure la connexion à la base de données à l'aide de GORM. Il déclare une variable globale DB pour contenir l'instance de connexion à la base de données à utiliser plus tard dans notre application.

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
}

routeur.go

Ce fichier configure le routage pour une application Web Gin. Il initialise un routeur pour une API DataTables et sert un fichier index.html statique à l'URL racine.

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()
}

produit.go

Ce fichier définit le modèle de produit pour l'application.

package models

type Product struct {
    Id int
    Name string
    Price float64
}

product_controller.go

Ce fichier définit une fonction pour gérer les requêtes entrantes et renvoyer les données 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})
}

Le fichier product_controller.go définit un contrôleur pour gérer les requêtes API liées au produit dans une application Go utilisant le framework Gin. Il comporte une méthode Index qui récupère une liste paginée de produits en fonction des paramètres de requête pour la pagination, le tri et la recherche. La méthode extrait les paramètres de pagination, construit une requête pour récupérer les produits de la base de données et applique un filtrage si un terme de recherche est fourni. Après avoir compté le nombre total de produits correspondants, il ordonne et limite les résultats avant de renvoyer une réponse JSON contenant les données du produit et le nombre total, facilitant ainsi l'intégration avec les applications frontales.

main.go

Ce fichier est le point d'entrée principal de notre application. Il créera et configurera l'application web Gin.

package main

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

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

index.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

Ouvrez le navigateur Web et accédez à http://localhost:8080

Vous trouverez cette page de test.

Essai

Test de taille de page

Modifiez la taille de la page en sélectionnant 50 dans la liste déroulante « Taille de la page ». Vous obtiendrez 50 enregistrements par page, et la dernière page passera de 5 à 2.

Test de tri

Cliquez sur l'en-tête de la première colonne. Vous verrez que la colonne id sera triée par ordre décroissant.

Test de recherche

Entrez « non » dans la zone de texte de recherche de la colonne « Nom » et vous verrez les données de résultat filtrées.

Conclusion

En conclusion, nous avons efficacement intégré AG-Grid avec une API Go pour créer une solution de grille de données robuste et efficace. En utilisant les capacités backend de Go, nous avons permis à AG-Grid de gérer le filtrage, le tri et la pagination côté serveur, garantissant ainsi des performances fluides même avec de grands ensembles de données. Cette intégration optimise non seulement la gestion des données, mais améliore également l'expérience utilisateur avec des tableaux dynamiques et réactifs sur le frontend. En travaillant en harmonie avec AG-Grid et Go, nous avons construit un système de grille évolutif et performant, bien adapté aux applications du monde réel.

Code source : https://github.com/stackpuz/Example-AG-Grid-Go

Créez une application Web CRUD en quelques minutes : https://stackpuz.com