Cara membina komponen jadual boleh guna semula menggunakan Go and React

Dengan peningkatan kerumitan aplikasi web, jadual telah menjadi salah satu komponen yang diperlukan bagi banyak aplikasi web. Walau bagaimanapun, membina meja yang berkuasa dan mudah diselenggara memerlukan pelaburan masa dan usaha yang besar. Untuk menyelesaikan masalah ini, kita boleh menggunakan bahasa Go dan React untuk membina komponen jadual boleh guna semula untuk digunakan dalam berbilang projek.

Dalam artikel ini, kami akan memperkenalkan cara membina komponen jadual menggunakan bahasa Go dan React, membolehkan anda menggunakannya semula dengan mudah dalam projek anda.

1. Fahami asas komponen jadual

Sebelum kita mula membina komponen jadual, kita perlu memahami beberapa konsep asas. Komponen jadual biasanya terdiri daripada bahagian berikut:

• Kepala: Memaparkan tajuk lajur
• Baris: Setiap baris mengandungi sekumpulan sel. Data dalam sel boleh berupa teks, nombor, imej, dsb.
• Lajur: Setiap lajur mengandungi sekumpulan sel. Lajur biasanya menerangkan atribut atau data dalam jadual.

2. Pasang bahasa Go dan React

Jika anda belum memasang bahasa Go dan React lagi, sila pasangkannya dahulu. Anda boleh memuat turun dan memasangnya daripada pautan berikut:

• Bahasa Go: https://golang.org/
• React: https://reactjs.org/

Selepas pemasangan selesai, sila pastikan versi Go anda tidak lebih rendah daripada 1.11 dan versi React anda tidak lebih rendah daripada 16.x.

3. Buat komponen jadual asas

Sekarang, mari buat komponen jadual asas. Kami akan menggunakan React untuk mencipta komponen dan menggunakan bahasa Go untuk memproses data di latar belakang. Mula-mula, kita perlu mencipta projek bahasa Go baharu dalam baris arahan:

$ mkdir my-table-app
$ cd my-table-app
$ go mod init my-table-app

Kemudian, kita perlu mencipta komponen React baharu dalam projek itu. Dalam direktori akar projek, laksanakan arahan berikut:

$ npx create-react-app my-table-app
$ cd my-table-app

Sekarang kita telah mencipta projek React, mari tulis komponen jadual asas. Buat fail bernama "Table.js" dalam direktori src. Dalam fail ini, kami akan menulis kod untuk mencipta jadual asas.

import React from 'react';

function Table(props) {
  return (
    <>
      <table>
        <thead>
          <tr>
            {props.columns.map(column => (
              <th>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {props.rows.map(row => (
            <tr>
              {Object.values(row).map(value => (
                <td>{value}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Table;

Dalam komponen ini, kami menerima dua sifat: lajur dan baris. Atribut lajur ialah tatasusunan yang mengandungi tajuk semua lajur dalam jadual dan atribut baris ialah tatasusunan yang mengandungi data semua baris dalam jadual. Dalam komponen tersebut, kami menggunakan fungsi map() untuk mengulangi data ini dan menjadikannya dalam jadual.

4. Laksanakan antara muka pemerolehan data jadual

Seterusnya, kita perlu melaksanakan antara muka dalam bahasa Go untuk mendapatkan data jadual. Dalam bahasa Go, kami boleh menggunakan rangka kerja gin untuk mencipta API RESTful dengan mudah. Pertama, kita perlu memasang rangka kerja gin dalam projek. Jalankan arahan berikut dalam baris arahan:

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

Kemudian, buat fail bernama "main.go" dalam direktori akar projek dan tulis kod berikut:

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

type Row struct {
    ID       int
    Name     string
    Age      int
    Location string
}

var rows = []Row{
    {1, "John", 28, "New York"},
    {2, "Jane", 32, "Chicago"},
    {3, "Mary", 24, "San Francisco"},
    {4, "Bob", 41, "Miami"},
}

func main() {
    r := gin.Default()

    r.GET("/api/rows", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "rows": rows,
        })
    })

    r.Run(":8080")
}

Dalam fail ini, kami tentukan struktur bernama Row, yang mengandungi empat atribut: ID, Nama, Umur dan Lokasi. Kemudian, kami mentakrifkan baris tatasusunan, yang mengandungi data semua baris dalam jadual. Seterusnya, kami mencipta antara muka API yang dipanggil "/api/rows" yang akan mengembalikan data untuk semua baris apabila permintaan tiba. Akhirnya, kami memulakan perkhidmatan API kami menggunakan kaedah r.Run(":8080").

5. Menggunakan komponen jadual dalam React

Kini, kami telah menyelesaikan penulisan komponen jadual dan antara muka pemerolehan data. Mari kita himpunkan mereka untuk melaksanakan aplikasi jadual yang lengkap. Mula-mula, laksanakan arahan berikut dalam direktori akar projek React untuk memasang perpustakaan komponen Axios dan React Table:

$ npm install axios react-table

Kemudian, kita perlu mencipta fail bernama "App.js" dalam direktori src dan tulis Masukkan kod berikut:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from './Table';
import './App.css';
import 'react-table/react-table.css';

function App() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  useEffect(() => {
    axios.get('/api/rows').then(response => {
      setColumns(Object.keys(response.data.rows[0]));
      setRows(response.data.rows);
    });
  }, []);

  return (
    <div className="App">
      <h1>My Table App</h1>
      <Table columns={columns} rows={rows} />
    </div>
  );
}

export default App;

Dalam komponen ini, kami menggunakan cangkuk useState() dan useEffect() untuk mengurus keadaan komponen. Dalam useEffect(), kami menggunakan perpustakaan Axios untuk menghantar permintaan GET ke antara muka API kami dan menetapkan data tindak balas kepada keadaan komponen dalam fungsi panggil balik. Akhir sekali, kami memberikan jadual ke halaman dengan menghantar data keadaan ini ke dalam komponen jadual yang kami buat sebelum ini.

6. Kesimpulan

Dalam artikel ini, kami membina komponen jadual boleh guna semula menggunakan bahasa Go dan React serta mencipta aplikasi web ringkas untuk mempamerkannya . Dengan menggunakan teknik ini, kami boleh menggunakan semula komponen jadual dengan mudah dan mengurangkan masa dan usaha untuk menulis kod jadual dalam projek yang berbeza. Jika anda ingin mengetahui lebih lanjut tentang bahasa Go dan React, sila rujuk dokumentasi rasmi.

Atas ialah kandungan terperinci Cara membina komponen jadual boleh guna semula menggunakan Go and React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!