Maison > Article > développement back-end > Comment créer des composants modaux réutilisables à l'aide du langage Go et de Vue.js

Comment créer des composants modaux réutilisables à l'aide du langage Go et de Vue.js

WBOYoriginal: 2023-06-17 23:18:12920parcourir

Avec le développement continu des applications Web, les boîtes modales sont devenues un élément indispensable de la conception Web. Un modal est une fenêtre contextuelle utilisée pour afficher des informations ou collecter des données lorsque l'utilisateur interagit avec une application. Dans cet article, nous présenterons comment créer des composants modaux réutilisables à l'aide du langage Go et de Vue.js.

Le langage Go est un langage de programmation efficace, fiable et facile à assembler développé par Google. Vue.js est un framework JavaScript léger qui se concentre sur la création d'interfaces utilisateur. Utilisez le langage Go et Vue.js ensemble pour créer des applications Web efficaces. Dans cet article, nous allons vous montrer comment utiliser ces deux outils pour créer des composants modaux réutilisables.

Avant de commencer ce tutoriel, vous devez avoir les prérequis suivants :

Quelques connaissances de base du langage Go.
Soyez familier avec le framework Vue.js et ses concepts de base.
Un éditeur de texte tel que Visual Studio Code, etc.

Nous allons construire notre composant modal en utilisant Vue.js et Bootstrap. Veuillez vous assurer que vous avez installé les packages Vue.js et Bootstrap.

Étape 1 : Créer un composant Vue.js

Tout d'abord, nous devons créer un composant Vue.js qui contient une boîte modale. Dans votre application Vue.js, créez un nouveau dossier, dites « composants », et à l'intérieur, créez un fichier appelé « Modal.vue ». Copiez le code suivant :

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

Ce composant a un titre, un corps et des boutons pour enregistrer ou annuler l'action. Il existe également une méthode appelée "save" sur ce composant qui émet un événement lorsque l'utilisateur clique sur le bouton "Save".

Étape 2 : Créer le modal à l'aide de Bootstrap

Ensuite, nous devons créer le modal réel à l'aide de Bootstrap. Créez un nouveau fichier appelé "index.html" dans votre application et ajoutez-y le code HTML suivant :

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

Ce code introduit un composant Vue.js contenant une boîte modale dans l'application, puis utilise Bootstrap pour créer un véritable modal.

Étape 3 : Créer un backend en utilisant le langage Go

Maintenant, nous devons créer une API backend en utilisant le langage Go pour interagir avec notre boîte modale. Nous allons créer un nouveau dossier de langue Go, disons « api », et y créer un fichier appelé « handler.go ». Copiez le code suivant :

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

Ce fichier définit une structure nommée "modal", qui contient un champ titre de type String. Il existe également deux fonctions appelées « getModal » et « saveModal » qui sont utilisées pour envoyer des requêtes GET et POST pour renvoyer ou enregistrer des en-têtes.

Étape 4 : Envoyer une requête HTTP à l'aide d'Axios

Enfin, nous devons utiliser la bibliothèque Axios pour envoyer une requête HTTP dans l'application Vue.js afin d'interagir avec le backend Go. Ajoutez le code JavaScript suivant dans le fichier "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>

Ce code utilise la bibliothèque Axios pour envoyer des requêtes POST et GET pour interagir avec le backend Go et enregistrer ou récupérer les en-têtes.

Vous avez maintenant terminé le processus de création d'un composant modal réutilisable à l'aide du langage Go et de Vue.js. Vous pouvez utiliser ce code comme référence pour créer vos propres composants modaux afin de répondre à vos besoins spécifiques en matière de conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser Google Cloud Datastore dans Go : un guide completArticle suivant：Utiliser Google Cloud Datastore dans Go : un guide complet

Articles Liés

Voir plus