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

در این سری مطالب می خواهیم نحوه نوشتن برنامه های تک صفحه ای یا Single Page Application مخفف (SPA) را آموزش دهیم. Vue و لاراول ترکیب خوبی برای ایجاد برنامه های SPA هستند و به شما خواهیم گفت چطور با استفاده از Vue Router و Backend لاراول صفحات تک صفحه ای بسازید.

چرخه معمول کار کردن Vue با لاراول به این صورت است:

• درخواست اول، به روتر لاراول می رسد
• لاراول Layout مربوط به SPA را رندر می کند
• درخواست های بعدی با استفاده از history.pushState بدون لود دوباره کل صفحه ، به آدرس مورد نظر منتقل می شوند.

می توان Vue router را روی مود History یا مود پیش فرض هش تنظیم کرد که از بخش هش URL برای شبیه سازی کل آدرس استفاده می کند بنابراین موقع تغییر آدرس، صفحه از نو ریفرش نمی شود.

ما از مود history استفاده می کنیم پس نیاز داریم در لاراول یک route تعریف کنیم که با تمام url های ممکن برنامه، همخوانی داشته باشد تا هر آدرسی که در SPA آمد را پوشش دهد.برای مثال اگر کاربر صفحه را با /hello ریفرش کرد، ما باید route را مطابقت دهیم و تمپلیت تک صفحه ای Vue را به وسیله لاراول برگردانیم. پس از آن vue router روت را تشخیص می دهد و کامپوننت های مربوطه را لود می کند.

نصب

برای شروع یک نسخه تر و تمیز و نو از لاراول را نصب می کنیم و بعد vue router را بوسیله npm نصب می کنیم:

laravel new vue-router
cd vue-router
# Link the project if you use Valet
valet link
# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

حالا لاراول و vue router را داریم و می توانیم شروع کنیم.

تنظیم Vue Router

کار vue router این است که یک route را به یک کامپوننت vue تخصیص دهد و آن کامپوننت را جایی که تگ زیر در برنامه هست ، رندر کند:

router view در کامپوننت اپلیکیشن vue قرار دارد و کل برنامه را در بر می گیرد. بعدا سراغ کاپوننت برنامه بر می گردیم.

اول سراغ فایل اصلی جاوا اسکریپت در  resources/assets/js/app.js می رویم و vue router را تنظیم می کنیم. محتویات فایل فوق را با این کدها جایگزین کنید:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});

تعدادی فایل هست که باید ایجاد شان کنیم ولی اول، کمی در مورد محتوای app.js توضیح بدم:

• پلاگین VueRouter را با Vue.use() وارد و نصب کردیم
• ۳ کامپوننت Vue را Import کردیم:
• • • کامپوننت App که اصلی ترین کامپوننت برنامه است
    • یک کامپوننت Hello که با روت /hello همخوانی دارد
    • یک کامپوننت Home که صفحه اصلی هندل می کند
• یک instance از VueRouter ایجاد کردیم که یک شی شامل تنظیمات را دریافت می کند
• بعد Vue را از وجود کامپوننت App با پاس دادن آن به خصیصه components، مطلع کردیم
• ثابت router را به Vue جدید تزریق کردیم تا به this.$router و this.$route دسترسی داشته باشد

سازنده VueRouter آرایه ای از روت ها را گرفته است که مسیر، نام (مثل نام روت در لاراول) و کامپوننتی که به این مسیر مربوط است را شامل می شود.

من دوست دارم تعریف روت را داخل یک روت ماژول مجزا ببرم و بعد import اش کنم، اما به خاطر حفظ سادگی روت ها را داخل فایل اصلی اپلیکیشن قرار دادیم.

حالا به خاطر اینکه mix لاراول با موفقیت اجرا شود، باید ۳ کامپوننت را تعریف کنیم و وجود داشته باشند:

mkdir resources/assets/js/views touch resources/assets/js/views/App.vue touch resources/assets/js/views/Home.vue touch resources/assets/js/views/Hello.vue

اول، فایل App.vue نگهدارنده اصلی برنامه ماست.داخل این کامپوننت، یک تیتر و تعدادی لینک بوسیله  تعریف کردیم:

مهم ترین تگ موجود در کامپوننت برنامه،  است که در همینجا، کامپوننتی که با route همخوانی دارد، رندر خواهد شد.

کامپوننت بعدی که باید تعریف کنیم در این مسیر است: resources/assets/js/views/Home.vue

در نهایت، کامپوننت Hello را که در resources/assets/js/views/Hello.vue قرار دارد، تعریف می کنیم:

دوست دارم همیشه کامپوننت هایی که قابل استفاده مجدد هستند را از کامپوننت هایی که فقط مخصوص view هستند جدا کنم. پس کامپوننت های مخصوص view را در مسیر resources/assets/js/views و کامپوننت های reusable را داخل مسیر resources/assets/js/components قرار می دهیم.

حالا هر چیزی که برای اجرای برنامه Vue خودمان نیاز داریم و مربوط به Front end می شود، را داریم. بعد نیاز داریم روت های Back end و تمپلیت های سمت سرور را تعریف کنیم.

سمت سرور

ما از فریم ورک هایی مثل لاراول برای ساختن برنامه های تک صفحه ای مان استفاده می کنیم زیرا با آنها می توانیم API های سمت سرور ایجاد کنیم.

در این آموزش نمی خواهیم یک API بسازیم ولی دنبالش خواهیم بود. این پست در مورد نوشتن Vue router است.

اولین چیزی که سمت سرور با آن برخورد داریم، تعریف روت است. فایل routes/web.php را باز کنید و کدهای آن را با کد زیر جایزگین کنید:

where('any', '.*');

ما یک روت تعریف کردیم که همه آدرس ها را به کنترل SpaController منتقل می کند. اگر این کار را نکنیم و کاربر به مسیر /hello درخواست بدهد با خطای ۴۰۴ روبرو می شود.

بعد، باید کنترلر SpaController را ایجاد کنیم و view را تعریف کنیم:

php artisan make:controller SpaController

کنترلر SpaController را باز کنید و کدهای زیر را داخل آن قرار دهید:

در نهایت کدهای زیر را در resources/views/spa.blade.php قرار دهید:
  
تگ #app را هم تعریف کردیم که کامپوننت اصلی App را دربر می گیرد و توسط Vue رندر می شود.
اجرای برنامه
برای اجرای برنامه باید جاوااسکریپت را با yarn یا npm اجرا کنیم:
yarn watch # or npm run watch
حال اگر برنامه را در مرورگرتان باز کنید باید چیزی شبیه این ببینید:
در ادامه
ما الان اسکلت برنامه SPA Vue را که در بکند از Laravel API استفاده می کند ، داریم. ولی این برنامه هنوز با چیزی که باید باشد فاصله دارد . در ادامه این بخش ها را اضافه خواهیم کرد:
تعریف روت در فرونت اند که همه آدرس های ۴۰۴ را هندل کند
استفاده از پارامترهای route
روت های فرزند (Child Route)
فرستادن درخواست از یک کامپوننت Vue به لاراول
و احتمالا کارهای بیشتری که بعدا خواهیم دید و الان تو ذهنم نیست …
هدف این آموزش این است که به شما نشان دهیم چطور می توانید یک برنامه SPA را با Vue Router بسازید. اگر با آن آشنا نیستید به مستنداتش سری بزنید.
 دیجیاتو آپارات...
ما را در سایت دیجیاتو آپارات دنبال می کنید
برچسب : نویسنده : عباس قلی بزرگی  بازدید : 319    تاريخ : پنجشنبه 10 اسفند 1396 ساعت: 13:36