使用Golang编写仪表盘的最佳实践

使用Golang编写仪表盘的最佳实践 我想学习并使用 Go 语言编写仪表盘，类似于 Shiny 和 Flask 的功能。我该怎么做？请务必回复，我是新手。

14 回复

但是JavaScript有更多库能让我的生活更轻松。

更多关于使用Golang编写仪表盘的最佳实践的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


非常感谢

我会开始着手，如果需要任何帮助会告知。再次感谢

感谢您的回复

我不知道需要采取哪些步骤，因此如何将它们分解成更小的部分。但我已经得到了一些寻找方向。一旦我对此有更深入的了解，我一定会遵循您的建议。

我知道如何在桌面上运行一个buffalo应用程序。我已经做过好几次了。

我指的不是桌面本身。我的意思是，应该如何创建一个作为仪表板的网络应用程序，在其中可以向不同的人展示不同的图表。

如果你喜欢函数式语言，我相当推荐使用 Elm 来编写前端代码……虽然昨天刚开始学习，但 Elm 包含了许多我在 Go 中欣赏的特性 🙂 它完全专注于前端开发，可作为 JavaScript 的替代方案。

一个简单的仪表板可以在前端使用Web框架（例如bootstrap），后端使用Go来提供页面服务。我还建议您使用html/template来展示页面。

func main() {
    fmt.Println("hello world")
}

感谢您的回复，但其中没有一个解释编写仪表板的步骤。这些内容就像一堆零散的代码，让我无法理解。

我只想知道如果需要编写一个功能完整的仪表板：

应该采取哪些步骤
需要了解哪些主题
以及如何组织架构

我不需要任何代码，只需要了解整体结构和应该使用的库。

Web框架并非我的专业领域。我对Flask或Shiny的了解仅限于在它们各自主页上阅读到的内容。

我在最初回复中想要表达的观点是：您提出了几个"宏大"的问题（例如架构应该如何设计），这些问题并没有唯一答案，更不用说能在论坛帖子的几行内容中得到解答。最好将问题分解成更小更具体的问题，这样您就能更容易找到答案。

如果你是个新手，那就从小处着手。一整套Web框架是一项庞大的任务，可能会在多个层面上变得相当复杂。（只需看看Flask的功能列表就能明白我的意思。）

看看现有的Go Web框架或工具链，了解它们是如何实现的。（比如Buffalo。）

如果你刚接触Go（尤其是如果你刚接触编程），那就从一个简单、专注的小项目开始，快速获得初步成功。然后逐步扩展你的项目，或者添加其他小项目，稳步接近你的目标。

我正在尝试进入数据可视化领域。我指的是一个包含多个标签页、图表、回归线等内容的分析仪表板。

涉及一些地理数据，并且所有图表都相互关联。类似于在Tableau、Power BI和R中实现的功能。

能够通过查询数据库中的新数据实时更新图表。

我仍然是个学习者，没有计算机科学背景。我正在尝试零散地学习各种知识，但无法将它们整合到一个统一的地方。

我想知道是否有人做过类似的项目，或者您会如何实现它。以及您会推荐哪些库。这样我就可以系统地学习。

我目前没有特定的使用场景，只是想学习这方面的知识。

感谢您的建议。我已开始学习 D3 和 Buffalo，但还没弄明白如何动态更改数据，或者应该采用怎样的架构设计。

我一直使用 Shiny R 来完成这类工作，现在正尝试摆脱对 Shiny Server Pro 的依赖。

能否请您指导我该学习哪些内容，以及如何实现这些功能？

我目前掌握的基础知识包括：

  1. HTML
  2. CSS
  3. JavaScript 基础
  4. D3 基础
  5. Go 基础
  6. Bootstrap 和 Materialize CSS
  7. Buffalo 基础

但现在我不知道该如何将它们整合起来。恳请回复，我希望能尽快踏上这段漫长的学习之旅。

如果有更简单的替代方案，也请告诉我，我很愿意学习。

您的应用程序介于传统应用和单页应用之间。我将总结您发布项目所需的步骤：

  • 为应用程序编写服务器。一个简单的HTTP监听器、若干处理器、身份验证、处理会话、可能需要中间件，添加文件服务器（很重要），最终可使用gorilla/mux进行路由管理
  • 编写一些嵌套模板（使用Go）来展示前端。这里可能需要登录页面和仪表板模板（可使用Bootstrap等）。提示：在使用前端框架时注意模板分隔符！
  • 在后端编写API端点来访问数据（HTTP处理器）
  • 定期查询端点并更新前端（可使用Angular的$http指令轻松实现，但非强制要求，选择您更熟悉的方式）
func main() {
    fmt.Println("hello world")
}

你提到的意思是如何创建 REST API 吗？ 如果是的话，可以尝试查看以下链接吗？

GitHub

practice-golang/rest-electron

Avatar

用于 rest-ql-crud 的简单 REST 客户端。通过在 GitHub 上创建账户为 practice-golang/rest-electron 开发做贡献。

GitHub

practice-golang/rest-ql-crud

Avatar

使用 ql 创建 REST 服务器的练习。通过在 GitHub 上创建账户为 practice-golang/rest-ql-crud 开发做贡献。

对于使用Go语言构建仪表盘，推荐使用Go的Web框架结合前端可视化库来实现。以下是具体实现方案：

1. 选择Web框架

推荐使用Gin或Echo作为Web框架，这里以Gin为例：

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    r := gin.Default()
    
    // 提供静态文件（HTML、CSS、JS）
    r.Static("/static", "./static")
    
    // API端点提供数据
    r.GET("/api/data", func(c *gin.Context) {
        data := map[string]interface{}{
            "cpu_usage":    45.7,
            "memory_usage": 68.2,
            "active_users": 1234,
        }
        c.JSON(http.StatusOK, data)
    })
    
    // 主页面
    r.GET("/", func(c *gin.Context) {
        c.File("./static/index.html")
    })
    
    r.Run(":8080")
}

2. 前端实现

创建static/index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Go仪表盘</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .card { padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>系统监控仪表盘</h1>
    <div class="dashboard">
        <div class="card">
            <h3>CPU使用率</h3>
            <canvas id="cpuChart"></canvas>
        </div>
        <div class="card">
            <h3>内存使用率</h3>
            <canvas id="memoryChart"></canvas>
        </div>
    </div>

    <script>
        async function fetchData() {
            const response = await fetch('/api/data');
            return await response.json();
        }

        async function updateDashboard() {
            const data = await fetchData();
            
            // 更新CPU图表
            new Chart(document.getElementById('cpuChart'), {
                type: 'doughnut',
                data: {
                    labels: ['已使用', '剩余'],
                    datasets: [{
                        data: [data.cpu_usage, 100 - data.cpu_usage],
                        backgroundColor: ['#FF6384', '#36A2EB']
                    }]
                }
            });

            // 更新内存图表
            new Chart(document.getElementById('memoryChart'), {
                type: 'doughnut',
                data: {
                    labels: ['已使用', '剩余'],
                    datasets: [{
                        data: [data.memory_usage, 100 - data.memory_usage],
                        backgroundColor: ['#FFCE56', '#4BC0C0']
                    }]
                }
            });
        }

        updateDashboard();
        setInterval(updateDashboard, 5000); // 每5秒更新
    </script>
</body>
</html>

3. 实时数据推送

对于实时更新，可以使用WebSocket：

package main

import (
    "github.com/gin-gonic/gin"
    "github.com/gorilla/websocket"
    "net/http"
    "time"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

func main() {
    r := gin.Default()
    r.Static("/static", "./static")
    
    r.GET("/ws", func(c *gin.Context) {
        conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
        if err != nil {
            return
        }
        defer conn.Close()

        // 每秒推送数据
        ticker := time.NewTicker(1 * time.Second)
        defer ticker.Stop()

        for range ticker.C {
            data := map[string]interface{}{
                "cpu_usage":    rand.Float64() * 100,
                "memory_usage": 30 + rand.Float64()*50,
                "timestamp":    time.Now().Unix(),
            }
            
            if err := conn.WriteJSON(data); err != nil {
                break
            }
        }
    })
    
    r.Run(":8080")
}

4. 项目结构

dashboard-project/
├── main.go
├── go.mod
└── static/
    ├── index.html
    ├── style.css
    └── script.js

这个方案提供了：

  • 后端Go服务提供REST API和WebSocket
  • 前端使用Chart.js进行数据可视化
  • 支持实时数据更新
  • 简单的项目结构易于扩展

运行go run main.go后访问http://localhost:8080即可查看仪表盘。

回到顶部