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

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

王林

リリース： 2023-06-17 20:48:09

オリジナル

1202 人が閲覧しました

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

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

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

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

ログイン後にコピー

(3) テーブルデータを返します

上記のコードでは、Web サービス Listen on で実行される単純な Gin ルートを作成しました。ポート

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

ログイン後にコピー

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

updatedData

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

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

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

(1) Vue.js のインストール

まず、プロジェクトに Vue.js をインストールする必要があります。次のコマンドを使用して Vue.js をインストールできます。

npm install vue

ログイン後にコピー

(2) Vue コンポーネントの作成

次に、

EditableTable.vue

コンポーネントという名前の Vue を作成します。編集可能なテーブルインターフェイスを提供します。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(column, key) in tableColumns" :key="key">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(column, columnIndex) in row" :key="columnIndex">
            <input type="text" v-model="tableData[rowIndex][columnIndex]">
          </td>
          <td>
            <button @click="deleteRow(rowIndex)">Delete</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">
            <button @click="addRow">Add new row</button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  name: "EditableTable",
  props: {
    tableData: Array,
    tableColumns: Array,
  },
  methods: {
    addRow() {
      const newRow = {};
      this.tableColumns.forEach((column) => {
        newRow[column] = "";
      });
      this.tableData.push(newRow);
    },
    deleteRow(rowIndex) {
      this.tableData.splice(rowIndex, 1);
    },
  },
};
</script>

ログイン後にコピー

Vue コンポーネントでは、まずヘッダー行、データ行、フッター行を含むテーブルを定義します。ヘッダー行では、

v-for

ディレクティブを使用して、ヘッダーの各列を

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

ディレクティブを使用して、各行のセルを

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

メソッドと

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

EditableTable

という名前の Vue コンポーネントを作成しました。このコンポーネントは 2 つの必須パラメーターを受け入れることができます:

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

<template>
  <div>
    <editable-table :table-data="tableData" :table-columns="tableColumns" />
  </div>
</template>

<script>
import EditableTable from "@/components/EditableTable.vue";

export default {
  name: "App",
  components: {
    EditableTable,
  },
  data() {
    return {
      tableData: [],
      tableColumns: [],
    };
  },
  methods: {
    loadData() {
      // TODO: 从Web服务端加载数据
    },
    saveData() {
      // TODO: 将更新后的数据保存到Web服务端
    },
  },
  created() {
    this.loadData();
  },
  beforeDestroy() {
    this.saveData();
  },
};
</script>

ログイン後にコピー

この Vue コンポーネントでは、最初に EditableTable

コンポーネントを導入し、それを

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

フック関数では、

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

将后端和前端组合起来

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

(1) 启动后端Web服务

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

go run main.go

ログイン後にコピー

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

(2) 使用前端组件

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

npm run serve

ログイン後にコピー

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

总结

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

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