ファイアウォールのファイアウォール← Vuejs

8189 ワード
firebase vue programming テキストリンク
セクションによって組織されたリスト項目のコレクションは、アプリケーションの任意のタイプを構築するときに避けることができないシナリオの一つです.このガイドでは、私はどのように正確な方法を使用して表示されますVue.js and Firebase Cloud Firestore .
道に沿って、また、適切に構造化し、それのためのクラウドFirestoreデータベースをクエリする方法を学ぶつもりです.
このチュートリアルの最後までに何を構築するかを見てみましょう.

上の典型的な例では、トップにレストラン名があります.以下は、アペタイザー、Dum Biriyaniなどのセクション/タイプによってグループ化されたメニュー項目を見ることができます.
かなりまっすぐ前方.
  • Final JavaScript Object API Structure
  • Firestore Data Structure for Restaurant Menu Page
  • Create A Vue.js Project
  • Initialize Firebase
  • Query Restaurant Data
  • Retrieve & Merge Sub-Collections Data - Menu Types / Menu Items
  • Render Restaurant API Object To The View

    • オブジェクトのAPI構造


    さらに進む前に、このレストランメニューページを構築するために必要な最終的なJavaScriptオブジェクトの構造についてお話したいと思います.
    下の写真は、どのデータがどこに行くかを示すことによって、最終的なJavaScriptオブジェクトを実際のレストランメニューページに変換する方法のハイレベルの概観を表しています.
    このオブジェクトを生成するには、単にクラウドのFirestoreからデータを取得し、HTTPリクエストからデータを取得するときにAPI出力に非常に似ています.

    出力JavaScriptオブジェクトを詳しく見てみましょう.
    これは、トップレベルでタイトルとIDのプロパティを持つだけでなく、メニューのプロパティは、レストランのセクション/タイプされるオブジェクトのカップルが含まれている配列です.
    メニュー配列の各セクション/型オブジェクトは、タイトルプロパティとオブジェクトの別の配列であるmenuitemを持ちます.メニュー項目内の各オブジェクトは、タイトル、説明、および価格のプロパティで構成されます.

    メニューページのデータ構造


    私は出力JavaScriptオブジェクトに非常に類似しているデータ構造をつくることができました、しかし、それはどんなコストででも避けられなければならない一つの文書の中で深く入れ子にされたデータを持ちます.
    代わりに、新しいデータをいつでもどこでも追加することができます.そして、最終的なJavaScriptオブジェクトと一致するように、それらをまとめてマージします.
    クラウドのfirestoreクエリは浅いので、ドキュメントに問い合わせを行うときには、そのサブコレクションを持っていません.

    Recommended → Learn Firestore CRUD Queries Quickly Guide


    ここでは、レストランメニューページのデータを構造化する方法を示すInfographicです.

    ご覧の通り、私はレストランコレクションを持っています.各ドキュメントには2つのフィールドがあります:文字列値とサブコレクションであるメニュー型を保持するタイトル.
    メニュー型サブコレクションのドキュメントには2つのフィールドがあります別のサブコレクションである文字列値とメニュー項目を持つタイトル.
    そのサブコレクション内の各ドキュメントには、タイトル、説明、および価格の3つのフィールドがあります.
    ここでは、サンプルデータを実際の雲のfirestoreデータベース構造のスクリーンショットです.

    あなたの雲Firestoreデータベースに上記の構造に類似した若干のデータを加えるので、それが続くのが簡単です.

    Vueを作成します。JSプロジェクト


    先に行くとVueを作成します.JSプロジェクトwebpack .
    vue init webpack my-project
    それから、NPMはそれにインストールします.
    npm install
    アプリケーションを実行します.
    npm run dev
    一度Vue.JSのアプリを実行しているHelloWordに移動します.Vueとファイルを削除します.
    アプリ.Vueは、私がこのチュートリアルのためにそれをより簡単にするためにすべての私のコードを入れているファイルです.
    追加Materialize CSS インデックス.オプションです.
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    ファイアウォールを初期化する


    インストールFirebase .
    npm install --save firebase
    メインの内部でファイアベースを初期化します.js
    import firebase from "firebase";

var firebaseConfig = {
  apiKey: "*************************",
  authDomain: "*************************",
  databaseURL: "*************************",
  projectId: "*************************",
  storageBucket: "*************************",
  messagingSenderId: "*************************",
  appId: "*************************"
};
firebase.initializeApp(firebaseConfig);

    Get initialization code from your Firebase project on the Firebase console.


    Continue Reading...
    [Django] C.R.U.D -2 (2)
    kubernetes配備-kube-api(三)