在现代Web应用程序中，拖拽功能已经成为标配之一，这是因为它能给用户更好的交互体验。在这篇文章中，我们将介绍如何使用Go语言和React构建可拖拽的列表，让你的Web应用程序更加易于使用和有趣。
第一步：搭建后端服务
首先，我们需要搭建一个后端服务，用来管理列表的数据。我们将使用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”的结构体，并在其中定义了其字段。接着，我们创建了一个名为“listItems”的函数，用来从数据库中获取所有项目，并将它们以JSON形式返回。我们还创建了一个名为“updateItem”的函数，用来更新单个项目。
我们在这个Golang文件中创建了一个名为“api”的路由组，定义了两个路由：GET /items 和 PUT /items/:id。GET路由用于获取所有项目，PUT路由用于更新单个项目。
我们还添加了一个名为“corsMiddleware”的中间件，用于处理CORS问题。CORS允许一个域中的代码向另一个域中的API发起请求，这在开发Web应用程序时非常常见。
第二步：构建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”组件中，我们渲染了一个包含所有列表项的
元素，并使用组件将它们设置为可拖拽。我们还使用组件来包装整个列表，使其可接受拖拽操作。现在，我们需要在我们的应用程序中使用这个组件。在我们的React应用程序中，我们创建了一个名为“App”的组件，并将添加到它的JSX中。接下来，我们添加以下代码到一个名为“index.js”的文件中，用来渲染我们的React应用程序：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));登录后复制
第三步：运行应用程序
现在，我们已经完成了应用程序的开发。我们需要启动后端服务和前端React应用程序以查看它们运行。首先，我们需要双开终端窗口，在其中一个窗口中切换到我们的Go应用程序目录，运行以下命令：
然后，在另一个终端窗口中切换到我们的React应用程序目录，运行以下命令：
现在，我们可以在浏览器中访问http://localhost:3000/，就可以看到我们的可拖拽列表了。现在你可以玩耍一下，看看你是否可以自如地拖动列表项，而且它们在后端服务中也会相应地更新。
结论
在这篇文章中，我们使用Go语言和React构建了一个可拖动列表，通过Gin和React-DnD库，我们实现了拖拽列表项的功能，并通过Axios库从后端服务器获取数据。这个示例项目可以作为你日常工作开发中的一个参考。
以上是如何使用Go语言和React构建可拖拽的列表的详细内容。更多信息请关注PHP中文网其他相关文章！
