Comment créer un composant de table modifiable en utilisant le langage Go et Vue.js

Dans les applications Web modernes, les tableaux sont un composant de base fréquemment utilisé, donc pouvoir créer des composants de tableau modifiables offrira aux développeurs une grande commodité. Cet article explique comment créer un composant de table modifiable à l'aide du langage Go et de Vue.js.

1. Qu'est-ce qu'un composant de tableau modifiable ?

Le composant de tableau modifiable est un composant d'interface utilisateur qui permet aux utilisateurs de saisir, d'éditer et de modifier le formulaire, et fournit également des fonctions supplémentaires, telles que l'ajout de nouvelles lignes, la suppression de lignes, trier, filtrer et rechercher, etc. Le composant tableau modifiable est très utile à la fois pour l'affichage des données et le traitement de la saisie des données, et convient très bien à divers systèmes d'affichage et de gestion des données.

2. Écrire un programme back-end en utilisant le langage Go

Avant de commencer à créer des composants front-end à l'aide de Vue.js, nous devons écrire un programme back-end pour gérer les opérations de stockage et de mise à jour des données. Nous allons donc ici écrire le programme backend en utilisant le langage Go.

Tout d'abord, nous devons utiliser le framework Web du langage Go pour créer un service Web. Ici, nous utiliserons le framework Gin pour créer une API RESTful simple.

(1) Installez le framework Gin

Avant d'installer le framework Gin, vous devez d'abord installer le langage Go. Ensuite, vous pouvez utiliser la commande suivante pour installer le framework Gin :

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

(2) Créez un nouveau fichier Go

Dans le répertoire du projet, créez un fichier Go nommé main.go et saisissez ce qui suit : main.go的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) 返回表格数据

在上面的代码中，我们创建了一个简单的Gin路由，它会在Web服务运行时监听端口4000。同时，我们还为GET和PUT请求分别创建了两个路由，并在路由函数中定义了需要执行的操作。这个路由函数中的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和email属性的map类型切片。我们然后使用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中编写一个保存更新后的数据到数据库或其他存储介质的功能。

3. 使用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组件，并且该组件可以接受两个必需参数：tableData和tableColumns。现在，我们将在另一个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选项中注册它。然后，我们定义了两个空数组tableData和tableColumns，这两个数组将用于向EditableTable组件传递数据。

在created钩子函数中，我们将使用loadData方法来从Web服务端加载数据。在beforeDestroy钩子函数中，我们将使用saveData

go run main.go

(3) Renvoie les données de la table 🎜🎜Dans le code ci-dessus, nous avons créé une simple route Gin qui écoutera sur le port 4000 lorsque le service Web est en cours d'exécution. Dans le même temps, nous avons également créé deux routes pour les requêtes GET et PUT respectivement, et défini les opérations qui doivent être effectuées dans la fonction de routage. Le commentaire TODO dans cette fonction de routage indique que nous devons écrire du code pour renvoyer des données tabulaires. 🎜

npm run serve

🎜Dans la fonction de routage, nous définissons une variable nommée tableData, qui est une variable contenant trois éléments dont name, age > et < tranches de type code>map des attributs email. Nous utilisons ensuite la méthode c.JSON pour renvoyer ces données. 🎜🎜(4) Mettre à jour les données de la table🎜🎜Nous devons également écrire un morceau de code pour gérer l'opération de mise à jour des données de la table. Sous le commentaire TODO dans la fonction de routage, nous utiliserons le code suivant pour y parvenir : 🎜rrreee🎜 Dans ce code, nous définissons une nouvelle variable updatedData, qui est une variable contenant plusieurs < Une tranche de tapez code>carte. Nous utilisons ensuite la méthode c.BindJSON pour extraire les données au format JSON de la requête et les analyser dans une variable updatedData. 🎜🎜Dans le même temps, nous devons également écrire une fonction dans TODO pour enregistrer les données mises à jour dans une base de données ou sur un autre support de stockage. 🎜

🎜Écriture de composants frontaux à l'aide de Vue.js🎜🎜🎜Maintenant, nous avons écrit un service Web simple pour gérer les opérations de stockage et de mise à jour des données. Ensuite, nous utiliserons Vue.js pour écrire des composants frontaux afin de fournir une interface de table modifiable conviviale. 🎜🎜(1) Installez Vue.js🎜🎜Tout d'abord, nous devons installer Vue.js dans le projet. Vous pouvez utiliser la commande suivante pour installer Vue.js : 🎜rrreee🎜(2) Créer un composant Vue 🎜🎜Ensuite, nous créerons un composant Vue nommé EditableTable.vue pour fournir une interface Table modifiable. 🎜rrreee🎜Dans le composant Vue, nous définissons d'abord un tableau qui contient une ligne d'en-tête, une ligne de données et une ligne de pied de page. Dans la ligne d'en-tête, nous utilisons la directive v-for pour lier chaque colonne de l'en-tête du tableau à chaque élément du tableau tableColumns. 🎜🎜Dans les lignes de données, nous utilisons une autre directive v-for pour lier les cellules de chaque ligne à chaque élément du tableau tableData. Nous utilisons également la directive v-model pour lier la valeur de chaque cellule à l'emplacement correspondant dans le tableau tableData. 🎜🎜Enfin, dans la ligne de pied de page, nous avons ajouté un bouton qui ajoute une nouvelle ligne de données en appelant la méthode addRow et supprime la ligne de données en appelant la méthode deleteRow . 🎜🎜(3) Utilisation des composants Vue🎜🎜Nous avons créé un composant Vue nommé EditableTable, et le composant peut accepter deux paramètres requis : tableData et tableColumns</ code>. Maintenant, nous allons référencer le composant <code>EditableTable dans un autre composant Vue et lui transmettre les paramètres tableData et tableColumns. 🎜rrreee🎜Dans ce composant Vue, nous avons d'abord introduit le composant EditableTable et l'avons enregistré dans l'option components. Ensuite, nous définissons deux tableaux vides tableData et tableColumns, qui seront utilisés pour transmettre des données au composant EditableTable. 🎜🎜Dans la fonction hook created, nous utiliserons la méthode loadData pour charger les données depuis le serveur Web. Dans la fonction hook beforeDestroy, nous utiliserons la méthode saveData pour enregistrer les données mises à jour sur le serveur 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服务。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!