Rumah > Artikel > pembangunan bahagian belakang > Cara membina komponen modal boleh guna semula menggunakan bahasa Go dan Vue.js

Cara membina komponen modal boleh guna semula menggunakan bahasa Go dan Vue.js

WBOYasal: 2023-06-17 23:18:12920semak imbas

Dengan pembangunan aplikasi web yang berterusan, kotak modal telah menjadi bahagian yang sangat diperlukan dalam reka bentuk web. Modal ialah tetingkap timbul yang digunakan untuk memaparkan maklumat atau mengumpul data apabila pengguna berinteraksi dengan aplikasi. Dalam artikel ini, kami akan memperkenalkan cara membina komponen modal boleh guna semula menggunakan bahasa Go dan Vue.js.

Bahasa Go ialah bahasa pengaturcaraan yang cekap, boleh dipercayai dan mudah dipasang yang dibangunkan oleh Google. Vue.js ialah rangka kerja JavaScript ringan yang memfokuskan pada membina antara muka pengguna. Gunakan bahasa Go dan Vue.js bersama-sama untuk mencipta aplikasi web yang cekap. Dalam artikel ini, kami akan menunjukkan kepada anda cara menggunakan kedua-dua alatan ini untuk membina komponen modal boleh guna semula.

Sebelum memulakan tutorial ini, anda perlu mempunyai prasyarat berikut:

Beberapa pengetahuan asas bahasa Go.
Kenal dengan rangka kerja Vue.js dan konsep asasnya.
Penyunting teks, seperti Kod Visual Studio, dsb.

Kami akan membina komponen modal kami menggunakan Vue.js dan Bootstrap. Sila pastikan anda telah memasang pakej Vue.js dan Bootstrap.

Langkah 1: Buat komponen Vue.js

Pertama, kita perlu mencipta komponen Vue.js yang mengandungi kotak modal. Dalam aplikasi Vue.js anda, cipta folder baharu, sebut "komponen", dan di dalamnya buat fail yang dipanggil "Modal.vue". Salin kod berikut:

<template>
  <div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{title}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <slot></slot>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{cancelText}}</button>
          <button type="button" class="btn btn-primary" @click="save">{{saveText}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    cancelText: {
      type: String,
      default: 'Cancel'
    },
    saveText: {
      type: String,
      default: 'Save'
    }
  },
  methods: {
    save() {
      this.$emit('save');
    }
  }
}
</script>

Komponen ini mempunyai tajuk, kandungan dan butang untuk menyimpan atau membatalkan tindakan. Terdapat juga kaedah yang dipanggil "simpan" pada komponen ini yang mengeluarkan peristiwa apabila pengguna mengklik butang "Simpan".

Langkah 2: Cipta modal menggunakan Bootstrap

Seterusnya, kita perlu mencipta modal sebenar menggunakan Bootstrap. Cipta fail baharu yang dipanggil "index.html" dalam aplikasi anda dan tambahkan kod HTML berikut di dalamnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <modal ref="modal" :title="title" :cancel-text="cancelText" :save-text="saveText" @save="save"></modal>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-bootstrap-modal"></script>
    <script>
      new Vue({
        el: '#app',
        components: {
          modal: VueBootstrapModal
        },
        data: {
          title: 'Modal Title',
          cancelText: 'Cancel',
          saveText: 'Save'
        },
        methods: {
          save() {
            alert('Save clicked');
          },
          showModal() {
            this.$refs.modal.$modal.show();
          }
        }
      });
    </script>
  </body>
</html>

Kod ini memperkenalkan komponen Vue.js yang mengandungi kotak modal kepada program aplikasi dan kemudian mencipta fail sebenar modal menggunakan Bootstrap.

Langkah 3: Buat bahagian belakang menggunakan bahasa Go

Sekarang, kami perlu mencipta API bahagian belakang menggunakan bahasa Go untuk berinteraksi dengan kotak modal kami. Kami akan mencipta folder bahasa Go baharu, sebut "api", dan buat fail bernama "handler.go" di dalamnya. Salin kod berikut:

package api

import (
    "encoding/json"
    "net/http"
)

type modal struct {
    Title string `json:"title"`
}

func HandleModal(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)

    switch r.Method {
    case http.MethodGet:
        getModal(w, r)
    case http.MethodPost:
        saveModal(w, r)
    default:
        w.WriteHeader(http.StatusNotFound)
    }
}

func getModal(w http.ResponseWriter, r *http.Request) {
    m := modal{
        Title: "Example Modal",
    }

    if err := json.NewEncoder(w).Encode(m); err != nil {
        w.WriteHeader(http.StatusInternalServerError)
        return
    }
}

func saveModal(w http.ResponseWriter, r *http.Request) {
    type requestData struct {
        Title string `json:"title"`
    }

    var data requestData
    if err := json.NewDecoder(r.Body).Decode(&data); err != nil {
        w.WriteHeader(http.StatusBadRequest)
        return
    }

    m := modal{
        Title: data.Title,
    }

    if err := json.NewEncoder(w).Encode(m); err != nil {
        w.WriteHeader(http.StatusInternalServerError)
        return
    }
}

Fail ini mentakrifkan struktur bernama "modal", yang mengandungi medan tajuk jenis String. Terdapat juga dua fungsi yang dipanggil "getModal" dan "saveModal" yang digunakan untuk menghantar permintaan GET dan POST untuk mengembalikan atau menyimpan pengepala.

Langkah 4: Gunakan Axios untuk menghantar permintaan HTTP

Akhir sekali, kita perlu menggunakan pustaka Axios untuk menghantar permintaan HTTP dalam aplikasi Vue.js untuk berinteraksi dengan bahagian belakang Go. Tambahkan kod JavaScript berikut dalam fail "index.html":

<script src="https://cdn.jsdelivr.net/npm/axios"></script>
<script>
  new Vue({
    el: '#app',
    components: {
      modal: VueBootstrapModal
    },
    data: {
      title: '',
      cancelText: 'Cancel',
      saveText: 'Save'
    },
    methods: {
      save() {
        axios.post('/api/modal', {
          title: this.title
        })
        .then((response) => {
          alert('Save clicked. Title: ' + response.data.title);
        })
        .catch((error) => {
          console.log(error);
        });
      },
      showModal() {
        axios.get('/api/modal')
        .then((response) => {
          this.title = response.data.title;
          this.$refs.modal.$modal.show();
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }
  });
</script>

Kod ini menggunakan pustaka Axios untuk menghantar permintaan POST dan GET untuk berinteraksi dengan bahagian belakang Go dan simpan atau dapatkan pengepala.

Anda kini telah menyelesaikan proses membina komponen modal boleh guna semula menggunakan bahasa Go dan Vue.js. Anda boleh menggunakan kod ini sebagai rujukan untuk membina komponen modal anda sendiri untuk memenuhi keperluan reka bentuk web khusus anda.

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menggunakan Google Cloud Datastore dalam Go: Panduan LengkapArtikel seterusnya：Menggunakan Google Cloud Datastore dalam Go: Panduan Lengkap

Artikel berkaitan

Lihat lagi