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 :
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: 删除某个特定销售数据。 }
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>
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) } }
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() }
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!