Gunakan rangka kerja Gin untuk melaksanakan fungsi visualisasi dan pelaporan data

Dalam pembangunan perisian moden, visualisasi data dan fungsi pelaporan semakin mendapat perhatian, kerana ia boleh membantu pengguna memahami dan menganalisis data dengan lebih baik, serta membantu perusahaan mengurus perniagaan mereka dan membuat keputusan dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Gin untuk melaksanakan visualisasi data dan fungsi pelaporan untuk membantu pembaca mempelajari dan menggunakan teknologi ini dengan lebih baik.

Rangka kerja Gin ialah rangka kerja web yang ringan berdasarkan bahasa Go dan mempunyai ciri prestasi tinggi dan kesederhanaan penggunaan. Konsep reka bentuknya adalah untuk menyediakan satu set alat asas (penghalaan, perisian tengah, pemaparan) untuk memenuhi keperluan asas pembangunan web, dan boleh diperluas dan disesuaikan dengan mudah. Oleh itu, aplikasi web yang cekap, berskala dan mudah diselenggara boleh dibangunkan dengan cepat menggunakan rangka kerja Gin.

Fungsi visualisasi dan pelaporan data yang diperkenalkan dalam artikel ini adalah berdasarkan API RESTful yang disediakan oleh rangka kerja Gin dan rangka kerja bahagian hadapan yang disediakan oleh Vue.js. Vue.js ialah rangka kerja JavaScript popular yang menyokong pembangunan komponen dipacu data, menjadikannya lebih mudah untuk membangunkan aplikasi bahagian hadapan yang kompleks. Pada masa yang sama, Vue.js juga menyediakan banyak pemalam dan komponen untuk melaksanakan visualisasi data dan fungsi pelaporan, seperti pemalam seperti ECharts dan DataTables.

Pertama, kita perlu mencipta aplikasi web berdasarkan rangka kerja Gin dan mentakrifkan beberapa API RESTful untuk mengendalikan permintaan data. Dalam contoh ini, kami menganggap bahawa kami perlu memaparkan beberapa data jualan, termasuk jualan, volum pesanan, kategori produk, dsb. Kami boleh mentakrifkan API berikut:

• DAPATKAN /api/sales: Mengembalikan senarai semua data jualan.
• DAPATKAN /api/sales/:id: Mengembalikan butiran data jualan tertentu.
• POST /api/sales: Buat data jualan baharu.
• PUT /api/sales/:id: Kemas kini maklumat untuk data jualan tertentu.
• DELETE /api/sales/:id: Padamkan data jualan tertentu.

Sangat mudah untuk menentukan API dalam rangka kerja Gin Anda hanya perlu menggunakan kaedah dan laluan HTTP yang sepadan, dan mengikat fungsi pemprosesan yang sepadan. Contohnya:

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

Seterusnya, kita perlu menggunakan Vue.js untuk mencipta aplikasi bahagian hadapan dan menggunakan pemalam seperti ECharts dan DataTables untuk melaksanakan fungsi visualisasi dan pelaporan data. Pertama, kita perlu menggunakan Vue.js untuk membuat halaman mudah, termasuk jadual dan beberapa carta, untuk memaparkan data jualan. Contohnya:

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

Dalam halaman ini, kami menggunakan DataTables untuk memaparkan data jualan dalam jadual dan ECharts untuk memaparkan data jualan dalam bentuk carta. Kami memanggil GET /api/sales sekali dalam kaedah loadSales untuk memuatkan data jualan dan menghantar data jualan kepada kaedah renderTable dan renderCharts untuk menggunakan DataTables dan ECharts untuk memaparkan data. Dalam kaedah renderTables, kami menggunakan pemalam DataTable jQuery untuk memaparkan jadual, dan dalam kaedah renderCharts, kami menggunakan ECharts untuk memaparkan carta.

Seterusnya, kita perlu melaksanakan fungsi pemprosesan yang ditakrifkan dalam API RESTful untuk mengendalikan permintaan data. Dalam contoh ini, kita boleh menggunakan SQLite sebagai pangkalan data dan Gorm sebagai rangka kerja ORM untuk mengendalikan pangkalan data. Pada masa yang sama, kami juga perlu menggunakan beberapa pemalam untuk membantu kami dengan pemprosesan dan pengesahan data, seperti gommon/pengesahan dan pemalam lain. Contohnya:

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

Dalam contoh ini, kami mentakrifkan struktur SaleInput untuk mewakili format input data jualan dan menggunakan validate untuk mengesahkan kesahihan data input. Dalam kaedah createSale dan updateSale, kami menukar data input kepada struktur Jualan dan menggunakan db.Create dan db.Save untuk membuat atau mengemas kini data jualan. Dalam kaedah getSales, getSale dan deleteSale, kami menggunakan db.Find, db.Where dan db.Delete untuk bertanya dan memadam data jualan. Dalam semua fungsi pemprosesan, kami menggunakan db := c.MustGet("db").(*gorm.DB) untuk mendapatkan objek sambungan pangkalan data Ini kerana kami telah mendaftarkannya semasa membuat aplikasi untuk mewujudkan sambungan pangkalan data dan simpan objek sambungan dalam c.Keys["db"], supaya kita boleh menggunakan objek sambungan dalam setiap fungsi pemprosesan permintaan.

Akhir sekali, kita perlu mengikat halaman web dan API RESTful melalui rangka kerja Gin, supaya pengguna boleh mengakses dan mengendalikan data dengan mengakses halaman web. Dalam contoh ini, kita boleh menggunakan perisian tengah render HTML (atau JSON render) yang disediakan oleh rangka kerja Gin untuk mengikat halaman web dan API RESTful. Contohnya:

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

Dalam contoh ini, kami mendaftarkan perisian tengah untuk menyimpan objek sambungan pangkalan data ke dalam c.Keys["db"], dan kemudian mengikat GET/permintaan menggunakan perisian perisian tengah render HTML untuk memaparkan halaman index.html. Dengan cara ini, kita boleh mengakses halaman Web dengan mengakses http://localhost:8080.

Ringkasnya, menggunakan rangka kerja Gin untuk melaksanakan fungsi visualisasi dan pelaporan data ialah teknologi yang sangat praktikal dan berguna. Ia boleh membantu kami memahami dan menganalisis data perniagaan dengan lebih baik serta membantu kami membuat keputusan yang lebih baik dan meningkatkan pengurusan kecekapan perusahaan. Melalui kajian dan amalan artikel ini, kita boleh menguasai teknologi ini dengan lebih baik dan mengaplikasikannya pada pembangunan sebenar.

Atas ialah kandungan terperinci Gunakan rangka kerja Gin untuk melaksanakan fungsi visualisasi dan pelaporan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!