Maison développement back-end Golang Utilisez le framework Gin pour implémenter des fonctions de visualisation de données et de reporting

Utilisez le framework Gin pour implémenter des fonctions de visualisation de données et de reporting

Jun 22, 2023 pm 08:49 PM
数据可视化 gin框架 报表功能

Dans le développement de logiciels modernes, les fonctions de visualisation et de reporting des données reçoivent de plus en plus d'attention, car elles peuvent aider les utilisateurs à mieux comprendre et analyser les données, et aider les entreprises à mieux gérer leur activité et prendre des décisions. Dans cet article, nous présenterons comment utiliser le framework Gin pour implémenter des fonctions de visualisation de données et de reporting afin d'aider les lecteurs à mieux apprendre et appliquer cette technologie.

Le framework Gin est un framework web léger basé sur le langage Go et présente les caractéristiques de hautes performances et de simplicité d'utilisation. Son concept de conception est de fournir un ensemble d'outils de base (routage, middleware, rendu) pour répondre aux besoins fondamentaux du développement Web, et peut être facilement étendu et personnalisé. Par conséquent, des applications Web efficaces, évolutives et faciles à maintenir peuvent être rapidement développées à l’aide du framework Gin.

Les fonctions de visualisation de données et de reporting présentées dans cet article sont basées sur l'API RESTful fournie par le framework Gin et le framework front-end fourni par Vue.js. Vue.js est un framework JavaScript populaire qui prend en charge le développement de composants basés sur les données, facilitant ainsi le développement d'applications frontales complexes. Dans le même temps, Vue.js fournit également une multitude de plug-ins et de composants pour implémenter des fonctions de visualisation de données et de reporting, tels que des plug-ins tels que ECharts et DataTables.

Tout d'abord, nous devons créer une application Web basée sur le framework Gin et définir des API RESTful pour gérer les demandes de données. Dans cet exemple, nous supposons que nous devons afficher certaines données de ventes, notamment les ventes, le volume des commandes, les catégories de produits, etc. Nous pouvons définir l'API suivante :

  • GET /api/sales : renvoie une liste de toutes les données de vente.
  • GET /api/sales/:id : renvoie des informations détaillées sur des données de vente spécifiques.
  • POST /api/sales : Créez de nouvelles données de vente.
  • PUT /api/sales/:id : Mettre à jour les informations d'une donnée de vente spécifique.
  • DELETE /api/sales/:id : Supprimez des données de vente spécifiques.

Il est très simple de définir l'API dans le framework Gin. Il vous suffit d'utiliser la méthode et le chemin HTTP correspondants, et de lier la fonction de traitement correspondante. Par exemple :

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: 删除某个特定销售数据。
}
Copier après la connexion

Ensuite, nous devons utiliser Vue.js pour créer l'application frontale et utiliser des plug-ins tels que ECharts et DataTables pour implémenter des fonctions de visualisation de données et de reporting. Tout d'abord, nous devons utiliser Vue.js pour créer une page simple, comprenant un tableau et des graphiques, pour afficher les données de ventes. Par exemple :

<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>
Copier après la connexion

Dans cette page, nous utilisons des DataTables pour afficher les données de ventes dans un tableau, et des ECharts pour afficher les données de ventes sous forme de graphiques. Nous avons appelé GET /api/sales une fois dans la méthode loadSales pour charger les données de ventes, et avons transmis les données de ventes aux méthodes renderTable et renderCharts pour utiliser DataTables et ECharts pour restituer les données. Dans la méthode renderTables, nous utilisons le plugin DataTable de jQuery pour restituer les tableaux, et dans la méthode renderCharts, nous utilisons ECharts pour restituer les graphiques.

Ensuite, nous devons implémenter les fonctions de traitement définies dans l'API RESTful pour gérer les demandes de données. Dans cet exemple, nous pouvons utiliser SQLite comme base de données et Gorm comme framework ORM pour faire fonctionner la base de données. Dans le même temps, nous devons également utiliser certains plug-ins pour nous aider dans le traitement et la vérification des données, tels que gommon/validation et d'autres plug-ins. Par exemple :

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)
  }
}
Copier après la connexion

Dans cet exemple, nous définissons une structure SaleInput pour représenter le format d'entrée des données de vente et utilisons validate pour vérifier la légalité des données d'entrée. Dans les méthodes createSale et updateSale, nous convertissons les données d'entrée en une structure Sale et utilisons db.Create et db.Save pour créer ou mettre à jour les données de vente. Dans les méthodes getSales, getSale et deleteSale, nous utilisons db.Find, db.Where et db.Delete pour interroger et supprimer les données de vente. Dans toutes les fonctions de traitement, nous utilisons db := c.MustGet("db").(*gorm.DB) pour obtenir l'objet de connexion à la base de données, car nous en avons déjà enregistré un lors de la création de l'application pour établir une base de données. connection et stockons l'objet de connexion dans c.Keys["db"], afin que nous puissions utiliser l'objet de connexion dans chaque fonction de traitement de requête.

Enfin, nous devons lier la page Web et l'API RESTful via le framework Gin, afin que les utilisateurs puissent accéder et exploiter les données en accédant à la page Web. Dans cet exemple, nous pouvons utiliser le middleware de rendu HTML (ou rendu JSON) fourni par le framework Gin pour lier la page Web et l'API RESTful. Par exemple :

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()
}
Copier après la connexion

Dans cet exemple, nous avons enregistré un middleware pour stocker l'objet de connexion à la base de données dans c.Keys["db"], puis avons lié une requête GET/et utilisé le middleware de rendu HTML pour restituer la page d'index .html. De cette façon, nous pouvons accéder à la page Web en accédant à http://localhost:8080.

En résumé, l'utilisation du framework Gin pour mettre en œuvre des fonctions de visualisation de données et de reporting est une technologie très pratique et utile. Elle peut nous aider à mieux comprendre et analyser les données commerciales, à prendre de meilleures décisions et à améliorer l'efficacité de la gestion de l'entreprise. Grâce à l’étude et à la pratique de cet article, nous pouvons mieux maîtriser cette technologie et l’appliquer au développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment implémenter des graphiques statistiques de données massives sous le framework Vue Comment implémenter des graphiques statistiques de données massives sous le framework Vue Aug 25, 2023 pm 04:20 PM

Comment implémenter des graphiques statistiques de données massives sous le framework Vue

Histogramme ECharts (horizontal) : comment afficher le classement des données Histogramme ECharts (horizontal) : comment afficher le classement des données Dec 17, 2023 pm 01:54 PM

Histogramme ECharts (horizontal) : comment afficher le classement des données

Quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python Quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python Jul 31, 2023 pm 07:53 PM

Quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python

Comment utiliser le C++ pour une visualisation efficace des données ? Comment utiliser le C++ pour une visualisation efficace des données ? Aug 25, 2023 pm 08:57 PM

Comment utiliser le C++ pour une visualisation efficace des données ?

Comment utiliser Layui pour implémenter la fonction de tableau de bord de visualisation de données par glisser-déposer Comment utiliser Layui pour implémenter la fonction de tableau de bord de visualisation de données par glisser-déposer Oct 26, 2023 am 11:27 AM

Comment utiliser Layui pour implémenter la fonction de tableau de bord de visualisation de données par glisser-déposer

Tutoriel Graphviz : Créer des visualisations de données intuitives Tutoriel Graphviz : Créer des visualisations de données intuitives Apr 07, 2024 pm 10:00 PM

Tutoriel Graphviz : Créer des visualisations de données intuitives

Mises à jour en temps réel des visualisations de données à l'aide des fonctions JavaScript Mises à jour en temps réel des visualisations de données à l'aide des fonctions JavaScript Nov 04, 2023 pm 03:30 PM

Mises à jour en temps réel des visualisations de données à l'aide des fonctions JavaScript

Graphiques et visualisation de données à l'aide de fonctions JavaScript Graphiques et visualisation de données à l'aide de fonctions JavaScript Nov 04, 2023 pm 04:00 PM

Graphiques et visualisation de données à l'aide de fonctions JavaScript

See all articles