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

Home

Backend Development

Golang

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 17, 2023 pm 11:18 PM

go languagevuejsReusable modal box

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 id="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>

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>

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

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

String Manipulation in Go: Mastering the 'strings' PackageMay 14, 2025 am 12:19 AM

Mastering the strings package in Go language can improve text processing capabilities and development efficiency. 1) Use the Contains function to check substrings, 2) Use the Index function to find the substring position, 3) Join function efficiently splice string slices, 4) Replace function to replace substrings. Be careful to avoid common errors, such as not checking for empty strings and large string operation performance issues.

Go 'strings' package tips and tricksMay 14, 2025 am 12:18 AM

You should care about the strings package in Go because it simplifies string manipulation and makes the code clearer and more efficient. 1) Use strings.Join to efficiently splice strings; 2) Use strings.Fields to divide strings by blank characters; 3) Find substring positions through strings.Index and strings.LastIndex; 4) Use strings.ReplaceAll to replace strings; 5) Use strings.Builder to efficiently splice strings; 6) Always verify input to avoid unexpected results.

'strings' Package in Go: Your Go-To for String OperationsMay 14, 2025 am 12:17 AM

ThestringspackageinGoisessentialforefficientstringmanipulation.1)Itofferssimpleyetpowerfulfunctionsfortaskslikecheckingsubstringsandjoiningstrings.2)IthandlesUnicodewell,withfunctionslikestrings.Fieldsforwhitespace-separatedvalues.3)Forperformance,st

Go bytes package vs strings package: Which should I use?May 14, 2025 am 12:12 AM

WhendecidingbetweenGo'sbytespackageandstringspackage,usebytes.Bufferforbinarydataandstrings.Builderforstringoperations.1)Usebytes.Bufferforworkingwithbyteslices,binarydata,appendingdifferentdatatypes,andwritingtoio.Writer.2)Usestrings.Builderforstrin

How to use the 'strings' package to manipulate strings in Go step by stepMay 13, 2025 am 12:12 AM

Go's strings package provides a variety of string manipulation functions. 1) Use strings.Contains to check substrings. 2) Use strings.Split to split the string into substring slices. 3) Merge strings through strings.Join. 4) Use strings.TrimSpace or strings.Trim to remove blanks or specified characters at the beginning and end of a string. 5) Replace all specified substrings with strings.ReplaceAll. 6) Use strings.HasPrefix or strings.HasSuffix to check the prefix or suffix of the string.

Go strings package: how to improve my code?May 13, 2025 am 12:10 AM

Using the Go language strings package can improve code quality. 1) Use strings.Join() to elegantly connect string arrays to avoid performance overhead. 2) Combine strings.Split() and strings.Contains() to process text and pay attention to case sensitivity issues. 3) Avoid abuse of strings.Replace() and consider using regular expressions for a large number of substitutions. 4) Use strings.Builder to improve the performance of frequently splicing strings.

What are the most useful functions in the GO bytes package?May 13, 2025 am 12:09 AM

Go's bytes package provides a variety of practical functions to handle byte slicing. 1.bytes.Contains is used to check whether the byte slice contains a specific sequence. 2.bytes.Split is used to split byte slices into smallerpieces. 3.bytes.Join is used to concatenate multiple byte slices into one. 4.bytes.TrimSpace is used to remove the front and back blanks of byte slices. 5.bytes.Equal is used to compare whether two byte slices are equal. 6.bytes.Index is used to find the starting index of sub-slices in largerslices.

Mastering Binary Data Handling with Go's 'encoding/binary' Package: A Comprehensive GuideMay 13, 2025 am 12:07 AM

Theencoding/binarypackageinGoisessentialbecauseitprovidesastandardizedwaytoreadandwritebinarydata,ensuringcross-platformcompatibilityandhandlingdifferentendianness.ItoffersfunctionslikeRead,Write,ReadUvarint,andWriteUvarintforprecisecontroloverbinary

See all articles