Go 言語と Vue.js を使用して編集可能なテーブル コンポーネントを構築する方法

最新の Web アプリケーションでは、テーブルは頻繁に使用される基本コンポーネントであるため、編集可能なテーブル コンポーネントを構築できると、開発者は非常に便利になります。この記事では、Go言語とVue.jsを使って編集可能なテーブルコンポーネントを構築する方法を紹介します。

1. 編集可能なテーブル コンポーネントとは

編集可能なテーブル コンポーネントは、ユーザーがフォームを入力、編集、変更できるようにするユーザー インターフェイス コンポーネントであり、また、いくつかの機能も提供します。新しい行の追加、行の削除、並べ替え、フィルタリング、検索などの追加機能。編集可能なテーブル コンポーネントは、データの表示とデータ入力処理の両方に非常に役立ち、さまざまなデータ表示およびデータ管理システムに非常に適しています。

2. Go 言語を使用したバックエンド プログラムの作成

Vue.js を使用してフロントエンド コンポーネントの構築を開始する前に、まずバックエンド プログラムを作成する必要があります。データストレージとデータ更新操作を処理します。そこで、ここではGo言語を使ってバックエンドプログラムを書いていきます。

まず、Go 言語 Web フレームワークを使用して Web サービスを作成する必要があります。ここでは、Gin フレームワークを使用して、単純な RESTful API を作成します。

(1) Gin フレームワークのインストール

Gin フレームワークをインストールする前に、まず Go 言語をインストールする必要があります。次に、次のコマンドを使用して、Gin フレームワークをインストールします。

go get -u github.com/gin-gonic/gin

(2) 新しい Go ファイルを作成します

プロジェクト ディレクトリに、main.go# という名前のファイルを作成します。 # #ファイルに移動し、次の内容を入力します:

package main import ( "github.com/gin-gonic/gin" ) func main() { r := gin.Default() r.GET("/api/tabledata", func(c *gin.Context) { // TODO: 返回表格数据 }) r.PUT("/api/tabledata", func(c *gin.Context) { // TODO: 更新表格数据 }) r.Run(":4000") }

4000。同時に、GETリクエストとPUTリクエストの 2 つのルートもそれぞれ作成し、ルーティング関数で実行する必要がある操作を定義しました。このルーティング関数の TODO コメントは、表形式のデータを返すコードを記述する必要があることを示しています。

r.GET("/api/tabledata", func(c *gin.Context) { tableData := []map[string]interface{}{ {"name": "John Doe", "age": 30, "email": "johndoe@example.com"}, {"name": "Jane Doe", "age": 25, "email": "janedoe@example.com"}, {"name": "Bob Smith", "age": 45, "email": "bobsmith@example.com"}, } c.JSON(200, gin.H{ "data": tableData, }) })

tableDataという名前の変数を定義します。これは、name、age#map を含む 3 つの名前を含む変数です。## 属性とemail属性のスライスを入力します。次に、c.JSONメソッドを使用してそのデータを返します。(4) テーブル データの更新

テーブル データの更新操作を処理するコードを記述する必要もあります。ルーティング関数の TODO コメントの下で、次のコードを使用してこれを実現します。

r.PUT("/api/tabledata", func(c *gin.Context) { var updatedData []map[string]interface{} if err := c.BindJSON(&updatedData); err != nil { c.JSON(400, gin.H{"error": "Bad request"}) return } // TODO: 将更新后的数据保存到数据库或其他存储介质中 c.Status(204) })

このコードでは、新しい変数

を定義します。これは、複数の # を含む変数です。 ##mapタイプのスライス。次に、c.BindJSONメソッドを使用してリクエストから JSON 形式のデータを抽出し、解析してupdatedData変数に入れます。同時に、更新されたデータをデータベースまたは他の記憶媒体に保存する関数を TODO に記述する必要もあります。

Vue.js を使用したフロントエンド コンポーネントの作成

3. これで、データのストレージと更新操作を処理する単純な Web サービスを作成しました。次に、Vue.js を使用してフロントエンド コンポーネントを作成し、ユーザーフレンドリーな編集可能なテーブル インターフェイスを提供します。

npm install vue

EditableTable.vue

tableColumns配列内の各要素にバインドします。データ行では、別のv-for

tableData配列内の各要素にバインドします。また、v-modelディレクティブを使用して、各セルの値をtableData配列内の対応する位置にバインドします。最後に、フッター行に、addRow

deleteRowメソッドを呼び出してデータ行を削除することで、新しいデータ行を追加するボタンを追加します。 。(3) Vue コンポーネントの使用

EditableTable

tableDataとテーブル列。ここで、別の Vue コンポーネントのEditableTableコンポーネントを参照し、それにtableDataおよびtableColumnsパラメータを渡します。

componentsオプションに登録しました。次に、2 つの空の配列tableDataとtableColumnsを定義します。これらは、データをEditableTableコンポーネントに渡すために使用されます。created

loadDataメソッドを使用して Web サーバーからデータをロードします。beforeDestroyフック関数では、saveDataメソッドを使用して、更新されたデータを Web サーバーに保存します。

4. 将后端和前端组合起来

我们已经编写了使用Go语言编写的简单Web服务和一个可编辑的Vue组件。现在，我们将将它们组合在一起，以便能够在Web应用程序中使用它们。

(1) 启动后端Web服务

在终端中运行以下命令来启动后端Web服务：

go run main.go

这将会在命令行中输出一些日志，并且Web服务将在端口4000上监听请求。

(2) 使用前端组件

现在，在另一个终端窗口中，运行以下命令来启动前端Web应用程序：

npm run serve

这将会在浏览器中启动一个新的Web应用程序，并加载Vue.js组件。现在，您应该能够浏览可编辑的表格，添加、修改和删除表格数据，并保存更改到后端Web服务。

5. 总结

本文介绍了如何使用Go语言和Vue.js构建可编辑的表格组件。我们首先编写了一个简单的Web服务，以处理数据的存储和更新操作。然后，我们使用Vue.js编写了一个可编辑的表格组件，并将其与后端Web服务组合在一起，以提供一种用户友好的表格界面。这个Vue组件允许用户添加、修改和删除表格数据，并将更改保存到后端Web服务。

以上がGo 言語と Vue.js を使用して編集可能なテーブル コンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。