So erstellen Sie mit Go and React eine ziehbare Liste

In modernen Webanwendungen ist die Drag-and-Drop-Funktion zu einer Standardfunktion geworden, da sie Benutzern ein besseres interaktives Erlebnis bieten kann. In diesem Artikel stellen wir vor, wie Sie mit der Go-Sprache und React ziehbare Listen erstellen, um Ihre Webanwendungen benutzerfreundlicher und interessanter zu machen.

Schritt 1: Erstellen Sie einen Backend-Dienst

Zuerst müssen wir einen Backend-Dienst erstellen, um Listendaten zu verwalten. Wir werden eine einfache REST-API mit der Go-Sprache erstellen. Um unseren Code zu vereinfachen, verwenden wir sowohl das Gin-Framework als auch die GORM-Bibliothek.

Zuerst müssen wir eine Tabelle namens „items“ erstellen, um unsere Listenelemente zu speichern.

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

Als nächstes erstellen wir eine Golang-Datei und fügen darin den folgenden Code ein:

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

In diesem Code erstellen wir zunächst eine Tabelle mit dem Namen „items“, um Listenelemente zu speichern. Anschließend haben wir eine Struktur namens „Item“ erstellt und ihre Felder darin definiert. Als Nächstes haben wir eine Funktion namens „listItems“ erstellt, die alle Elemente aus der Datenbank abruft und als JSON zurückgibt. Wir haben außerdem eine Funktion namens „updateItem“ erstellt, die ein einzelnes Element aktualisiert.

Wir haben in dieser Golang-Datei eine Routing-Gruppe mit dem Namen „api“ erstellt und zwei Routen definiert: GET /items und PUT /items/:id. Die GET-Route wird verwendet, um alle Elemente abzurufen, und die PUT-Route wird verwendet, um ein einzelnes Element zu aktualisieren.

Wir haben außerdem eine Middleware namens „corsMiddleware“ hinzugefügt, um CORS-Probleme zu lösen. CORS ermöglicht es Code in einer Domäne, Anfragen an eine API in einer anderen Domäne zu stellen, was bei der Entwicklung von Webanwendungen sehr häufig vorkommt.

Schritt 2: Erstellen Sie das React-Frontend

Als nächstes müssen wir das React-Frontend erstellen. Wir werden React und die React-DnD-Bibliothek verwenden, um Drag-and-Drop-Funktionalität zu implementieren. Wir werden auch die Axios-Bibliothek verwenden, um Daten vom Backend-Server abzurufen.

Zuerst müssen wir einen Ordner namens „ItemList“ erstellen und den folgenden Code in einer Datei namens „ItemList.jsx“ speichern:

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

In dieser React-Komponente verwenden wir zuerst useState und useEffect, um die Daten der Liste abzurufen Artikel. Anschließend haben wir eine Funktion namens „onDragEnd“ erstellt, um das Drag-Ereignis zu verarbeiten und die Daten zu aktualisieren. Wir haben auch eine ziehbare Liste mithilfe der React-DnD-Bibliothek erstellt. In dieser „ItemList“-Komponente rendern wir ein ff6d136ddc5fdfeffaf53ff6ee95f185-Element, das alle Listenelemente enthält, und machen sie mithilfe der a245a8242cd745c2107f18b8f8f45369-Komponente ziehbar. Wir verwenden auch die Komponente 8c5c063a1d171dc2ddd51709ef854a36, um die gesamte Liste so zu verpacken, dass sie per Drag & Drop verschoben werden kann.

Jetzt müssen wir diese Komponente in unserer Anwendung verwenden. In unserer React-Anwendung haben wir eine Komponente namens „App“ erstellt und c88d11956a1bb01d80e1fa915d8b768b zu ihrer JSX hinzugefügt. Als nächstes fügen wir den folgenden Code zu einer Datei namens „index.js“ hinzu, um unsere React-Anwendung zu rendern:

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

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

Schritt 3: Führen Sie die Anwendung aus

Jetzt haben wir die Anwendungsentwicklung abgeschlossen. Wir müssen den Backend-Dienst und die Frontend-React-Anwendung starten, damit sie ausgeführt werden. Zuerst müssen wir Terminalfenster doppelt öffnen, in einem Fenster zu unserem Go-Anwendungsverzeichnis wechseln und den folgenden Befehl ausführen:

go run main.go

Dann müssen wir im anderen Terminalfenster zu unserem React-Anwendungsverzeichnis wechseln und den folgenden Befehl ausführen:

npm start

Jetzt können wir http://localhost:3000/ im Browser aufrufen und unsere ziehbare Liste sehen. Jetzt können Sie herumspielen und sehen, ob Sie die Listenelemente bequem ziehen und im Backend-Dienst entsprechend aktualisieren können.

Fazit

In diesem Artikel haben wir die Go-Sprache und React verwendet, um eine ziehbare Liste zu erstellen. Über die Gin- und React-DnD-Bibliothek haben wir die Funktion zum Ziehen von Listenelementen implementiert und die Axios-Bibliothek vom Backend übergeben Daten. Dieses Beispielprojekt kann als Referenz für Ihre tägliche Arbeitsentwicklung verwendet werden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Go and React eine ziehbare Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!