Golang Web应用获取数据时遇到的问题

Golang Web应用获取数据时遇到的问题 我是新手……接手了一些Go代码来验证一个概念性想法，遇到了一个（希望是小的）障碍。

我们使用默认库搭建了一个简单的Go网络应用，最初只是显示一个表单让用户输入字符串。

我已经让处理器能够处理GET和POST请求，这部分工作正常。

在POST请求中，我执行了ParseForm并成功提取了这个值。

然后使用通道和goroutine将字符串传递给后端的Go处理程序，该程序会填充包含各种统计信息的不同内存数据结构（最终会使用数据库）。

当我从通道收到"已完成"的消息后，网络应用应该转换到默认的"仪表板"并显示一些摘要数据。仪表板的一个面板是动态构建的表格。这个表格需要用上述内存数据结构之一的数据来填充……

……这就是我卡住的地方。

在HTML仪表板页面上，我已经有了所有构建动态表格的JavaScript函数，并且都能正常工作。目前，我在JS文件中使用硬编码的数据集，例如二维数组，来模拟Go后端将生成的数据，这样我可以在Go后端代码开发的同时继续构建表格。

这部分已经完成，并且运行效果符合预期。

我不知道如何实现的部分是：如何将运行中的处理器里的数据传递到表单中。

如何格式化模板和/或调用template.execute(…)函数，以便提供一个"复杂"的数据结构，这样在显示新页面时，可以将该数据结构传递给上述已经正常工作的JavaScript函数来构建动态表格。

任何有用的建议、链接等都将不胜感激。 谢谢。


更多关于Golang Web应用获取数据时遇到的问题的实战教程也可以访问 https://www.itying.com/category-94-b0.html

4 回复

创建一个HTTP端点，用于以JSON格式提供表中的数据，然后让您的JavaScript发起AJAX请求，从该端点获取数据并用它来填充表格。

更多关于Golang Web应用获取数据时遇到的问题的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


推荐直接通过ExecuteTemplate函数发送数据，如下所示：

request.ParseForm()

input := request.Form.Get("data")

var output []TableData = process_data(input)

template.ExecuteTemplate(responseWriterName, "dashboard.html", output)

然后使用模板循环将数据发送到表格中： （注意：结构体字段首字母必须大写）

type TableData struct {
Id string
Firstname string
Lastname string
Height string
Weight string
}

<html>

<table>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>姓氏</th>
    <th>身高</th>
    <th>体重</th>
  </tr>
  
{{range $row := .}}
 <tr>
    <td>$row.Id</td>
    <td>$row.Firstname</td>
    <td>$row.Lastname</td>
    <td>$row.Height</td>
    <td>$row.Weight</td>
  </tr>

{{ end }}

</table>
</html>

希望你的问题已经得到解决。如果还没有，可以查看这个示例项目。这是一个使用MySQL数据库的简单博客应用程序，包含了模板、表单和数据库连接功能，所有内容都在一个项目中。希望对你有帮助。

GitHub GitHub

头像

deepaksinghkushwah/golang-projects

Golang项目。通过在GitHub上创建账户来为deepaksinghkushwah/golang-projects开发做出贡献。

MySQL版本

GitHub GitHub

头像

deepaksinghkushwah/golang-projects

Golang项目。通过在GitHub上创建账户来为deepaksinghkushwah/golang-projects开发做出贡献。

在Go Web应用中，您可以通过模板将后端的数据结构传递给前端JavaScript。以下是实现步骤和示例代码：

  1. 定义Go数据结构：确保您的内存数据结构可以被模板访问。
  2. 在模板中嵌入数据：使用template.Execute将数据注入HTML，并通过JSON格式传递给JavaScript。
  3. JavaScript读取数据：在页面加载时，从嵌入的JSON中解析数据并调用您的表格构建函数。

示例代码

假设您的内存数据结构是一个切片或结构体，例如：

type StatData struct {
    Name  string
    Value int
}

// 假设这是您从通道获取的数据
var stats = []StatData{
    {"Metric1", 100},
    {"Metric2", 200},
}

在您的HTTP处理器中，处理POST请求后重定向到仪表板，并将数据传递给模板：

func dashboardHandler(w http.ResponseWriter, r *http.Request) {
    // 从内存数据结构获取数据（例如全局变量或通过依赖注入）
    data := struct {
        Stats []StatData
    }{
        Stats: stats, // 替换为您的实际数据源
    }

    // 解析模板文件
    tmpl, err := template.ParseFiles("dashboard.html")
    if err != nil {
        http.Error(w, "Template error: "+err.Error(), http.StatusInternalServerError)
        return
    }

    // 执行模板，注入数据
    err = tmpl.Execute(w, data)
    if err != nil {
        http.Error(w, "Template execution error: "+err.Error(), http.StatusInternalServerError)
        return
    }
}

在您的dashboard.html模板中，使用{{.Stats}}将数据嵌入为JSON，并通过JavaScript读取：

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <script>
        // 从模板中获取Go传递的数据
        var statsData = {{.Stats}};

        // 页面加载后调用您的表格构建函数
        window.onload = function() {
            buildDynamicTable(statsData); // 假设这是您的JS函数
        };
    </script>
</head>
<body>
    <div id="table-container"></div>
    <!-- 引入您的JavaScript文件 -->
    <script src="your-table-builder.js"></script>
</body>
</html>

在your-table-builder.js中，定义buildDynamicTable函数：

function buildDynamicTable(data) {
    // 使用data（二维数组或对象数组）构建动态表格
    const container = document.getElementById('table-container');
    let table = '<table border="1">';
    data.forEach(row => {
        table += '<tr>';
        table += `<td>${row.Name}</td><td>${row.Value}</td>`;
        table += '</tr>';
    });
    table += '</table>';
    container.innerHTML = table;
}

关键点：

  • 在Go中，使用template.Execute将数据结构注入模板。
  • 在HTML模板中，使用{{.FieldName}}语法嵌入数据，并通过json.Marshal自动转换为JSON（Go模板会自动处理结构体的JSON序列化）。
  • 确保JavaScript在页面加载时读取嵌入的数据并调用构建函数。

如果您的数据结构更复杂（例如嵌套结构），Go模板仍能处理，只需在模板中正确引用字段路径。例如，对于嵌套结构{{.Nested.Field}}。

此方法避免了硬编码，并允许Go后端动态传递数据到前端。

回到顶部