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.
Tulis program back-end menggunakan bahasa Go
go get -u github.com/gin-gonic/gin
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
. 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
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)
}), 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
npm install vue
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
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
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
, kami akan menggunakan kaedah created untuk menyimpan data yang dikemas kini ke pelayan web. loadData
我们已经编写了使用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服务。
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!
Penggunaan kata kunci Jenis dalam Go
Cara melaksanakan senarai terpaut dalam go
Apakah perisian pengaturcaraan bahasa Go?
Bagaimana untuk belajar bahasa go dari 0 asas
Apakah kaedah untuk melaksanakan lebihan beban operator dalam bahasa Go?
Apakah pengendali dalam bahasa Go?
Perisian penilaian pelayan
Senarai harga peringkat Douyin 1-75
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
