So erstellen Sie wiederverwendbare modale Komponenten mithilfe der Go-Sprache und Vue.js-Golang-php.cn

So erstellen Sie wiederverwendbare modale Komponenten mithilfe der Go-Sprache und Vue.js

WBOY

Freigeben： 2023-06-17 23:18:12

Original

943 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung von Webanwendungen sind Modalboxen zu einem unverzichtbaren Bestandteil des Webdesigns geworden. Ein Modal ist ein Popup-Fenster, das zum Anzeigen von Informationen oder zum Sammeln von Daten verwendet wird, wenn der Benutzer mit einer Anwendung interagiert. In diesem Artikel stellen wir vor, wie man mit der Go-Sprache und Vue.js wiederverwendbare modale Komponenten erstellt.

Go-Sprache ist eine effiziente, zuverlässige und einfach zu erstellende Programmiersprache, die von Google entwickelt wurde. Vue.js ist ein leichtes JavaScript-Framework, das sich auf die Erstellung von Benutzeroberflächen konzentriert. Verwenden Sie die Go-Sprache und Vue.js zusammen, um effiziente Webanwendungen zu erstellen. In diesem Artikel zeigen wir Ihnen, wie Sie mit diesen beiden Tools wiederverwendbare modale Komponenten erstellen.

Bevor Sie mit diesem Tutorial beginnen, müssen Sie die folgenden Voraussetzungen erfüllen:

Einige Grundkenntnisse der Go-Sprache.
Machen Sie sich mit dem Vue.js-Framework und seinen Grundkonzepten vertraut.
Ein Texteditor wie Visual Studio Code usw.

Wir werden unsere modale Komponente mit Vue.js und Bootstrap erstellen. Bitte stellen Sie sicher, dass Sie die Pakete Vue.js und Bootstrap installiert haben.

Schritt 1: Vue.js-Komponente erstellen

Zuerst müssen wir eine Vue.js-Komponente erstellen, die eine modale Box enthält. Erstellen Sie in Ihrer Vue.js-Anwendung einen neuen Ordner, sagen wir „components“, und erstellen Sie darin eine Datei mit dem Namen „Modal.vue“. Kopieren Sie den folgenden Code:

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

Nach dem Login kopieren

Diese Komponente verfügt über einen Titel, einen Textkörper und Schaltflächen zum Speichern oder Abbrechen der Aktion. Es gibt auch eine Methode namens „save“ für diese Komponente, die ein Ereignis ausgibt, wenn der Benutzer auf die Schaltfläche „Speichern“ klickt.

Schritt 2: Erstellen Sie das Modal mit Bootstrap

Als nächstes müssen wir das eigentliche Modal mit Bootstrap erstellen. Erstellen Sie in Ihrer Anwendung eine neue Datei mit dem Namen „index.html“ und fügen Sie darin den folgenden HTML-Code hinzu:

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

Nach dem Login kopieren

Dieser Code führt eine Vue.js-Komponente, die eine Modalbox enthält, in die Anwendung ein und erstellt dann mithilfe von Bootstrap ein tatsächliches Modal.

Schritt 3: Backend mit der Go-Sprache erstellen

Jetzt müssen wir eine Backend-API mit der Go-Sprache erstellen, um mit unserer modalen Box zu interagieren. Wir werden einen neuen Go-Sprachordner erstellen, sagen wir „api“, und darin eine Datei namens „handler.go“ erstellen. Kopieren Sie den folgenden Code:

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

Nach dem Login kopieren

Diese Datei definiert eine Struktur namens „modal“, die ein Titelfeld vom Typ String enthält. Es gibt auch zwei Funktionen namens „getModal“ und „saveModal“, die zum Senden von GET- und POST-Anfragen zum Zurückgeben oder Speichern von Headern verwendet werden.

Schritt 4: HTTP-Anfrage mit Axios senden

Schließlich müssen wir die Axios-Bibliothek verwenden, um eine HTTP-Anfrage in der Vue.js-Anwendung zu senden, um mit dem Go-Backend zu interagieren. Fügen Sie den folgenden JavaScript-Code in die Datei „index.html“ ein:

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

Nach dem Login kopieren

Dieser Code verwendet die Axios-Bibliothek, um POST- und GET-Anfragen zu senden, um mit dem Go-Backend zu interagieren und die Header zu speichern oder abzurufen.

Jetzt haben Sie den Prozess der Erstellung einer wiederverwendbaren modalen Komponente mithilfe der Go-Sprache und Vue.js abgeschlossen. Sie können diesen Code als Referenz verwenden, um Ihre eigenen modalen Komponenten zu erstellen, die Ihren spezifischen Webdesign-Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie wiederverwendbare modale Komponenten mithilfe der Go-Sprache und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!