使用Golang和Bootstrap实现CRUD功能

使用Golang和Bootstrap实现CRUD功能 尊敬的专家们:

请分享一个简单的示例Web应用程序,包含完整的增删改查功能,使用MySQL数据库并在Bootstrap中实现,用于学习目的。

提前感谢

3 回复

谢谢

更多关于使用Golang和Bootstrap实现CRUD功能的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


你好,

能否查看以下链接?

GitHub GitHub

头像

practice-golang/db-crud

一个在CLI中使用MySQL连接的简单CRUD。通过在GitHub上创建账户为practice-golang/db-crud开发做贡献。


GitHub GitHub

头像

practice-golang/rest-crud

使用Labstack的echo框架的简单CRUD(仅回显请求)- practice-golang/rest-crud


GitHub GitHub

头像

practice-golang/rest-db-crud

练习项目。使用Echo框架和MariaDB(MySQL)返回JSON响应的简单REST - practice-golang/rest-db-crud


GitHub GitHub

头像

practice-golang/rest-client

用于rest-db-crud的客户端练习。通过在GitHub上创建账户为practice-golang/rest-client开发做贡献。

以下是一个使用Golang和Bootstrap实现的完整CRUD Web应用示例,包含MySQL数据库操作:

项目结构

crud-app/
├── main.go
├── go.mod
├── templates/
│   ├── index.html
│   ├── create.html
│   └── edit.html
└── static/
    └── css/
        └── style.css

1. 数据库设置

首先创建数据库和表:

CREATE DATABASE go_crud;
USE go_crud;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Go模块初始化

go mod init crud-app
go get github.com/go-sql-driver/mysql

3. 主程序 (main.go)

package main

import (
    "database/sql"
    "fmt"
    "html/template"
    "log"
    "net/http"
    "strconv"

    _ "github.com/go-sql-driver/mysql"
)

type User struct {
    ID    int
    Name  string
    Email string
}

var db *sql.DB
var tpl *template.Template

func init() {
    var err error
    db, err = sql.Open("mysql", "username:password@tcp(127.0.0.1:3306)/go_crud")
    if err != nil {
        log.Fatal(err)
    }

    if err = db.Ping(); err != nil {
        log.Fatal(err)
    }

    tpl = template.Must(template.ParseGlob("templates/*.html"))
}

func main() {
    http.HandleFunc("/", indexHandler)
    http.HandleFunc("/create", createHandler)
    http.HandleFunc("/store", storeHandler)
    http.HandleFunc("/edit/", editHandler)
    http.HandleFunc("/update/", updateHandler)
    http.HandleFunc("/delete/", deleteHandler)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

    fmt.Println("Server running on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

func indexHandler(w http.ResponseWriter, r *http.Request) {
    rows, err := db.Query("SELECT id, name, email FROM users")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    defer rows.Close()

    var users []User
    for rows.Next() {
        var user User
        err := rows.Scan(&user.ID, &user.Name, &user.Email)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }
        users = append(users, user)
    }

    tpl.ExecuteTemplate(w, "index.html", users)
}

func createHandler(w http.ResponseWriter, r *http.Request) {
    tpl.ExecuteTemplate(w, "create.html", nil)
}

func storeHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == "POST" {
        name := r.FormValue("name")
        email := r.FormValue("email")

        _, err := db.Exec("INSERT INTO users (name, email) VALUES (?, ?)", name, email)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

        http.Redirect(w, r, "/", http.StatusSeeOther)
    }
}

func editHandler(w http.ResponseWriter, r *http.Request) {
    idStr := r.URL.Path[len("/edit/"):]
    id, err := strconv.Atoi(idStr)
    if err != nil {
        http.Error(w, "Invalid ID", http.StatusBadRequest)
        return
    }

    var user User
    err = db.QueryRow("SELECT id, name, email FROM users WHERE id = ?", id).Scan(&user.ID, &user.Name, &user.Email)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    tpl.ExecuteTemplate(w, "edit.html", user)
}

func updateHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == "POST" {
        idStr := r.URL.Path[len("/update/"):]
        id, err := strconv.Atoi(idStr)
        if err != nil {
            http.Error(w, "Invalid ID", http.StatusBadRequest)
            return
        }

        name := r.FormValue("name")
        email := r.FormValue("email")

        _, err = db.Exec("UPDATE users SET name = ?, email = ? WHERE id = ?", name, email, id)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

        http.Redirect(w, r, "/", http.StatusSeeOther)
    }
}

func deleteHandler(w http.ResponseWriter, r *http.Request) {
    idStr := r.URL.Path[len("/delete/"):]
    id, err := strconv.Atoi(idStr)
    if err != nil {
        http.Error(w, "Invalid ID", http.StatusBadRequest)
        return
    }

    _, err = db.Exec("DELETE FROM users WHERE id = ?", id)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

4. 模板文件

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">User Management</h1>
        
        <a href="/create" class="btn btn-primary mb-3">Add New User</a>
        
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {{range .}}
                <tr>
                    <td>{{.ID}}</td>
                    <td>{{.Name}}</td>
                    <td>{{.Email}}</td>
                    <td>
                        <a href="/edit/{{.ID}}" class="btn btn-sm btn-warning">Edit</a>
                        <a href="/delete/{{.ID}}" class="btn btn-sm btn-danger" 
                           onclick="return confirm('Are you sure?')">Delete</a>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</body>
</html>

templates/create.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create User</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Create New User</h1>
        
        <form action="/store" method="POST">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <button type="submit" class="btn btn-primary">Create</button>
            <a href="/" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</body>
</html>

templates/edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit User</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Edit User</h1>
        
        <form action="/update/{{.ID}}" method="POST">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name" value="{{.Name}}" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" value="{{.Email}}" required>
            </div>
            <button type="submit" class="btn btn-primary">Update</button>
            <a href="/" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</body>
</html>

5. 运行应用

go run main.go

访问 http://localhost:8080 即可使用完整的CRUD功能。这个示例包含了用户管理的所有基本操作:创建、读取、更新和删除,使用Bootstrap进行界面美化,MySQL作为数据存储。

回到顶部