Erstellen Sie eine API für AG-Grid mit Go

AG-Grid ist eine leistungsstarke JavaScript-Datengitterbibliothek, die sich ideal zum Erstellen dynamischer Hochleistungstabellen mit Funktionen wie Sortieren, Filtern und Paginierung eignet. In diesem Artikel erstellen wir eine API in Go zur Unterstützung von AG-Grid, die effiziente serverseitige Datenoperationen ermöglicht, einschließlich Filterung, Sortierung und Paginierung. Durch die Integration von AG-Grid mit der Go-API entwickeln wir eine robuste Lösung, die eine reibungslose Leistung auch bei der Arbeit mit großen Datensätzen gewährleistet.

Voraussetzungen

• Gehen Sie 1,21
• MySQL

Setup-Projekt

Einrichten der Go-Projektabhängigkeiten.

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

Erstellen Sie eine Testdatenbank mit dem Namen „example“ und führen Sie die Datei „database.sql“ aus, um die Tabelle und die Daten zu importieren.

Projektstruktur

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

Projektdateien

.env

Diese Datei enthält die Datenbankverbindungsinformationen.

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

db.go

Diese Datei richtet die Datenbankverbindung mithilfe von GORM ein. Es deklariert eine globale Variable DB, um die Datenbankverbindungsinstanz zur späteren Verwendung in unserer Anwendung zu speichern.

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
}

router.go

Diese Datei richtet das Routing für eine Gin-Webanwendung ein. Es initialisiert einen Router für eine DataTables-API und stellt eine statische index.html-Datei unter der Stamm-URL bereit.

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

Produkt.go

Diese Datei definiert das Produktmodell für die Anwendung.

package models

type Product struct {
    Id int
    Name string
    Price float64
}

product_controller.go

Diese Datei definiert eine Funktion zur Verarbeitung eingehender Anfragen und zur Rückgabe der DataTables-Daten.

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

Die Datei „product_controller.go“ definiert einen Controller zum Verwalten produktbezogener API-Anfragen in einer Go-Anwendung mithilfe des Gin-Frameworks. Es verfügt über eine Index-Methode, die eine paginierte Liste von Produkten basierend auf Abfrageparametern für Paginierung, Sortierung und Suche abruft. Die Methode extrahiert Parameter für die Paginierung, erstellt eine Abfrage zum Abrufen von Produkten aus der Datenbank und wendet eine Filterung an, wenn ein Suchbegriff angegeben wird. Nach der Zählung der gesamten übereinstimmenden Produkte werden die Ergebnisse sortiert und begrenzt, bevor eine JSON-Antwort mit den Produktdaten und der Gesamtzahl zurückgegeben wird, was die Integration mit Frontend-Anwendungen erleichtert.

main.go

Diese Datei ist der Haupteinstiegspunkt unserer Anwendung. Es wird die Gin-Webanwendung erstellt und eingerichtet.

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

Öffnen Sie den Webbrowser und gehen Sie zu http://localhost:8080

Sie finden diese Testseite.

Testen

Seitengrößentest

Ändern Sie die Seitengröße, indem Sie im Dropdown-Menü „Seitengröße“ den Wert 50 auswählen. Sie erhalten 50 Datensätze pro Seite und die letzte Seite ändert sich von 5 auf 2.

Sortiertest

Klicken Sie auf die Überschrift der ersten Spalte. Sie werden sehen, dass die ID-Spalte in absteigender Reihenfolge sortiert wird.

Suchtest

Geben Sie „Nein“ in das Suchtextfeld der Spalte „Name“ ein und Sie sehen die gefilterten Ergebnisdaten.

Abschluss

Zusammenfassend lässt sich sagen, dass wir AG-Grid effektiv mit einer Go-API integriert haben, um eine robuste und effiziente Daten-Grid-Lösung zu schaffen. Durch die Nutzung der Backend-Funktionen von Go haben wir AG-Grid in die Lage versetzt, serverseitige Filterung, Sortierung und Paginierung durchzuführen und so eine reibungslose Leistung auch bei großen Datensätzen sicherzustellen. Diese Integration optimiert nicht nur die Datenverwaltung, sondern verbessert auch das Benutzererlebnis durch dynamische, reaktionsfähige Tabellen im Frontend. Durch die harmonische Zusammenarbeit von AG-Grid und Go haben wir ein skalierbares und leistungsstarkes Grid-System aufgebaut, das sich gut für reale Anwendungen eignet.

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

Erstellen Sie in wenigen Minuten eine CRUD-Web-App: https://stackpuz.com