最新の Web アプリケーションでは、ドラッグ アンド ドロップ機能はユーザーに優れたインタラクティブなエクスペリエンスを提供できるため、標準機能の 1 つになっています。この記事では、Go 言語と React を使用してドラッグ可能なリストを作成し、Web アプリケーションをより使いやすく、より興味深いものにする方法を紹介します。
ステップ 1: バックエンド サービスを構築する
まず、リスト データを管理するバックエンド サービスを構築する必要があります。 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」という構造体を作成し、その中にそのフィールドを定義しました。次に、データベースからすべての項目を取得し、JSON として返す「listItems」という関数を作成しました。また、単一の項目を更新する「updateItem」という関数も作成しました。
この Golang ファイルに「api」という名前のルーティング グループを作成し、GET /items と PUT /items/:id という 2 つのルートを定義しました。 GET ルートはすべての項目を取得するために使用され、PUT ルートは 1 つの項目を更新するために使用されます。
CORS の問題を処理するために、「corsMiddleware」というミドルウェアも追加しました。 CORS を使用すると、あるドメインのコードが別のドメインの API にリクエストを行うことができます。これは、Web アプリケーションを開発する場合に非常に一般的です。
ステップ 2: 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 とリスト項目のデータを取得するには、Effect を使用します。次に、ドラッグ イベントを処理してデータを更新する「onDragEnd」という関数を作成しました。また、React-DnD ライブラリを使用してドラッグ可能なリストも作成しました。この「ItemList」コンポーネントでは、すべてのリスト項目を含む
ここで、アプリケーションでこのコンポーネントを使用する必要があります。 React アプリケーションでは、「App」というコンポーネントを作成し、その JSX に
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));ステップ 3: アプリケーションを実行します
これで、応用。バックエンド サービスとフロントエンド React アプリケーションが実行されていることを確認するには、それらを開始する必要があります。まず、ターミナル ウィンドウを 2 回開き、一方のウィンドウで Go アプリケーション ディレクトリに切り替えて、次のコマンドを実行する必要があります。
go run main.go
次に、もう一方のターミナル ウィンドウで React アプリケーション ディレクトリに切り替え、次のコマンドを実行します。次のコマンド:
npm start
これで、ブラウザで http://localhost:3000/ にアクセスし、ドラッグ可能なリストを確認できます。ここで、リスト項目を快適にドラッグし、バックエンド サービスでそれに応じて更新できるかどうかを試してみましょう。
結論
この記事では、Go 言語と React を使用してドラッグ可能なリストを作成し、Gin と React-DnD ライブラリを通じて、リスト項目をドラッグする機能を実装し、そこからデータを取得しましたAxios ライブラリを介してバックエンド サーバーに接続します。このサンプル プロジェクトは、日々の作業開発の参考として使用できます。
以上がGo と React を使用してドラッグ可能なリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
