在現代網路應用程式中，拖曳功能已經成為標配之一，這是因為它能給使用者更好的互動體驗。在這篇文章中，我們將介紹如何使用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中文網其他相關文章！
