使用Echo、MySQL构建Go用户管理页面时无法获取表数据求助

我是IT专业大一学生，Go语言初学者，正在完成照片分享平台作业。尝试用Go+Echo框架+MySQL实现用户账户管理页面，从MySQL的users表查询数据并渲染到HTML页面，但无法成功获取数据。以下是我的代码，还有一段看不懂的JavaScript示例，请求帮忙排查：

Go代码 #

package main

import (
    "database/sql"
    "net/http"

    "github.com/labstack/echo/v4"
)

func usersHandler(c echo.Context) error {
    //connect to mysql database
    db, err := sql.Open("mysql", "root:password@tcp(127.0.0.1:3306)/eindopdracht?charset=utf8mb4&parseTime=True&loc=Local")
    if err != nil {
        return err
    }
    defer db.Close()

    //query to select all users
    // I THINK I DID SOMETHING WRONG HERE
    rows, err := db.Query("SELECT id, name, email FROM users")
    if err != nil {
        return err
    }
    defer rows.Close()

    var users []User
    for rows.Next() {
        var u User
        if err := rows.Scan(&u.ID, &u.Name, &u.Email); err != nil {
            return err
        }
        users = append(users, u)
    }
    return c.Render(http.StatusOK, "users.html", users)
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users</title>
</head>

<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Actions</th>
        </tr>
        {{range .Users}}
        <tr>
            <td>{{.ID}}</td>
            <td>{{.Name}}</td>
            <td>{{.Email}}</td>
            <td>
                <button class="delete-btn" data-id="{{.ID}}">Delete</button>
                <button class="edit-btn" data-id="{{.ID}}">Edit</button>
            </td>
        </tr>
        {{end}}
    </table>

    <form id="add-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <button type="submit">Add User</button>
    </form>

    <form id="edit-form" style="display: none;">
        <input type="hidden" id="edit-id" name="id">
        <label for="name">Name:</label>
        <input type="text" id="edit-name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="edit-email" name="email">
        <button type="submit">Save Changes</button>
    </form>

</body>

</html>

看不懂的JavaScript代码 #

// add user
document.getElementById('add-form').addEventListener('submit', function(event)) {
    event.preventDefault();
    // make a post request to /users with the data
    fetch('/users', ){
      method
    }

排查出的核心问题及修复方案 #

1. 缺失User结构体定义
   Go代码中直接使用了User类型，但未定义该结构体，必须补充：

type User struct {
    ID    int    // 注意和数据库users表的id字段类型匹配，若为unsigned则改为uint
    Name  string
    Email string
}

2. 模板数据传递不匹配
   HTML模板中使用{{range .Users}}循环，但Go代码直接传递了users切片，模板无法找到.Users键值。需要将数据包装为结构体或map：

• 方案一：用结构体传递

type TemplateData struct {
    Users []User
}

// 在handler中修改返回语句
return c.Render(http.StatusOK, "users.html", TemplateData{Users: users})

• 方案二：用map传递

return c.Render(http.StatusOK, "users.html", map[string]interface{}{"Users": users})

3. 数据库连接未验证
   sql.Open仅创建连接池，未实际建立连接，需添加db.Ping()验证：

db, err := sql.Open("mysql", "root:password@tcp(127.0.0.1:3306)/eindopdracht?charset=utf8mb4&parseTime=True&loc=Local")
if err != nil {
    return err
}
defer db.Close()
// 新增连接验证
if err := db.Ping(); err != nil {
    return err
}

4. Echo模板引擎未配置
   缺少Echo的模板渲染器初始化代码，需补充模板配置：

import (
    "html/template"
    "io"
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

func main() {
    e := echo.New()
    // 解析当前目录下所有HTML模板文件
    tpl := template.Must(template.ParseGlob("*.html"))
    e.Renderer = &TemplateRenderer{templates: tpl}
    
    e.GET("/users", usersHandler)
    e.Start(":8080")
}

// 自定义模板渲染器，实现Echo的Renderer接口
type TemplateRenderer struct {
    templates *template.Template
}

func (t *TemplateRenderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    return t.templates.ExecuteTemplate(w, name, data)
}

补充JavaScript代码解释（补全版） #

这段JS是实现无刷新添加用户的功能，补全并解释如下：

// 给添加用户表单绑定提交事件
document.getElementById('add-form').addEventListener('submit', function(event) {
    // 阻止表单默认的刷新提交行为
    event.preventDefault();
    
    // 获取表单输入的用户名和邮箱
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    
    // 用fetch发送POST请求到后端的/users接口
    fetch('/users', {
        method: 'POST', // 请求方法为POST
        headers: {
            'Content-Type': 'application/json', // 告诉后端请求体是JSON格式
        },
        body: JSON.stringify({ name: name, email: email }), // 将表单数据转为JSON字符串
    })
    .then(response => response.json()) // 解析后端返回的JSON数据
    .then(data => {
        console.log('用户添加成功:', data);
        // 刷新页面以展示新添加的用户
        window.location.reload();
    })
    .catch(error => {
        console.error('添加用户失败:', error);
    });
});

要让这段代码生效，你还需要在Go中编写对应的POST /users接口，处理用户添加请求。

内容的提问来源于stack exchange，提问作者user21105986