Cara membina senarai boleh seret menggunakan Go and React

Dalam aplikasi web moden, fungsi drag-and-drop telah menjadi salah satu ciri standard kerana ia boleh memberikan pengguna pengalaman interaktif yang lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa Go dan React untuk membina senarai boleh seret untuk menjadikan aplikasi web anda lebih mudah digunakan dan lebih menarik.

Langkah 1: Bina perkhidmatan hujung belakang

Pertama, kita perlu membina perkhidmatan hujung belakang untuk mengurus data senarai. Kami akan mencipta API REST yang mudah menggunakan bahasa Go. Untuk memudahkan kod kami, kami akan menggunakan kedua-dua rangka kerja Gin dan perpustakaan GORM.

Pertama, kita perlu mencipta jadual yang dipanggil "item" untuk menyimpan item senarai kita.

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

Seterusnya, kami mencipta fail Golang dan menambah kod berikut di dalamnya:

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

Dalam kod ini, kami mula-mula mencipta jadual yang dipanggil "item" dengan untuk menyimpan item senarai. Kami kemudian mencipta struct yang dipanggil "Item" dan menentukan medannya di dalamnya. Seterusnya, kami mencipta fungsi yang dipanggil "listItems" yang mengambil semua item daripada pangkalan data dan mengembalikannya sebagai JSON. Kami juga mencipta fungsi yang dipanggil "updateItem" yang mengemas kini satu item.

Kami mencipta kumpulan penghalaan bernama "api" dalam fail Golang ini dan menentukan dua laluan: GET /items dan PUT /items/:id. Laluan GET digunakan untuk mendapatkan semua item dan laluan PUT digunakan untuk mengemas kini satu item.

Kami juga menambah perisian tengah yang dipanggil "corsMiddleware" untuk mengendalikan isu CORS. CORS membenarkan kod dalam satu domain untuk membuat permintaan kepada API dalam domain lain, yang sangat biasa apabila membangunkan aplikasi web.

Langkah 2: Bina bahagian hadapan React

Seterusnya, kita perlu mencipta bahagian hadapan React. Kami akan menggunakan React dan perpustakaan React-DnD untuk melaksanakan fungsi seret dan lepas. Kami juga akan menggunakan perpustakaan Axios untuk mendapatkan data daripada pelayan bahagian belakang.

Pertama, kita perlu mencipta folder yang dipanggil "ItemList" dan simpan kod berikut ke dalam fail yang dipanggil "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>
    );
}

Dalam komponen React ini, kita mula-mula menggunakan useState dan useEffect untuk mendapatkan data item senarai. Kemudian, kami mencipta fungsi yang dipanggil "onDragEnd" untuk mengendalikan acara seret dan mengemas kini data. Kami juga mencipta senarai boleh seret menggunakan perpustakaan React-DnD. Dalam komponen "ItemList" ini, kami memaparkan elemen ff6d136ddc5fdfeffaf53ff6ee95f185 yang mengandungi semua item senarai dan menjadikannya boleh diseret menggunakan komponen a245a8242cd745c2107f18b8f8f45369 Kami juga menggunakan komponen 8c5c063a1d171dc2ddd51709ef854a36 untuk membalut keseluruhan senarai supaya ia boleh diseret dan digugurkan.

Sekarang, kita perlu menggunakan komponen ini dalam aplikasi kita. Dalam aplikasi React kami, kami mencipta komponen yang dipanggil "App" dan menambahkan c88d11956a1bb01d80e1fa915d8b768b Seterusnya, kami menambah kod berikut pada fail yang dipanggil "index.js" yang akan memaparkan aplikasi React kami:

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

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

Langkah 3: Jalankan aplikasi

Sekarang, kami telah menyelesaikan pembangunan permohonan itu. Kita perlu memulakan perkhidmatan bahagian belakang dan aplikasi React bahagian hadapan untuk melihatnya berjalan. Mula-mula, kita perlu membuka dua kali tetingkap terminal, bertukar kepada direktori aplikasi Go kami dalam satu tetingkap, dan jalankan arahan berikut:

go run main.go

Kemudian, tukar ke direktori aplikasi React kami dalam tetingkap terminal yang lain, Jalankan arahan berikut:

npm start

Sekarang, kita boleh melawati http://localhost:3000/ dalam penyemak imbas dan kita boleh melihat senarai boleh seret kami. Kini anda boleh bermain-main dan melihat sama ada anda boleh menyeret item senarai dengan selesa dan memintanya mengemas kini dengan sewajarnya dalam perkhidmatan bahagian belakang.

Kesimpulan

Dalam artikel ini, kami menggunakan bahasa Go dan React untuk membina senarai boleh seret Melalui perpustakaan Gin dan React-DnD, kami melaksanakan fungsi menyeret item senarai , dan mendapatkan data daripada. pelayan bahagian belakang melalui perpustakaan Axios. Contoh projek ini boleh dijadikan rujukan dalam pembangunan kerja harian anda.

Atas ialah kandungan terperinci Cara membina senarai boleh seret menggunakan Go and React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!