Verwenden Sie das Gin-Framework, um Datenvisualisierungs- und Berichtsfunktionen zu implementieren

In der modernen Softwareentwicklung erhalten Datenvisualisierungs- und Berichtsfunktionen immer mehr Aufmerksamkeit, da sie Benutzern helfen können, Daten besser zu verstehen und zu analysieren, und Unternehmen dabei helfen können, ihr Geschäft besser zu verwalten und Entscheidungen zu treffen. In diesem Artikel stellen wir vor, wie das Gin-Framework zur Implementierung von Datenvisualisierungs- und Berichtsfunktionen verwendet wird, um den Lesern das Erlernen und Anwenden dieser Technologie zu erleichtern.

Das Gin-Framework ist ein leichtes Web-Framework, das auf der Go-Sprache basiert und sich durch hohe Leistung und einfache Verwendung auszeichnet. Das Designkonzept besteht darin, eine Reihe grundlegender Tools (Routing, Middleware, Rendering) bereitzustellen, um die Grundanforderungen der Webentwicklung zu erfüllen, und kann problemlos erweitert und angepasst werden. Daher können mit dem Gin-Framework schnell effiziente, skalierbare und leicht zu wartende Webanwendungen entwickelt werden.

Die in diesem Artikel vorgestellten Datenvisualisierungs- und Berichtsfunktionen basieren auf der RESTful-API, die vom Gin-Framework bereitgestellt wird, und dem Front-End-Framework, das von Vue.js bereitgestellt wird. Vue.js ist ein beliebtes JavaScript-Framework, das die datengesteuerte Komponentenentwicklung unterstützt und so die Entwicklung komplexer Front-End-Anwendungen erleichtert. Gleichzeitig bietet Vue.js auch eine Fülle von Plug-Ins und Komponenten zur Implementierung von Datenvisualisierungs- und Berichtsfunktionen, beispielsweise Plug-Ins wie ECharts und DataTables.

Zuerst müssen wir eine Webanwendung basierend auf dem Gin-Framework erstellen und einige RESTful-APIs definieren, um Datenanfragen zu verarbeiten. In diesem Beispiel gehen wir davon aus, dass wir einige Verkaufsdaten anzeigen müssen, darunter Verkäufe, Bestellvolumen, Produktkategorien usw. Wir können die folgende API definieren:

• GET /api/sales: Gibt eine Liste aller Verkaufsdaten zurück.
• GET /api/sales/:id: Gibt detaillierte Informationen zu bestimmten Verkaufsdaten zurück.
• POST /api/sales: Erstellen Sie neue Verkaufsdaten.
• PUT /api/sales/:id: Aktualisieren Sie die Informationen bestimmter Verkaufsdaten.
• DELETE /api/sales/:id: Bestimmte Verkaufsdaten löschen.

Es ist sehr einfach, die API im Gin-Framework zu definieren. Sie müssen lediglich die entsprechende HTTP-Methode und den entsprechenden HTTP-Pfad verwenden und die entsprechende Verarbeitungsfunktion binden. Zum Beispiel:

func main() {
    r := gin.Default()

    r.GET("/api/sales", getSales)
    r.GET("/api/sales/:id", getSale)
    r.POST("/api/sales", createSale)
    r.PUT("/api/sales/:id", updateSale)
    r.DELETE("/api/sales/:id", deleteSale)

    r.Run()
}

func getSales(c *gin.Context) {
    // TODO: 返回所有销售数据的列表。
}

func getSale(c *gin.Context) {
    id := c.Param("id")
    // TODO: 返回某个特定销售数据的详细信息。
}

func createSale(c *gin.Context) {
    // TODO: 创建一条新的销售数据。
}

func updateSale(c *gin.Context) {
    id := c.Param("id")
    // TODO: 更新某个特定销售数据的信息。
}

func deleteSale(c *gin.Context) {
    id := c.Param("id")
    // TODO: 删除某个特定销售数据。
}

Als nächstes müssen wir Vue.js verwenden, um die Front-End-Anwendung zu erstellen, und Plug-Ins wie ECharts und DataTables verwenden, um Datenvisualisierungs- und Berichtsfunktionen zu implementieren. Zuerst müssen wir Vue.js verwenden, um eine einfache Seite zu erstellen, die eine Tabelle und einige Diagramme enthält, um Verkaufsdaten anzuzeigen. Zum Beispiel:

<template>
  <div>
    <div>
      <table id="sales-table"></table>
    </div>
    <div>
      <div id="sales-chart1"></div>
      <div id="sales-chart2"></div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import 'datatables.net-bs4'
import echarts from 'echarts'

export default {
  name: 'SalesPage',
  data () {
    return {
      sales: []
    }
  },
  mounted () {
    this.loadSales()
  },
  methods: {
    loadSales () {
      $.ajax({
        url: '/api/sales',
        type: 'GET',
        success: (data) => {
          this.sales = data
          this.renderTable()
          this.renderCharts()
        }
      })
    },
    renderTable () {
      $('#sales-table').DataTable({
        data: this.sales,
        columns: [
          { title: 'ID', data: 'id' },
          { title: 'Amount', data: 'amount' },
          { title: 'Quantity', data: 'quantity' },
          { title: 'Product', data: 'product' },
          { title: 'Category', data: 'category' }
        ]
      })
    },
    renderCharts () {
      const chart1 = echarts.init(document.getElementById('sales-chart1'))
      const chart2 = echarts.init(document.getElementById('sales-chart2'))

      // TODO: 渲染图表数据。
    }
  }
}
</script>

Auf dieser Seite verwenden wir DataTables, um Verkaufsdaten in einer Tabelle anzuzeigen, und ECharts, um Verkaufsdaten in Form von Diagrammen anzuzeigen. Wir haben GET /api/sales einmal in der Methode „loadSales“ aufgerufen, um die Verkaufsdaten zu laden, und die Verkaufsdaten an die Methoden „renderTable“ und „renderCharts“ übergeben, um DataTables und ECharts zum Rendern der Daten zu verwenden. In der renderTables-Methode verwenden wir das DataTable-Plugin von jQuery zum Rendern der Tabellen und in der renderCharts-Methode verwenden wir ECharts zum Rendern der Diagramme.

Als nächstes müssen wir die in der RESTful-API definierten Verarbeitungsfunktionen implementieren, um Datenanfragen zu verarbeiten. In diesem Beispiel können wir SQLite als Datenbank und Gorm als ORM-Framework zum Betrieb der Datenbank verwenden. Gleichzeitig müssen wir auch einige Plug-Ins verwenden, die uns bei der Datenverarbeitung und -überprüfung helfen, wie z. B. Gommon/Validierung und andere Plug-Ins. Zum Beispiel:

import (
  "github.com/gin-gonic/gin"
  "github.com/jinzhu/gorm"
  _ "github.com/mattn/go-sqlite3"
  "github.com/wbsnail/articles/GinDataVisualization/internal/sales"
  "gopkg.in/go-playground/validator.v9"
)

type SaleInput struct {
  Amount   float64 `json:"amount" validate:"required"`
  Quantity int     `json:"quantity" validate:"required"`
  Product  string  `json:"product" validate:"required"`
  Category string  `json:"category" validate:"required"`
}

func main() {
  db, err := gorm.Open("sqlite3", "sales.db")
  if err != nil {
    panic("failed to connect database")
  }
  defer db.Close()

  db.AutoMigrate(&sales.Sale{})

  r := gin.Default()

  r.GET("/api/sales", getSales)
  r.GET("/api/sales/:id", getSale)
  r.POST("/api/sales", createSale)
  r.PUT("/api/sales/:id", updateSale)
  r.DELETE("/api/sales/:id", deleteSale)

  r.Run()
}

func getSales(c *gin.Context) {
  db := c.MustGet("db").(*gorm.DB)
  var sales []sales.Sale
  db.Find(&sales)
  c.JSON(http.StatusOK, sales)
}

func getSale(c *gin.Context) {
  db := c.MustGet("db").(*gorm.DB)
  var sale sales.Sale
  if err := db.Where("id = ?", c.Param("id")).First(&sale).Error; err != nil {
    c.AbortWithStatus(http.StatusNotFound)
  } else {
    c.JSON(http.StatusOK, sale)
  }
}

func createSale(c *gin.Context) {
  db := c.MustGet("db").(*gorm.DB)
  var input SaleInput
  if err := c.ShouldBindJSON(&input); err != nil {
    c.AbortWithStatus(http.StatusBadRequest)
  } else if err := validate.Struct(input); err != nil {
    c.AbortWithStatus(http.StatusBadRequest)
  } else {
    sale := sales.Sale{Amount: input.Amount, Quantity: input.Quantity, Product: input.Product, Category: input.Category}
    db.Create(&sale)
    c.JSON(http.StatusOK, sale)
  }
}

func updateSale(c *gin.Context) {
  db := c.MustGet("db").(*gorm.DB)
  var input SaleInput
  if err := c.ShouldBindJSON(&input); err != nil {
    c.AbortWithStatus(http.StatusBadRequest)
  } else if err := validate.Struct(input); err != nil {
    c.AbortWithStatus(http.StatusBadRequest)
  } else {
    var sale sales.Sale
    if err := db.Where("id = ?", c.Param("id")).First(&sale).Error; err != nil {
      c.AbortWithStatus(http.StatusNotFound)
    } else {
      sale.Amount = input.Amount
      sale.Quantity = input.Quantity
      sale.Product = input.Product
      sale.Category = input.Category
      db.Save(&sale)
      c.JSON(http.StatusOK, sale)
    }
  }
}

func deleteSale(c *gin.Context) {
  db := c.MustGet("db").(*gorm.DB)
  var sale sales.Sale
  if err := db.Where("id = ?", c.Param("id")).First(&sale).Error; err != nil {
    c.AbortWithStatus(http.StatusNotFound)
  } else {
    db.Delete(&sale)
    c.Status(http.StatusOK)
  }
}

In diesem Beispiel definieren wir eine SaleInput-Struktur, um das Eingabeformat von Verkaufsdaten darzustellen, und verwenden „Validate“, um die Rechtmäßigkeit der Eingabedaten zu überprüfen. In den Methoden createSale und updateSale konvertieren wir die Eingabedaten in eine Sale-Struktur und verwenden db.Create und db.Save, um Verkaufsdaten zu erstellen oder zu aktualisieren. In den Methoden getSales, getSale und deleteSale verwenden wir db.Find, db.Where und db.Delete, um Verkaufsdaten abzufragen und zu löschen. In allen Verarbeitungsfunktionen verwenden wir db := c.MustGet("db").(*gorm.DB), um das Datenbankverbindungsobjekt abzurufen. Dies liegt daran, dass wir beim Erstellen der Anwendung eines registriert haben, um eine Datenbankverbindung herzustellen und speichern Sie das Verbindungsobjekt in c.Keys["db"], damit wir das Verbindungsobjekt in jeder Anforderungsverarbeitungsfunktion verwenden können.

Schließlich müssen wir die Webseite und die RESTful-API über das Gin-Framework binden, damit Benutzer durch Zugriff auf die Webseite auf Daten zugreifen und diese bedienen können. In diesem Beispiel können wir die vom Gin-Framework bereitgestellte HTML-Render- (oder JSON-Render-)Middleware verwenden, um die Webseite und die RESTful-API zu binden. Zum Beispiel:

func main() {
  db, err := gorm.Open("sqlite3", "sales.db")
  if err != nil {
    panic("failed to connect database")
  }
  defer db.Close()

  db.AutoMigrate(&sales.Sale{})

  r := gin.Default()

  r.Use(func(c *gin.Context) {
    c.Set("db", db)
    c.Next()
  })

  r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", nil)
  })

  r.GET("/api/sales", getSales)
  r.GET("/api/sales/:id", getSale)
  r.POST("/api/sales", createSale)
  r.PUT("/api/sales/:id", updateSale)
  r.DELETE("/api/sales/:id", deleteSale)

  r.Run()
}

In diesem Beispiel haben wir eine Middleware registriert, um das Datenbankverbindungsobjekt in c.Keys["db"] zu speichern, dann eine GET/Anfrage gebunden und die HTML-Render-Middleware verwendet, um die Index-.html-Seite zu rendern. Auf diese Weise können wir auf die Webseite zugreifen, indem wir auf http://localhost:8080 zugreifen.

Zusammenfassend lässt sich sagen, dass die Verwendung des Gin-Frameworks zur Implementierung von Datenvisualisierungs- und Berichtsfunktionen eine sehr praktische und nützliche Technologie ist. Sie kann uns helfen, Geschäftsdaten besser zu verstehen und zu analysieren, bessere Entscheidungen zu treffen und die Effizienz der Unternehmensverwaltung zu verbessern. Durch das Studium und die Praxis dieses Artikels können wir diese Technologie besser beherrschen und auf die tatsächliche Entwicklung anwenden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie das Gin-Framework, um Datenvisualisierungs- und Berichtsfunktionen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!