Go 言語と Vue.js を使用して再利用可能なモーダルコンポーネントを構築する方法-Golang-php.cn

Go 言語と Vue.js を使用して再利用可能なモーダルコンポーネントを構築する方法

WBOY

リリース： 2023-06-17 23:18:12

オリジナル

943 人が閲覧しました

Web アプリケーションの継続的な開発により、モーダルボックスは Web デザインに不可欠な部分になりました。モーダルは、ユーザーがアプリケーションを操作するときに情報を表示したりデータを収集したりするために使用されるポップアップウィンドウです。この記事では、Go 言語と Vue.js を使用して再利用可能なモーダルコンポーネントを構築する方法を紹介します。

Go 言語は、Google が開発した効率的で信頼性が高く、組み立てが簡単なプログラミング言語です。 Vue.js は、ユーザーインターフェイスの構築に重点を置いた軽量の JavaScript フレームワークです。 Go 言語と Vue.js を併用して、効率的な Web アプリケーションを作成します。この記事では、これら 2 つのツールを使用して再利用可能なモーダルコンポーネントを構築する方法を説明します。

このチュートリアルを開始する前に、次の前提条件を満たしている必要があります:

Go 言語の基本的な知識。
Vue.js フレームワークとその基本概念をよく理解してください。
Visual Studio Code などのテキストエディター。

Vue.js と Bootstrap を使用してモーダルコンポーネントを構築します。 Vue.js および Bootstrap パッケージがインストールされていることを確認してください。

ステップ 1: Vue.js コンポーネントを作成する

まず、モーダルボックスを含む Vue.js コンポーネントを作成する必要があります。 Vue.js アプリケーションで、「components」という新しいフォルダーを作成し、その中に「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>

ログイン後にコピー

このコンポーネントには、タイトル、本文、およびアクションを保存またはキャンセルするためのボタンがあります。このコンポーネントには、ユーザーが「保存」ボタンをクリックしたときにイベントを発行する「save」と呼ばれるメソッドもあります。

ステップ 2: ブートストラップを使用してモーダルボックスを作成する

次に、ブートストラップを使用して実際のモーダルボックスを作成する必要があります。アプリケーションに「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 を作成する必要があります。新しい Go 言語フォルダー (たとえば「api」) を作成し、その中に「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
    }
}

ログイン後にコピー

このファイルは、String 型のタイトルフィールドを含む「modal」という名前の構造体を定義します。また、「getModal」と「saveModal」という 2 つの関数もあり、ヘッダーを返すか保存するために GET リクエストと POST リクエストを送信するために使用されます。

ステップ 4: Axios を使用して HTTP リクエストを送信する

最後に、Axios ライブラリを使用して Vue.js アプリケーションで HTTP リクエストを送信し、Go バックエンドと対話する必要があります。次の JavaScript コードを「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>

ログイン後にコピー

このコードは、Axios ライブラリを使用して POST リクエストと GET リクエストを送信し、Go バックエンドと対話し、ヘッダーを保存または取得します。

これで、Go 言語と Vue.js を使用して再利用可能なモーダルボックスコンポーネントを構築するプロセスが完了しました。このコードを参照として使用して、特定の Web デザインのニーズを満たす独自のモーダルコンポーネントを構築できます。

以上がGo 言語と Vue.js を使用して再利用可能なモーダルコンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。