
حالا که می توانیم سهام مورد نظرمان را بخریم و در portfolio نمایش دهیم باید به فکر نمایش funds یا موجودی حساب خود نیز باشیم. احتمالا یادتان است که funds قسمتی از state برنامه ما در ماژول portfolio.js بود:
const state = { funds: 10000, stocks: [] }
من مقدار funds را در ابتدا 10 هزار تعیین کرده ام اما شما می توانید هر مقدار دیگری را برایش تعریف کنید. به نظر شما funds باید در چه قسمت هایی از برنامه نمایش داده شود؟ اولین جایی که باید funds را ببینیم در صفحه اول برنامه یا همان Home.vue (به آدرس http://localhost:8080/) است اما این فایل فعلا به شکل زیر می باشد:
<template> <h1>The Home Component</h1> </template>
این اصلا ظاهر مناسبی برای کامپوننت ما نیست بنابراین باید کد زیباتری را جایگزین آن کنیم:
<template> <div> <h1>Trade or View your Portfolio</h1> <h6>You may Save & Load your Data</h6> <h6>Click on 'End Day' to begin a New Day!</h6> <hr /> <p>Your Funds: </p> </div> </template>
من در این ساختار ساده چند تگ h1 و h6 دارم و هر تگ نحوه کار با برنامه را توضیح داده است. در نهایت تمام این تگ ها را با یک hr (خط افقی) از یک تگ <p> جدا کرده ام که قرار است funds را در آن نمایش بدهیم. به نظر شما ساده ترین راه برای دریافت funds از state برنامه چیست؟ درست است! از آنجایی که فقط نیاز به یک getter داریم، اصلا لازم نیست تا mapGetters را صدا بزنیم و می توانیم مستقیما به شیء store$ دسترسی داشته باشیم:
<template> <div> <h1>Trade or View your Portfolio</h1> <h6>You may Save & Load your Data</h6> <h6>Click on 'End Day' to begin a New Day!</h6> <hr /> <p>Your Funds: {{ funds }}</p> </div> </template> <script> export default { computed: { funds() { return this.$store.getters.funds; } } }; </script>
از آنجایی که این کد بسیار ساده است، توضیح اضافه ای نمی دهم. مکان دومی که funds را در آن خواهیم دید، header یا منوی navigation بالای سایت است. برای انجام این کار به فایل Header.vue رفته و funds را در قالب یک تگ <strong> نمایش می دهیم:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <router-link to="/portfolio" active-class="active" tag="li"> <a>Portfolio</a> </router-link> <router-link to="/stocks" active-class="active" tag="li"> <a>Stocks</a> </router-link> </ul> <strong class="navbar-text navbar-right">Funds: {{ funds }}</strong> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">End Day</a> </li> // بقیه کدها //
همانطور که می بینید من تگ <strong> را در کد بالا بعد از لینک صفحات قرار داده ام اما کلاس navbar-right را نیز برایش گذاشته ام تا حتما به سمت راست منتقل شود. با این کار به Vue گفته ایم که از funds در این قسمت استفاده کند اما هنوز آن را دریافت نکرده ایم. برای دریافت funds از state قسمت Script همین فایل را برایش تعریف کرده و می گوییم:
<script> export default { computed: { funds() { return this.$store.getters.funds; } } }; </script>
حالا اگر مرورگر را باز کنید، باید funds را در بالای صفحه ببینید، بنابراین مسئله نمایش funds حل شده است اما مشکل دیگری داریم. اگر 4 سهم را بخریم، می توانیم 10 سهم را بفروشیم! یعنی در حال حاضر برنامه اعتبارسنجی ندارد بنابراین می توانیم بیشتر از چیزی که داریم بفروشیم که خطای بزرگی است! چند خطای دیگر به همین شکل نیز داریم که می توانیم بیشتر از موجودی حساب خود خرید کنیم و الی آخر.
برای حل این مشکلات اول به فایل Stock.vue در پوشه Stocks بروید و خصوصیت زیر را به آن اضافه کنید:
<script> export default { props: ["stock"], data() { return { quantity: 0 }; }, computed: { insufficientFunds() { return this.quantity * this.stock.price > this.funds; } }, methods: { buyStock() { // بقیه کدها //
این خصوصیت جدید computed که insufficientFunds نام دارد یک مقایسه ساده را برمی گرداند. آیا تعداد سهام ضرب در قیمت سهام (قیمت کل سهامیی که می خواهیم بخریم) از موجودی حساب ما بیشتر باشد نباید اجازه خرید داشته باشیم. این مقایسه یا True یا false را برمی گرداند. البته this.funds را هنوز تعریف نکرده ایم بنابراین این کد کار نمی کند. برای حل این مشکل مثل همیشه از getter ها استفاده می کنیم:
computed: { funds() { return this.$store.getters.funds; }, insufficientFunds() { return this.quantity * this.stock.price > this.funds; } },
حالا خصوصیت insufficientFunds را نیز به عنوان شرط سوم به دکمه Buy اضافه می کنیم:
<div class="pull-right"> <button class="btn btn-success" @click="buyStock" :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)" >Buy</button> </div>
حالا هر سه شرط ما باید برقرار باشند تا بتوانیم روی Buy کلیک کنیم. حالا اگر به مرورگر برویم و سعی کنیم تعداد سهام بسیار زیادی بخریم که از funds ما بیشتر باشد (مثلا 222 سهم) دکمه Buy غیرفعال می شود. البته از نظر UI و UX بهتر است علاوه بر غیرفعال شدن دکمه، متن آن نیز تغییر کند تا کاربر بداند مشکل از کجاست:
<div class="pull-right"> <button class="btn btn-success" @click="buyStock" :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)" >{{ insufficientFunds ? 'Insufficient Funds' : 'Buy' }}</button> </div>
در اینجا یک مقایسه گر ساده داریم که می گوید اگر insufficientFunds صحیح باشد (یعنی موجودی حساب ما کمتر از مقداری باشد که می خواهیم بخریم) باید عبارت ‘Insufficient Funds’ (به معنی «موجودی ناکافی») نمایش داده شود و در غیر این صورت Buy را قرار می دهیم. البته می توانیم به جای این عبارت هر عبارت دیگری را نیز قرار بدهیم. مثلا:
<button class="btn btn-success" @click="buyStock" :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)" >{{ insufficientFunds ? 'Low Funds' : 'Buy' }}</button> </div>
Low funds یعنی موجودی کم است. همچنین بهتر است در چنین حالتی یک خط قرمز دور input بکشیم بنابراین می گویم:
<div class="pull-left"> <input type="number" class="form-control" placeholder="Quantity" v-model.number="quantity" :class="{danger: insufficientFunds}" /> </div>
یعنی کلاس danger بر اساس صحیح یا غلط بودن خصوصیت insufficientFunds اضافه شود. سپس قسمت style را نیز برای این فایل تعریف کرده و می گوییم:
<style scoped> .danger { border: 1px solid red; } </style> <script> export default { props: ["stock"], // بقیه کدها //
همانطور که می بینید این کلاس فقط border را قرمز می کند و می توانید آن را در مرورگر تست کنید. در قسمت بعد برای فروش سهام نیز اعتبارسنجی خاصی را پیاده می کنیم و در مورد استفاده از فیلتر ها برای نمایش بهتر Funds نیز صحبت خواهیم کرد.
- نصب و راهاندازی فریمورک 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