
در قسمت قبل موفق شدیم که با استفاده از axios یک درخواست POST را به Firebase ارسال کرده و داده هایمان را در آنجا ذخیره کنیم. حالا در این قسمت باید داده های ذخیره شده را دریافت کرده و در صفحه اصلی نمایش بدهیم. برای این کار به فایل dashboard.vue می روم و پس از اضافه کردن قسمت <script> منطق ساده زیر را پیاده می کنم:
<script> import axios from "axios"; export default { created() { axios .get("https://vuejs-http-roxoir.firebaseio.com/users.json") .then(res => console.log(res)) .catch(error => console.log(error)); } }; </script>
این کد دقیقا مانند کد جلسه قبل است با این تفاوت که درخواست های get حداقل یک آرگومان می گیرند که همان آدرس پایگاه داده ما است و نیازی به آرگومان های دیگر ندارند. در ابتدای کار برای اینکه مطمئن شویم درخواست ما به خوبی کار می کند فقط آن را log کرده ام. همچنین حتما متوجه شده اید که از lifecycle ای به نام created استفاده کرده ام. با این کار مطمئن می شوم که هر زمانی که کامپوننت dashboard.vue بارگذاری شد (کاربر روی صفحه Dashboard کلیک کرد) اطلاعات از سمت Firebase دریافت شود. حالا به مرورگر می رویم (آدرس http://localhost:8080/dashboard) تا کدها را تست کنیم:

بنابراین همه چیز به خوبی کار می کند و داده هایمان را دریافت کرده ایم. حالا که هیچ مشکلی نداریم بهتر است یک یا دو فیلد از اطلاعات دریافتی را در صفحه dashboard نمایش بدهیم. برای این کار باید خصوصیت data را به این فایل اضافه کنیم تا بتوانیم خصوصیات خود را داشته باشیم:
<script> import axios from "axios"; export default { data() { return { email: "" }; }, created() { axios .get("https://vuejs-http-roxoir.firebaseio.com/users.json") .then(res => console.log(res)) .catch(error => console.log(error)); } }; </script>
همانطور که می بینید من یک خصوصیت جدید به نام Email را برای این کامپوننت تعریف کرده ام که در ابتدا خالی است. سپس در template این فایل یک پاراگراف را برای نمایش این خصوصیت قرار می دهیم:
<template> <div id="dashboard"> <h1>That's the dashboard!</h1> <p>You should only get here if you're authenticated!</p> <p>Your email address: {{ email }}</p> </div> </template>
در مرحله بعد باید در قسمت Then از Axios، داده هایمان را گرفته و برابر خصوصیت email قرار بدهیم:
created() { axios .get("https://vuejs-http-roxoir.firebaseio.com/users.json") .then(res => { console.log(res); const users = []; const data = res.data; for (let key in data) { const user = data[key]; user.id = key; users.push(user); } console.log(users); this.email = users[0].email; }) .catch(error => console.log(error)); }
این کد نیاز به توضیح دارد. اگر یادتان باشد ما در جلسه قبل برای ارسال داده ها از متد POST استفاده کردیم که یعنی می توانیم چندین کاربر داشته باشیم (متد POST برخلاف PUT داده های قبلی را حذف نمی کند بنابراین هر چند بار که sign up کنیم به همان تعداد کاربر جدید به پایگاه داده اضافه می شود) بنابراین باید از یک حلقه برای دسترسی به داده ها استفاده کنیم. من در کد بالا ابتدا یک آرایه خالی درست کرده ام و سپس یک ثابت به نام data ساخته ام تا مستقیما به res.data دسترسی داشته باشیم. سپس در حلقه for بین data گردش کرده ایم و هر کدام از اعضای موجود در Data را درون ثابتی به نام user قرار داده ایم. سپس id را به عنوان key به ثابت user اضافه کرده ام تا id ها را گم نکنیم (این id ها همان رشته های عجیب و یکتایی هستند که توسط firebase تولید می شوند). در نهایت این شیء user را در هر گردش به آرایه users اضافه می کنیم. در نهایت داده ها را یک بار log کرده ایم و خصوصیت ایمیل را نیز برابر با ایمیل اولین کاربر گذاشته ایم (نمی خواهیم تمام ایمیل های کاربران را نمایش بدهیم).
حالا برای تست به مرورگر می رویم و در قسمت کنسول می بینیم که دو log داریم. اولین log مربوط به داده های دریافت شده از firebase و دومین log مربوط به داده های استخراج شده (کاربران) است:

همانطور که در تصویر بالا می بینید، id های ما ذخیره شده اند تا بتوانیم در آینده هر کاری خواستیم، با آن ها انجام دهیم. در نهایت دوست دارم یک نکته جالب برای اعمال پیکربندی سراسری در Axios را برایتان بیان کنم. در ابتدا به فایل main.js می رویم (چرا که قبل از تمام فایل ها اجرا می شود) و در آنجا می گوییم:
import axios from 'axios'; import router from './router' import store from './store' axios.defaults.baseURL = 'https://vuejs-http-roxoir.firebaseio.com'
شیء Defaults در axios به ما اجازه می دهد که برخی از تنظیمات پیش فرض را برای axios تنظیم کنیم. من در اینجا URL خودم را تنظیم کرده ام بنابراین به فایل های dashboard.vue و signup.vue می روم و URL آن درخواست ها را به شکل زیر تغییر می دهم:
axios .get("/users.json")
axios .post("/users.json", formData)
چرا؟ به دلیل اینکه BaseURL را تعریف کرده ایم و نیازی به نوشتن آدرس کامل URL نداریم. آدرس های بالا به آدرس اصلی پیوست می شوند بنابراین در همین حد کافی است. برای یادگیری خصوصیات بیشتر شیء dafaults به صفحه گیت هاب axios به آدرس زیر مراجعه کنید:
https://github.com/axios/axios#config-defaults
یکی از مثال های این صفحه بدین شکل است:
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
یعنی علاوه بر baseURL می توانیم مقادیر header ها را نیز طبق نیاز خود تعریف کنیم. همچنین می توانید هنگام استفاده از متدهای POST (به عنوان آرگومان سوم) یا GET (به عنوان آرگومان دوم) یک شیء را پاس بدهید که این پیش فرض ها را فقط برای آن درخواست خاص، override کند. مثال:
// Set config defaults when creating the instance const instance = axios.create({ baseURL: 'https://api.example.com' });
در این کد با استفاده از create (برای ساخت یک نمونه یا instance از axios) به Axios گفته ایم که baseURL را تغییر دهد.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI