package main

import (
    "fmt"
    "net/http"

    "<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15841.html" target="_blank">git</a>hub.com/gin-gonic/gin"
)

// ToDo 结构表示待办事项
type ToDo struct {
    ID          int    `json:"id"`
    Description string `json:"description"`
    Completed   bool   `json:"completed"`
}

var todos []ToDo

func main() {
    // 初始化路由
    r := gin.Default()

    // 获取待办事项清单
    r.GET("/todos", func(c *gin.Context) {
        c.JSON(200, todos)
    })

    // 创建待办事项
    r.POST("/todos", func(c *gin.Context) {
        var newTodo ToDo
        if err := c.BindJSON(&newTodo); err != nil {
            c.AbortWithStatus(http.StatusBadRequest)
            return
        }
        newTodo.ID = len(todos)   1
        todos = append(todos, newTodo)
        c.JSON(201, newTodo)
    })

    // 更新待办事项
    r.PUT("/todos/:id", func(c *gin.Context) {
        id := c.Param("id")
        for i, todo := range todos {
            if fmt.Sprint(todo.ID) == id {
                if err := c.BindJSON(&todo); err != nil {
                    c.AbortWithStatus(http.StatusBadRequest)
                    return
                }
                todos[i] = todo
                c.JSON(200, todo)
                return
            }
        }
        c.JSON(404, gin.H{"error": "todo not found"})
    })

    // 删除待办事项
    r.DELETE("/todos/:id", func(c *gin.Context) {
        id := c.Param("id")
        for i, todo := range todos {
            if fmt.Sprint(todo.ID) == id {
                todos = append(todos[:i], todos[i 1:]...)
                c.Status(204)
                return
            }
        }
        c.JSON(404, gin.H{"error": "todo not found"})
    })

    // 启动服务器
    r.Run(":8080")
}

import React, { useState, useEffect } from "react";
import axios from "axios";

const TodoApp = () => {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        fetchTodos();
    }, []);

    const fetchTodos = () => {
        axios.get("http://localhost:8080/todos").then(({ data }) => setTodos(data));
    };

    const addTodo = (description) => {
        axios.post("http://localhost:8080/todos", { description }).then(({ data }) => setTodos([...todos, data]));
    };

    const updateTodo = (todo) => {
        axios.put(`http://localhost:8080/todos/${todo.id}`, todo).then(({ data }) => {
            const updatedTodos = [...todos];
            updatedTodos[updatedTodos.findIndex((t) => t.id === data.id)] = data;
            setTodos(updatedTodos);
        });
    };

    const deleteTodo = (id) => {
        axios.delete(`http://localhost:8080/todos/${id}`).then(() => setTodos(todos.filter((t) => t.id !== id)));
    };

    return (
        <div>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        <input type="checkbox" checked={todo.completed} onChange={() => updateTodo({ ...todo, completed: !todo.completed })} />
                        <span>{todo.description}</span>
                        <button onClick={() => deleteTodo(todo.id)}>X</button>
                    </li>
                ))}
            </ul>
            <input type="text" placeholder="Add a todo" onKeyPress={(e) => (e.key === "Enter" ? addTodo(e.target.value) : null)} />
        </div>
    );
};

export default TodoApp;