Go语言做系统怎么与前端交互

原创

mob64ca12f6066e 2025-02-21 07:19:52 ©著作权

文章标签 json Go API 文章分类 Go语言后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f6066e的原创作品，请联系作者获取转载授权，否则将追究法律责任

Go语言与前端的交互：构建简单的待办事项应用

在当今的开发环境中，后端与前端的互动是构建现代应用程序的关键。Go语言以其高效和并发处理的能力，在后端开发中越来越受到欢迎。本文将介绍如何使用Go语言构建一个简单的待办事项（To-Do List）应用，并展示如何与前端进行交互。

1. 项目背景

我们将创建一个基于RESTful API的待办事项应用。前端将使用HTML和JavaScript来与Go后端进行数据交互，用户可以添加、删除和查看待办事项。

2. 技术栈

我们将使用以下技术：

Go语言：后端开发
HTML/JavaScript：前端展示
Bootstrap：用于快速构建用户界面
Gorilla Mux：一个用于路由的Go语言库

3. 设计文档

3.1 API设计

我们将设计三个API接口：

GET /todos：获取所有待办事项
POST /todos：添加一个新的待办事项
DELETE /todos/{id}：删除指定的待办事项

3.2 数据结构

我们的待办事项数据结构如下所示（在Go中定义）：

type Todo struct {
    ID   int    `json:"id"`
    Task string `json:"task"`
}

4. 实现步骤

4.1 后端实现

首先，我们将创建一个简单的Go服务器以处理我们的API请求。以下是后端实现的主要代码：

package main

import (
    "encoding/json"
    "net/http"
    "sync"

    "github.com/gorilla/mux"
)

type Todo struct {
    ID   int    `json:"id"`
    Task string `json:"task"`
}

var (
    todos = []Todo{}
    todoLock = &sync.Mutex{}
    currentID = 1
)

func getTodos(w http.ResponseWriter, r *http.Request) {
    todoLock.Lock()
    defer todoLock.Unlock()
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(todos)
}

func addTodo(w http.ResponseWriter, r *http.Request) {
    var newTodo Todo
    if err := json.NewDecoder(r.Body).Decode(&newTodo); err != nil {
        w.WriteHeader(http.StatusBadRequest)
        return
    }
    newTodo.ID = currentID
    currentID++
    
    todoLock.Lock()
    todos = append(todos, newTodo)
    todoLock.Unlock()

    w.WriteHeader(http.StatusCreated)
    json.NewEncoder(w).Encode(newTodo)
}

func deleteTodo(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    todoLock.Lock()
    defer todoLock.Unlock()

    for i, todo := range todos {
        if strconv.Itoa(todo.ID) == id {
            todos = append(todos[:i], todos[i+1:]...)
            w.WriteHeader(http.StatusNoContent)
            return
        }
    }
    w.WriteHeader(http.StatusNotFound)
}

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/todos", getTodos).Methods("GET")
    router.HandleFunc("/todos", addTodo).Methods("POST")
    router.HandleFunc("/todos/{id}", deleteTodo).Methods("DELETE")

    http.ListenAndServe(":8080", router)
}

4.2 前端实现

接下来，我们将构建一个简单的HTML页面，以与我们的API交互：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="
    <title>待办事项列表</title>
</head>
<body>
<div class="container">
    待办事项列表
    <input type="text" id="taskInput" class="form-control" placeholder="输入任务" />
    <button id="addTaskBtn" class="btn btn-primary mt-2">添加任务</button>
    <ul id="todoList" class="list-group mt-3"></ul>
</div>

<script>
    const apiUrl = "http://localhost:8080/todos";

    document.getElementById('addTaskBtn').addEventListener('click', async () => {
        const taskInput = document.getElementById('taskInput');
        const task = taskInput.value;
        if (task) {
            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({task: task})
            });
            taskInput.value = '';
            loadTodos();
        }
    });

    async function loadTodos() {
        const response = await fetch(apiUrl);
        const todos = await response.json();
        const todoList = document.getElementById('todoList');
        todoList.innerHTML = '';
        todos.forEach(todo => {
            const li = document.createElement('li');
            li.textContent = todo.task;
            li.className = 'list-group-item';
            todoList.appendChild(li);
        });
    }

    loadTodos();
</script>
</body>
</html>

4.3 示例序列图

下面是前后端交互的序列图示例，展示了用户添加待办事项的过程。

sequenceDiagram
    participant User
    participant Frontend
    participant Backend

    User->>Frontend: 点击添加任务
    Frontend->>Backend: POST /todos {"task": "新任务"}
    Backend->>Backend: 保存任务
    Backend-->>Frontend: 返回新任务数据
    Frontend-->>User: 更新任务列表