Go 언어와 Vue.js를 사용하여 재사용 가능한 모달 구성 요소를 구축하는 방법-Golang-php.cn

Go 언어와 Vue.js를 사용하여 재사용 가능한 모달 구성 요소를 구축하는 방법

WBOY

풀어 주다： 2023-06-17 23:18:12

원래의

964명이 탐색했습니다.

웹 애플리케이션의 지속적인 개발로 인해 모달 상자는 웹 디자인에 없어서는 안될 부분이 되었습니다. 모달은 사용자가 애플리케이션과 상호 작용할 때 정보를 표시하거나 데이터를 수집하는 데 사용되는 팝업 창입니다. 이 글에서는 Go 언어와 Vue.js를 사용하여 재사용 가능한 모달 컴포넌트를 구축하는 방법을 소개합니다.

Go 언어는 Google에서 개발한 효율적이고 안정적이며 조립하기 쉬운 프로그래밍 언어입니다. Vue.js는 사용자 인터페이스 구축에 중점을 둔 경량 JavaScript 프레임워크입니다. Go 언어와 Vue.js를 함께 사용하여 효율적인 웹 애플리케이션을 만드세요. 이 글에서는 이 두 가지 도구를 사용하여 재사용 가능한 모달 구성 요소를 만드는 방법을 보여 드리겠습니다.

이 튜토리얼을 시작하기 전에 다음 전제 조건이 필요합니다.

Go 언어에 대한 몇 가지 기본 지식.
Vue.js 프레임워크와 기본 개념을 숙지하세요.
Visual Studio Code 등의 텍스트 편집기

Vue.js와 Bootstrap을 사용하여 모달 구성 요소를 구축하겠습니다. Vue.js 및 Bootstrap 패키지를 설치했는지 확인하세요.

1단계: Vue.js 구성 요소 만들기

먼저 모달 상자가 포함된 Vue.js 구성 요소를 만들어야 합니다. Vue.js 애플리케이션에서 "comComponents"라는 새 폴더를 만들고 그 안에 "Modal.vue"라는 파일을 만듭니다. 다음 코드를 복사하세요:

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

로그인 후 복사

이 구성 요소에는 제목, 본문 및 작업을 저장하거나 취소할 수 있는 버튼이 있습니다. 이 구성 요소에는 사용자가 "저장" 버튼을 클릭할 때 이벤트를 발생시키는 "저장"이라는 메서드도 있습니다.

2단계: Bootstrap을 사용하여 모달 만들기

다음으로 Bootstrap을 사용하여 실제 모달을 만들어야 합니다. 애플리케이션에서 "index.html"이라는 새 파일을 생성하고 그 안에 다음 HTML 코드를 추가합니다.

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

로그인 후 복사

이 코드는 모달 상자가 포함된 Vue.js 구성 요소를 애플리케이션에 도입한 다음 Bootstrap을 사용하여 실제 모달을 생성합니다.

3단계: Go 언어를 사용하여 백엔드 생성

이제 모달 상자와 상호 작용하기 위해 Go 언어를 사용하여 백엔드 API를 생성해야 합니다. "api"라는 새로운 Go 언어 폴더를 만들고 그 안에 "handler.go"라는 파일을 만듭니다. 다음 코드를 복사하세요.

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

로그인 후 복사

이 파일은 문자열 유형의 제목 필드를 포함하는 "modal"이라는 구조를 정의합니다. 헤더를 반환하거나 저장하기 위해 GET 및 POST 요청을 보내는 데 사용되는 "getModal" 및 "saveModal"이라는 두 가지 함수도 있습니다.

4단계: Axios를 사용하여 HTTP 요청 보내기

마지막으로 Go 백엔드와 상호 작용하기 위해 Axios 라이브러리를 사용하여 Vue.js 애플리케이션에서 HTTP 요청을 보내야 합니다. "index.html" 파일에 다음 JavaScript 코드를 추가합니다.

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

로그인 후 복사

이 코드는 Axios 라이브러리를 사용하여 POST 및 GET 요청을 보내 Go 백엔드와 상호 작용하고 헤더를 저장하거나 가져옵니다.

이제 Go 언어와 Vue.js를 사용하여 재사용 가능한 모달 구성 요소를 구축하는 프로세스를 완료했습니다. 이 코드를 참조로 사용하여 특정 웹 디자인 요구 사항을 충족하는 고유한 모달 구성 요소를 구축할 수 있습니다.

위 내용은 Go 언어와 Vue.js를 사용하여 재사용 가능한 모달 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!