Cara membina komponen jadual boleh diedit menggunakan bahasa Go dan Vue.js

Dalam aplikasi web moden, jadual ialah komponen asas yang kerap digunakan, jadi dapat membina komponen jadual boleh diedit akan memberikan kemudahan yang besar kepada pembangun. Artikel ini akan memperkenalkan cara membina komponen jadual boleh diedit menggunakan bahasa Go dan Vue.js.

1. Apakah itu komponen jadual boleh diedit? fungsi tambahan, seperti menambah baris baharu, memadamkan baris, mengisih, menapis dan mencari. Komponen jadual boleh diedit sangat berguna untuk kedua-dua memaparkan data dan pemprosesan kemasukan data, dan sangat sesuai untuk pelbagai paparan data dan sistem pengurusan data.

Tulis program back-end menggunakan bahasa Go

2. Sebelum kita mula membina komponen front-end menggunakan Vue.js, kita perlu menulis program back-end terlebih dahulu untuk mengendalikan penyimpanan data dan operasi Kemas kini data. Jadi, di sini kita akan menulis program backend menggunakan bahasa Go.

Pertama, kita perlu menggunakan rangka kerja web bahasa Go untuk mencipta perkhidmatan web. Di sini kita akan menggunakan rangka kerja Gin untuk mencipta API RESTful yang mudah.

(1) Pasang rangka kerja Gin

Sebelum memasang rangka kerja Gin, anda perlu memasang bahasa Go terlebih dahulu. Anda kemudiannya boleh menggunakan arahan berikut untuk memasang rangka kerja Gin:

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

(2) Cipta fail Go baharu

Dalam direktori projek, cipta fail Go bernama

dan Masukkan berikut:

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) Kembalikan data jadualmain.go

Dalam kod di atas, kami telah mencipta laluan Gin mudah yang akan mendengar pada port apabila perkhidmatan web sedang berjalan

. Pada masa yang sama, kami turut mencipta dua laluan untuk permintaan

dan

masing-masing, dan menentukan operasi yang perlu dilakukan dalam fungsi penghalaan. Komen TODO dalam fungsi penghalaan ini menunjukkan bahawa kita perlu menulis kod untuk mengembalikan data jadual. 4000

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

GETDalam fungsi penghalaan, kami mentakrifkan pembolehubah bernama PUT, iaitu jenis yang mengandungi tiga atribut

termasuk

, tableData dan name hirisan. Kami kemudian menggunakan kaedah age untuk mengembalikan data tersebut. emailmap(4) Kemas kini data jadual c.JSON

Kami juga perlu menulis sekeping kod untuk mengendalikan operasi kemas kini data jadual. Di bawah ulasan TODO dalam fungsi penghalaan, kami akan menggunakan kod berikut untuk mencapai ini:

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

Dalam kod ini, kami mentakrifkan pembolehubah baharu

, iaitu pembolehubah yang mengandungi berbilang

jenis hirisan. Kami kemudian menggunakan kaedah

untuk mengekstrak data berformat JSON daripada permintaan dan menghuraikannya ke dalam pembolehubah updatedData. mapc.BindJSONPada masa yang sama, kita juga perlu menulis fungsi dalam TODO untuk menyimpan data yang dikemas kini ke pangkalan data atau media storan lain. updatedData

Tulis komponen bahagian hadapan menggunakan Vue.js

3. Kini, kami telah menulis perkhidmatan web ringkas untuk mengendalikan operasi penyimpanan dan kemas kini data. Seterusnya, kami akan menggunakan Vue.js untuk menulis komponen bahagian hadapan untuk menyediakan antara muka jadual boleh diedit yang mesra pengguna.

(1) Pasang Vue.js

Mula-mula, kita perlu memasang Vue.js dalam projek. Anda boleh menggunakan arahan berikut untuk memasang Vue.js:

npm install vue

(2) Cipta komponen Vue

Seterusnya, kami akan mencipta komponen Vue bernama

untuk menyediakan antara muka borang yang boleh diedit.

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

Dalam komponen Vue, kami mula-mula mentakrifkan jadual, yang mengandungi baris pengepala, baris data dan baris pengaki. Dalam baris pengepala, kami menggunakan arahan EditableTable.vue untuk mengikat setiap lajur pengepala kepada setiap elemen dalam tatasusunan

.

v-forDalam baris data, kami menggunakan arahan tableColumns yang lain untuk mengikat sel setiap baris kepada setiap elemen dalam tatasusunan

. Kami juga menggunakan arahan

untuk mengikat nilai setiap sel ke kedudukan yang sepadan dalam tatasusunan v-for. tableDatav-modelAkhir sekali, dalam baris pengaki, kami menambah butang yang menambah baris data baharu dengan memanggil kaedah tableData dan memadamkan baris dengan memanggil kaedah

.

addRow(3) Menggunakan komponen Vue deleteRow

Kami telah mencipta komponen Vue bernama

dan komponen itu boleh menerima dua parameter yang diperlukan:

dan

. Sekarang, kami akan merujuk komponen EditableTable dalam komponen Vue lain dan menghantar parameter tableData dan tableColumns kepadanya. EditableTable

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

tableDataDalam komponen Vue ini, kami mula-mula memperkenalkan komponen tableColumns dan mendaftarkannya dalam pilihan

. Kemudian, kami mentakrifkan dua tatasusunan kosong

dan EditableTable, yang akan digunakan untuk menghantar data kepada komponen components. tableDatatableColumnsDalam fungsi cangkuk EditableTable, kami akan menggunakan kaedah

untuk memuatkan data daripada pelayan web. Dalam fungsi cangkuk

, kami akan menggunakan kaedah created untuk menyimpan data yang dikemas kini ke pelayan web. loadData

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服务。

Atas ialah kandungan terperinci Cara membina komponen jadual boleh diedit menggunakan bahasa Go dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!