پیاده‌سازی drop-down و راه‌اندازی Firebase

Drop-down Implementation and Launching Firebase

Vue.JS 2: پیاده سازی drop-down و راه اندازی firebase - قسمت 111

در قسمت قبل با موفقیت کامپوننت های خود را تکمیل کرده و به آن ها انیمیشن اضافه کردیم. در این قسمت باید به سراغ منوی Drop-down (آبشاری) save & load برویم. این منو در فایل Header.vue قرار دارد بنابراین به این فایل رفته و data خاص این فایل را برایش می نویسم:

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      isDropdownOpen: false
    };
  },
  computed: {
    funds() {
      return this.$store.getters.funds;
    }
  },
// بقیه کدها //

خصوصیت isDropdownOpen باز بودن یا بسته بودن منوی آبشاری را مشخص می کند که در حالت پیش فرض نباید باز باشد، بنابراین آن را روی false گذاشته ام اما برای باز کردن منو باید نحوه کار بوت استرپ را بدانید. ما در کدهای HTML یک <li> طولانی داریم که منوی drop-down را دارد (کل کد زیر یک تگ <li> است):

<li class="dropdown">
  <a
    href="#"
    class="dropdown-toggle"
    data-toggle="dropdown"
    role="button"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Save & Load
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="#">Save Data</a>
    </li>
    <li>
      <a href="#">Load Data</a>
    </li>
  </ul>
</li>

حالا اگر کلاس open را به این منو بدهیم، منوی ما باز می شود:

<li class="dropdown open">
  <a
    href="#"
    class="dropdown-toggle"
    data-toggle="dropdown"
    role="button"
    aria-haspopup="true"
    aria-expanded="false"
  >
// بقیه کدها //

فقط با انجام این کار اگر به مرورگر بروید، می بینید که منوی ما باز شده است. بنابراین باید این کلاس را به صورت پویا اضافه کنیم. اینجاست که خصوصیت isDropdownOpen به کار ما می آید:

<li class="dropdown" :class="{open: isDropdownOpen}">

حالا اگر خصوصیت isDropdownOpen صحیح (true) باشد، کلاس open اضافه خواهد شد و در غیر این صورت هیچ کلاسی اضافه نمی شود. در ضمن اینکه دو کلاس داریم که یکی به صورت پویا با v-bind اضافه می شود، هیچ مشکلی را برای ما ایجاد نمی کند. Vue.js در نهایت تمام آن ها را با هم ادغام خواهد کرد و دو کلاس نخواهیم داشت. حالا اگر به مرورگر بروید، می بینید که منوی آبشاری بسته شده است چرا که خصوصیت isDropdownOpen به صورت پیش فرض false است. تنها کاری که باقی می ماند اضافه کردن یک click@ است تا زمانی که روی این منو کلیک میکنیم، isDropdownOpen به true تغییر کند و منوی ما را باز کند.

<li
  class="dropdown"
  :class="{open: isDropdownOpen}"
  @click="isDropdownOpen = !isDropdownOpen"
>

در این کد گفته ام که خصوصیت isDropdownOpen به مقدار برعکس خودش تغییر کند، یعنی اگر true بود به false و اگر false بود به true تغییر پیدا کند (یک حالت toggle). حالا می توانید به مرورگر رفته و منوی آبشاری را تست کنید. همه چیز به خوبی کار می کند.

ارسال داده به firebase برای قابلیت Save و Load

برای پیاده سازی قابلیت های save و load (ذخیره کردن قیمت های یک روز و سپس بارگذاری آن ها در برنامه) باید در ابتدا پکیج vue-resource را نصب کنیم. البته قبلا به شما گفته بودم که برای کار با درخواست های HTTP در Vue سه راهکار دارید:

  • نوشتن درخواست های HTTP (مثلا درخواست های AJAX) به صورت دستی.
  • استفاده از کتابخانه های عمومی جاوا اسکریپت برای AJAX و HTTP مانند jQuery یا Axios یا غیره.
  • استفاده از کتابخانه های خاص Vue برای کار با AJAX و درخواست های HTTP

از آنجایی که این دوره مخصوص آموزش Vue است من از همان پکیج vue-resource استفاده می کنم که ترجیح شخصی خودم نیز می باشد. اگر این پکیج را از قبل نصب کرده اید که نیازی به انجام کاری نیست، اما اگر آن را نصب ندارید باید دستور زیر را در ترمینال برنامه خود اجرا کنید:

npm install --save vue-resource

در ضمن برخی از اوقات دانشجویان روکسو از من سوال می کنند که آیا ساختار خاصی برای اجرای دستورات npm در نصب پکیج ها وجود دارد؟ ساختار باید تا حدی رعایت شود اما اینکه ابتدا نام پکیج را بیاورید و بعدا save یا flag های دیگر، اهمیت چندانی ندارد. به طور مثال کد بالا پکیج vue-resource را برایتان نصب می کند اما کد زیر نیز دقیقا همین کار را کرده و معادل کد بالا می باشد:

npm install vue-resource --save

پس از نصب پکیج vue-resource به فایل main.js می رویم تا آن را import و فعال کنیم:

import Vue from 'vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource';

import App from './App.vue'
import { routes } from "./routes";
import store from './store/store';

Vue.use(VueRouter);
Vue.use(VueResource);
// بقیه کدها //

من در این کد، ابتدا vue-resource را import کرده ام و سپس با Vue.use آن را فعال کرده ام. از این به بعد می توانیم درخواست های HTTP خود را ارسال کنیم. برای back-end خود نیز از firebase استفاده خواهیم کرد. من از همان پایگاه داده ای استفاده می کنم که در فصل مربوط به درخواست های HTTP استفاده کردیم (نام پایگاه داده من vuejs-http-roxoir بود) اما شما می توانید بر اساس توضیحات من در آن جلسه (جلسه 70)، خودتان پایگاه داده جدیدی را بسازید. از طرفی برای اینکه کارمان راحت تر باشد، بهتر است URL پایگاه داده را به صورت یک ثابت در vue-resource ذخیره کنیم. برای ثبت URL اصلی پایگاه داده، در همین فایل main.js، می گویم:

Vue.use(VueRouter);
Vue.use(VueResource);

Vue.http.options.root = 'https://vuejs-http-roxoir.firebaseio.com/';

این کد URL اصلی ما را مشخص می کند تا هر بار مجبور نشویم آن را به صورت دستی وارد کنیم. یادتان باشد که این کد را حتما بعد از صدا زدن Vue.use تعریف کنید چرا که ابتدا باید VueResource شناخته بشود که بتوانیم از قابلیت های آن مانند http.options استفاده کنیم. از اینجا به بعد آماده استفاده از firebase و ارسال دستورات HTTP هستیم.

office 2019 home business lizenz kaufen

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.