Go와 React를 사용하여 드래그 가능한 목록을 만드는 방법

최신 웹 애플리케이션에서 드래그 앤 드롭 기능은 사용자에게 더 나은 대화형 경험을 제공할 수 있기 때문에 표준 기능 중 하나가 되었습니다. 이 기사에서는 Go 언어와 React를 사용하여 드래그 가능한 목록을 작성하여 웹 애플리케이션을 더 사용하기 쉽고 흥미롭게 만드는 방법을 소개합니다.

1단계: 백엔드 서비스 구축

먼저 목록 데이터를 관리하기 위한 백엔드 서비스를 구축해야 합니다. Go 언어를 사용하여 간단한 REST API를 만들어 보겠습니다. 코드를 단순화하기 위해 Gin 프레임워크와 GORM 라이브러리를 모두 사용합니다.

먼저 목록 항목을 저장하기 위해 "items"라는 테이블을 만들어야 합니다.

CREATE TABLE items (
    id INT NOT NULL AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    position INT NOT NULL,
    PRIMARY KEY (id)
);

다음으로 Golang 파일을 만들고 여기에 다음 코드를 추가합니다.

package main

import (
    "github.com/gin-gonic/gin"
    "github.com/jinzhu/gorm"
    _ "github.com/jinzhu/gorm/dialects/mysql"
)

type Item struct {
    ID       int    `gorm:"primary_key" json:"id"`
    Name     string `gorm:"not null" json:"name"`
    Position int    `gorm:"not null" json:"position"`
}

func main() {
    // 初始化Gin框架
    r := gin.Default()

    // 连接MySQL数据库
    db, err := gorm.Open("mysql", "{username}:{password}@/{database_name}?charset=utf8&parseTime=True&loc=Local")
    if err != nil {
        panic("无法连接到数据库")
    }
    defer db.Close()

    // 自动迁移schema
    db.AutoMigrate(&Item{})

    // 添加CORS中间件
    r.Use(corsMiddleware())

    // 定义API路由
    api := r.Group("/api")
    {
        api.GET("/items", listItems)
        api.PUT("/items/:id", updateItem)
    }

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

// 列出所有项
func listItems(c *gin.Context) {
    db := c.MustGet("db").(*gorm.DB)

    var items []Item
    db.Find(&items)

    c.JSON(200, items)
}

// 更新单个项目
func updateItem(c *gin.Context) {
    db := c.MustGet("db").(*gorm.DB)

    // 从URL参数获得项目的ID
    id := c.Param("id")

    // 从请求体得到项目的其他项（名称和位置）
    var input Item
    if err := c.BindJSON(&input); err != nil {
        c.JSON(400, gin.H{"error": err.Error()})
        return
    }

    // 更新数据库
    var item Item
    if db.First(&item, id).RecordNotFound() {
        c.JSON(404, gin.H{"error": "项目未找到"})
        return
    }

    item.Name = input.Name
    item.Position = input.Position

    if err := db.Save(&item).Error; err != nil {
        c.JSON(400, gin.H{"error": "更新项目失败"})
        return
    }

    c.JSON(200, item)
}

// 添加CORS中间件
func corsMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")
        c.Writer.Header().Set("Access-Control-Max-Age", "86400")
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(200)
            return
        }
        c.Next()
    }
}

이 코드에서는 먼저 목록 항목을 저장하기 위해 "items"라는 테이블을 만듭니다. 그런 다음 "Item"이라는 구조체를 만들고 그 안에 해당 필드를 정의했습니다. 다음으로, 데이터베이스에서 모든 항목을 가져와 JSON으로 반환하는 "listItems"라는 함수를 만들었습니다. 또한 단일 항목을 업데이트하는 "updateItem"이라는 함수도 만들었습니다.

이 Golang 파일에 "api"라는 라우팅 그룹을 만들고 GET /items 및 PUT /items/:id라는 두 가지 경로를 정의했습니다. GET 경로는 모든 항목을 가져오는 데 사용되고 PUT 경로는 단일 항목을 업데이트하는 데 사용됩니다.

CORS 문제를 처리하기 위해 "corsMiddleware"라는 미들웨어도 추가했습니다. CORS를 사용하면 한 도메인의 코드가 다른 도메인의 API에 요청할 수 있습니다. 이는 웹 애플리케이션을 개발할 때 매우 일반적입니다.

2단계: React 프런트엔드 구축

다음으로 React 프런트엔드를 생성해야 합니다. React와 React-DnD 라이브러리를 사용하여 드래그 앤 드롭 기능을 구현하겠습니다. 또한 Axios 라이브러리를 사용하여 백엔드 서버에서 데이터를 가져옵니다.

먼저 "ItemList"라는 폴더를 만들고 다음 코드를 "ItemList.jsx"라는 파일에 저장해야 합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

export default function ItemList() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:8080/api/items').then((response) => {
            setItems(response.data);
        });
    }, []);

    function onDragEnd(result) {
        const { destination, source, draggableId } = result;
        if (!destination) {
            return;
        }
        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        const item = items.find((i) => i.id === parseInt(draggableId));
        const newItems = [...items];
        newItems.splice(source.index, 1);
        newItems.splice(destination.index, 0, item);

        axios
            .put(`http://localhost:8080/api/items/${draggableId}`, {
                name: item.name,
                position: destination.index,
            })
            .then(() => {
                setItems(newItems);
            });
    }

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="itemList">
                {(provided) => (
                    <ul
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        className="item-list"
                    >
                        {items.map((item, index) => {
                            return (
                                <Draggable
                                    key={item.id}
                                    draggableId={item.id.toString()}
                                    index={index}
                                >
                                    {(provided) => (
                                        <li
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                            ref={provided.innerRef}
                                            className="item"
                                        >
                                            {item.name}
                                        </li>
                                    )}
                                </Draggable>
                            );
                        })}
                        {provided.placeholder}
                    </ul>
                )}
            </Droppable>
        </DragDropContext>
    );
}

이 React 구성 요소에서는 먼저 useState와 useEffect를 사용하여 목록의 데이터를 가져옵니다. 안건. 그런 다음 드래그 이벤트를 처리하고 데이터를 업데이트하기 위해 "onDragEnd"라는 함수를 만들었습니다. 또한 React-DnD 라이브러리를 사용하여 드래그 가능한 목록을 만들었습니다. 이 "ItemList" 구성 요소에서는 모든 목록 항목을 포함하는 ff6d136ddc5fdfeffaf53ff6ee95f185 요소를 렌더링하고 a245a8242cd745c2107f18b8f8f45369 또한 8c5c063a1d171dc2ddd51709ef854a36 구성요소를 사용하여 전체 목록을 끌어서 놓을 수 있도록 래핑합니다.

이제 애플리케이션에서 이 구성요소를 사용해야 합니다. React 애플리케이션에서는 "App"이라는 구성 요소를 만들고 JSX에 c88d11956a1bb01d80e1fa915d8b768b를 추가했습니다. 다음으로, "index.js"라는 파일에 다음 코드를 추가하여 React 애플리케이션을 렌더링합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

3단계: 애플리케이션 실행

이제 애플리케이션 개발이 완료되었습니다. 백엔드 서비스와 프론트엔드 React 애플리케이션을 시작하여 실행을 확인해야 합니다. 먼저 터미널 창을 두 번 열고 한 창에서 Go 애플리케이션 디렉터리로 전환한 후 다음 명령을 실행해야 합니다.

go run main.go

그런 다음 다른 터미널 창에서 React 애플리케이션 디렉터리로 전환하고 다음 명령을 실행합니다.

npm start

이제 브라우저에서 http://localhost:3000/을 방문하면 드래그 가능한 목록을 볼 수 있습니다. 이제 목록 항목을 편안하게 드래그하여 백엔드 서비스에서 적절하게 업데이트할 수 있는지 확인해 볼 수 있습니다.

결론

이 기사에서는 Go 언어와 React를 사용하여 드래그 가능한 목록을 작성했습니다. Gin 및 React-DnD 라이브러리를 통해 목록 항목 드래그 기능을 구현하고 백엔드에서 Axios 라이브러리를 전달했습니다. 데이터. 이 샘플 프로젝트는 일상적인 작업 개발 시 참조로 사용할 수 있습니다.

위 내용은 Go와 React를 사용하여 드래그 가능한 목록을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!