ホームページ  >  記事  >  バックエンド開発  >  Go 言語と Vue.js を使用して再利用可能なモーダル コンポーネントを構築する方法

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

WBOY
WBOYオリジナル
2023-06-17 23:18:12920ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。