آموزش کامل برنامه نویسی سایت تک صفحه ای با Vue.js و Laravel – قسمت ۲

در این مقاله ، آموزش ساختن برنامه تک صفحه ای (SPA) با لاراول را ادامه می دهیم و یاد میگیریم چگونه داده های غیرهمزمان (Async) را از API لاراول بگیریم و داخل کامپوننت Vue لود کنیم. همچنین به بحث مدیریت خطا نگاهی می اندازیم که وقتی API پاسخ خطا برگشت داد چطور آن را مدیریت کنیم.

اگر بخش اول این مقاله را نخوانده اید، ما یک برنامه تک صفحه ای Vue را با Vue Router و Laravel راه اندازی کردیم.اگر می خواهید با ما پیش بروید باید ابتدا بخش اول را مطالعه کنید.

برای ساده نگه داشتن سمت سرور، API ما از داده های ساختگی استفاده خواهد کرد.در بخش سوم آموزش، داده های API از کنترلر خواهد آمد و متعاقب آن از دیتابیس.

روت API

برنامه های Vue اصطلاحا Stateless هستند یعنی ما درخواست هایی را به API لاراول با که در routes/api.php تعریف شده اند می فرستیم. روت های API از Session استفاده نمی کنند بدین ترتیب برنامه ما واقعا در سمت back-end هم stateless است.

در مثال ما، می خواهیم لیستی از کاربران را بگیریم و به این بهانه یک درخواست غیرهم زمان به لاراول از vue می فرستیم:

Route::get('/users', function () {
return factory('AppUser', 10)->make();
});

این روت موقت ما از  model factories لاراول استفاده می کند تا مجموعه ای از اشیا مدل Eloquent را تولید کند در حالی که پای دیتابیس واقعا در میان نیست. ما از متد make() استفاده کردیم چون سعی نمی کند اطلاعات تستی را در دیتابیس وارد کند. در عوض اشیائی از مدل AppUser را بر می گرداند.

تعریف یک روت در routes/api.php به این معنی است که آدرس درخواست های ما یک پیشوند /api خواهند داشت. چون این پیشوند در RouteServiceProvider تعریف شده است:

protected function mapApiRoutes()
{
Route::prefix('api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
}

نتیجه ای که این درخواست به روت فوق بر می گرداند شبیه این خواهد بود:

[
{
"name":"Roel Rosenbaum I",
"email":"[email protected]"
},
{
"name":"Prof. Clarissa Osinski",
"email":"[email protected]"
},
{
"name":"Myrtle Wyman",
"email":"[email protected]"
},
...
]

روت های سمت کاربر

اگر در بخش اول همراه ما بوده باشید دیدید که تعدادی روت در فایل resources/assets/js/app.js برای هندل آدرس های SPA اضافه کردیم. هر زمان که می خواهیم روت جدیدی اضافه کنیم، یک شی جدید در آرایه routes اضافه می کنیم که شامل مسیر، اسم و کامپوننت آن روت است. آخرین روت همان روت جدید مربوط به کاربران خواهد بود:

import UsersIndex from './views/UsersIndex';
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UsersIndex,
},
],
});

کامپوننت UsersIndex

در روتی که بالا اضافه کردیم، به کامپوننتی بنام UsersIndex اشاره شده است .پس حالا آن را باید ایجاد کنیم که در مسیر resources/assets/js/views/UsersIndex.vue قرار می گیرد و کدهای زیر را داخل آن قرار دهید:

اگر در Vue تازه کارید، شاید بخش هایی از کدها برای تان نامفهوم باشد.پیشنهاد می کنم مستندات کامپوننت vue را بخوانید و با چرخه vue مثل created, mounted و … آشنا شوید.

در این کامپوننت ما در حال دریافت اطلاعات از api به صورت ناهم زمان و در هوک created هستیم . یک متد بنام fechData() تعریف کردیم که خطاها و خصیصه های users را به Null و loading را به true برمی گرداند.

در خط نهایی متد fetchData() هم با استفاده از کتابخانه  Axios درخواستی را به API لاراول می فرستیم.

در این تصویر می بینید که نتیجه برگشت داده شده از api در کنسول چگونه خواهد بود( در سمت کاربر نه خود api):

مورد دیگری که باید بهش توجه کنید،  object destructuring است که اینجا استفاده شده :

Name: {{ name }},Email: {{ email }}

Object destructuring راهی کارامد برای دریافت خصیصه های مورد نیاز از یک شی است و مختصرتر و خواناتر است.

پایان دادن به کامپوننت Route

فعلا روت و کامپوننت مربوط به /users را داریم، حالا یک لینک داخل کامپوننت اصلی App اضافه می کنیم و سپس پاسخ برگشتی API را دریافت و ذخیره می کنیم:

در resources/assets/js/views/App.vue، یک لینک با استفاده از اسم روت اضافه کنید:

حالا فایل UsersIndex.vue را برای ست داده کاربران آپدیت می کنیم:

fetchData() {
this.error = this.users = null;
this.loading = true;
axios
.get('/api/users')
.then(response => {
this.loading = false;
this.users = response.data;
});
}

حالا اگر صفحه را ریفرش کنید، باید چیزی شبیه این ببینید:

تعامل با خطاها

کامپوننت ما اکثر اوقات طبق انتظار و درست کار می کند، ولی ما هنوز خطاهای API را هندل نمی کنیم. اجازه دهید عمدا خطایی را به API لاراول اضافه کنیم:

Route::get('/users', function () {
if (rand(1, 10) < 3) {
abort(500, 'We could not retrieve the users');
}
return factory('AppUser', 10)->make();
});

ما از تابع rand() استفاده کردیم، تا وقتی عدد کمتر از ۳ بود، درخواست رد شود. اگر صفحه را چندین باز ریفرش کنید باید “Loading …” را ببینید و اگر از ابزار Inspect Element مرورگرتان استفاده کنید، خطایی از Axios را می بینید مثل این:

می توانیم درخواست های دارای خطا را با متد catch() هندل کنیم:

fetchData() {
this.error = this.users = null;
this.loading = true;
axios
.get('/api/users')
.then(response => {
this.loading = false;
this.users = response.data;
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
}

حالا برای تجربه خود کاربران می خواهیم یک دکمه “Try Again” داخل کامپوننت UsersIndex.vue اضافه کنیم که به سادگی متد fetchData را فراخوانی می کند تا خصیصه users را دوباره با داده های دریافتی از API بروز کند:

{{ error }}
Try Again

حالا اگر مشکلی در دریافت پاسخ از API پیش آمد، شکل زیر را خواهید دید:

در ادامه

در بخش بعدی آموزش، کاری می کنیم که داده ها قبل از رندر کامپوننت لود شوند .همچنین API لاراول را تغییر می دهیم تا داده ها را به صورت واقعی از دیتابیس دریافت کند.