How to build reusable modal components using Go language and Vue.js-Golang-php.cn

How to build reusable modal components using Go language and Vue.js

WBOY

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

Original

942 people have browsed it

With the continuous development of web applications, modal boxes have become an indispensable part of web design. A modal is a pop-up window used to display information or collect data when the user interacts with an application. In this article, we will introduce how to build reusable modal components using Go language and Vue.js.

Go language is an efficient, reliable and easy-to-assemble programming language developed by Google. Vue.js is a lightweight JavaScript framework that focuses on building user interfaces. Use Go language and Vue.js together to create efficient web applications. In this article, we’ll show you how to use these two tools to build reusable modal components.

Before starting this tutorial, you need to have the following prerequisites:

Some basic knowledge of the Go language.
Be familiar with the Vue.js framework and its basic concepts.
A text editor, such as Visual Studio Code, etc.

We will build our modal component using Vue.js and Bootstrap. Please make sure you have installed the Vue.js and Bootstrap packages.

Step 1: Create a Vue.js component

First, we need to create a Vue.js component that contains a modal box. In your Vue.js application, create a new folder, say "components", and inside it create a file called "Modal.vue". Copy the following 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>

Copy after login

This component has a title, body and buttons for saving or canceling the action. There is also a method called "save" on this component that emits an event when the user clicks the "Save" button.

Step 2: Create the modal box using Bootstrap

Next, we need to create the actual modal box using Bootstrap. Create a new file called "index.html" in your application and add the following HTML code in it:

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

Copy after login

This code introduces a Vue.js component containing a modal box to the application program and then created an actual modal using Bootstrap.

Step 3: Create a backend using Go language

Now, we need to create a backend API using Go language to interact with our modal box. We will create a new Go language folder, say "api", and create a file called "handler.go" in it. Copy the following 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
    }
}

Copy after login

This file defines a structure named "modal", which contains a title field of type String. There are also two functions called "getModal" and "saveModal" that are used to send GET and POST requests to return or save headers.

Step 4: Use Axios to send HTTP requests

Finally, we need to use the Axios library to send HTTP requests in the Vue.js application to interact with the Go backend. Add the following JavaScript code in the "index.html" file:

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

Copy after login

This code uses the Axios library to send POST and GET requests to interact with the Go backend and save or get the headers.

You have now completed the process of building a reusable modal box component using Go language and Vue.js. You can use this code as a reference to build your own modal components to meet your specific web design needs.

The above is the detailed content of How to build reusable modal components using Go language and Vue.js. For more information, please follow other related articles on the PHP Chinese website!