Gin 프레임워크를 사용하여 데이터 시각화 및 보고 기능 구현

현대 소프트웨어 개발에서 데이터 시각화 및 보고 기능은 사용자가 데이터를 더 잘 이해하고 분석하고 기업이 비즈니스를 더 잘 관리하고 의사 결정을 내리는 데 도움이 될 수 있기 때문에 점점 더 많은 관심을 받고 있습니다. 이 기사에서는 독자가 이 기술을 더 잘 배우고 적용할 수 있도록 Gin 프레임워크를 사용하여 데이터 시각화 및 보고 기능을 구현하는 방법을 소개합니다.

Gin 프레임워크는 Go 언어 기반의 경량 웹 프레임워크로 고성능과 사용 편의성이 특징입니다. 디자인 컨셉은 웹 개발의 기본 요구 사항을 충족하기 위한 기본 도구 세트(라우팅, 미들웨어, 렌더링)를 제공하는 것이며 쉽게 확장하고 사용자 정의할 수 있습니다. 따라서 효율적이고 확장 가능하며 유지 관리가 쉬운 웹 애플리케이션을 Gin 프레임워크를 사용하여 빠르게 개발할 수 있습니다.

본 글에서 소개하는 데이터 시각화 및 리포팅 기능은 Gin 프레임워크에서 제공하는 RESTful API와 Vue.js에서 제공하는 프런트엔드 프레임워크를 기반으로 합니다. Vue.js는 데이터 기반 구성 요소 개발을 지원하는 인기 있는 JavaScript 프레임워크로, 복잡한 프런트엔드 애플리케이션을 보다 쉽게 ​​개발할 수 있도록 해줍니다. 동시에 Vue.js는 ECharts 및 DataTables와 같은 플러그인과 같이 데이터 시각화 및 보고 기능을 구현하기 위한 풍부한 플러그인과 구성 요소도 제공합니다.

먼저 Gin 프레임워크를 기반으로 웹 애플리케이션을 만들고 데이터 요청을 처리하기 위한 일부 RESTful API를 정의해야 합니다. 이 예에서는 판매량, 주문량, 제품 카테고리 등 일부 판매 데이터를 표시해야 한다고 가정합니다. 다음 API를 정의할 수 있습니다.

• GET /api/sales: 모든 판매 데이터 목록을 반환합니다.
• GET /api/sales/:id: 특정 판매 데이터에 대한 자세한 정보를 반환합니다.
• POST /api/sales: 새로운 판매 데이터를 생성합니다.
• PUT /api/sales/:id: 특정 판매 데이터의 정보를 업데이트합니다.
• DELETE /api/sales/:id: 특정 판매 데이터를 삭제합니다.

Gin 프레임워크에서 API를 정의하는 것은 매우 간단합니다. 해당 HTTP 메서드와 경로를 사용하고 해당 처리 기능을 바인딩하기만 하면 됩니다. 예:

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

다음으로 Vue.js를 사용하여 프런트 엔드 애플리케이션을 만들고 ECharts 및 DataTables와 같은 플러그인을 사용하여 데이터 시각화 및 보고 기능을 구현해야 합니다. 먼저 Vue.js를 사용하여 판매 데이터를 표시하기 위한 테이블과 일부 차트를 포함하는 간단한 페이지를 만들어야 합니다. 예:

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

이 페이지에서는 DataTables를 사용하여 판매 데이터를 테이블에 표시하고 ECharts를 사용하여 판매 데이터를 차트 형식으로 표시합니다. loadSales 메소드에서 GET /api/sales를 한 번 호출하여 판매 데이터를 로드하고, 판매 데이터를 renderTable 및 renderCharts 메소드에 전달하여 DataTables 및 ECharts를 사용하여 데이터를 렌더링했습니다. renderTables 메소드에서는 jQuery의 DataTable 플러그인을 사용하여 테이블을 렌더링하고, renderCharts 메소드에서는 ECharts를 사용하여 차트를 렌더링합니다.

다음으로 데이터 요청을 처리하기 위해 RESTful API에 정의된 처리 기능을 구현해야 합니다. 이 예에서는 SQLite를 데이터베이스로 사용하고 Gorm을 ORM 프레임워크로 사용하여 데이터베이스를 운영할 수 있습니다. 동시에 데이터 처리 및 검증에 도움이 되는 gommon/validation 및 기타 플러그인과 같은 일부 플러그인도 사용해야 합니다. 예:

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

이 예에서는 판매 데이터의 입력 형식을 나타내기 위해 SaleInput 구조를 정의하고 유효성 검사를 사용하여 입력 데이터의 합법성을 확인합니다. createSale 및 updateSale 메소드에서는 입력 데이터를 Sale 구조로 변환하고 db.Create 및 db.Save를 사용하여 판매 데이터를 생성하거나 업데이트합니다. getSales, getSale 및 deleteSale 메소드에서는 db.Find, db.Where 및 db.Delete를 사용하여 판매 데이터를 쿼리하고 삭제합니다. 모든 처리 기능에서 데이터베이스 연결 객체를 얻기 위해 db := c.MustGet("db").(*gorm.DB)를 사용합니다. 이는 데이터베이스 연결을 설정하기 위해 애플리케이션을 생성할 때 등록했기 때문입니다. 그리고 연결 개체를 c.Keys["db"]에 저장하면 각 요청 처리 기능에서 연결 개체를 사용할 수 있습니다.

마지막으로 사용자가 웹페이지에 접속하여 데이터에 접근하고 조작할 수 있도록 Gin 프레임워크를 통해 웹페이지와 RESTful API를 바인딩해야 합니다. 이 예에서는 Gin 프레임워크에서 제공하는 HTML 렌더링(또는 JSON 렌더링) 미들웨어를 사용하여 웹 페이지와 RESTful API를 바인딩할 수 있습니다. 예:

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

이 예에서는 데이터베이스 연결 개체를 c.Keys["db"]에 저장하기 위해 미들웨어를 등록한 다음 GET/요청을 바인딩하고 HTML 렌더링 미들웨어를 사용하여 인덱스 .html 페이지를 렌더링했습니다. 이런 방식으로 http://localhost:8080에 액세스하여 웹 페이지에 액세스할 수 있습니다.

요약하자면, Gin 프레임워크를 사용하여 데이터 시각화 및 보고 기능을 구현하는 것은 매우 실용적이고 유용한 기술입니다. 이는 비즈니스 데이터를 더 잘 이해하고 분석하고 더 나은 의사결정을 내리는 데 도움이 되며 기업 관리 효율성을 향상시킬 수 있습니다. 이 글의 연구와 실습을 통해 우리는 이 기술을 더 잘 익히고 실제 개발에 적용할 수 있습니다.

위 내용은 Gin 프레임워크를 사용하여 데이터 시각화 및 보고 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!