Comment créer une liste déplaçable à l'aide de Go et React

Dans les applications Web modernes, la fonction glisser-déposer est devenue l'une des fonctionnalités standard car elle peut offrir aux utilisateurs une meilleure expérience interactive. Dans cet article, nous expliquerons comment utiliser le langage Go et React pour créer des listes déplaçables afin de rendre vos applications Web plus faciles à utiliser et plus intéressantes.

Étape 1 : Créer un service backend

Tout d'abord, nous devons créer un service backend pour gérer les données de la liste. Nous allons créer une API REST simple en utilisant le langage Go. Pour simplifier notre code, nous utiliserons à la fois le framework Gin et la bibliothèque GORM.

Tout d'abord, nous devons créer une table appelée "éléments" pour stocker les éléments de notre liste.

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

Ensuite, nous créons un fichier Golang et y ajoutons le code suivant :

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()
    }
}

Dans ce code, nous créons d'abord une table nommée "items" pour stocker les éléments de la liste. Nous avons ensuite créé une structure appelée "Item" et y avons défini ses champs. Ensuite, nous avons créé une fonction appelée « listItems » qui récupère tous les éléments de la base de données et les renvoie au format JSON. Nous avons également créé une fonction appelée « updateItem » qui met à jour un seul élément.

Nous avons créé un groupe de routage nommé « api » dans ce fichier Golang et défini deux routes : GET /items et PUT /items/:id. La route GET est utilisée pour obtenir tous les éléments et la route PUT est utilisée pour mettre à jour un seul élément.

Nous avons également ajouté un middleware appelé "corsMiddleware" pour gérer les problèmes CORS. CORS permet au code d'un domaine d'envoyer des requêtes à une API d'un autre domaine, ce qui est très courant lors du développement d'applications Web.

Étape 2 : Créer l'interface React

Ensuite, nous devons créer l'interface React. Nous utiliserons React et la bibliothèque React-DnD pour implémenter la fonctionnalité glisser-déposer. Nous utiliserons également la bibliothèque Axios pour obtenir les données du serveur backend.

Tout d'abord, nous devons créer un dossier appelé "ItemList" et enregistrer le code suivant dans un fichier appelé "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>
    );
}

Dans ce composant React, nous utilisons d'abord useState et useEffect pour obtenir les données de la liste article. Ensuite, nous avons créé une fonction appelée "onDragEnd" pour gérer l'événement glisser et mettre à jour les données. Nous avons également créé une liste déplaçable à l'aide de la bibliothèque React-DnD. Dans ce composant "ItemList", nous rendons un élément

qui contient tous les éléments de la liste et les rendons déplaçables à l'aide du composant Nous utilisons également le composant pour envelopper la liste entière afin qu'elle puisse être glissée et déposée.

Maintenant, nous devons utiliser ce composant dans notre application. Dans notre application React, nous avons créé un composant appelé « App » et ajouté Ensuite, nous ajoutons le code suivant à un fichier appelé "index.js" pour afficher notre application React :

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

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

Étape 3 : Exécutez l'application

Maintenant, nous avons terminé le développement de l'application. Nous devons démarrer le service backend et l'application frontend React pour les voir fonctionner. Tout d'abord, nous devons ouvrir deux fois les fenêtres du terminal, basculer vers notre répertoire d'application Go dans une fenêtre et exécuter la commande suivante :

go run main.go

Ensuite, basculer vers notre répertoire d'application React dans l'autre fenêtre de terminal et exécuter la commande suivante :

npm start

Maintenant, nous pouvons visiter http://localhost:3000/ dans le navigateur et nous pouvons voir notre liste déplaçable. Vous pouvez maintenant jouer et voir si vous pouvez facilement faire glisser les éléments de la liste et les mettre à jour en conséquence dans le service backend.

Conclusion

Dans cet article, nous avons utilisé le langage Go et React pour créer une liste déplaçable. Grâce à la bibliothèque Gin et React-DnD, nous avons implémenté la fonction de glisser les éléments de la liste et transmis la bibliothèque Axios depuis le backend. données. Cet exemple de projet peut être utilisé comme référence dans votre développement de travail quotidien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!