سلسة عمليات CRUD بإستخدام Laravel + VueJs مع SPA - الجزء الأول
في هذا المقال سيتم شرح كيفية تثبيت VueJs وإستخدامها مع إطار العمل لارافيل، وكيفية إنشاء Vue Component وعرض هذا الــ Component بحيث يتم عرض جدول لكن يتم تحميلة من VueJS وليس من Blade.
إنشاء مشروع لارافيل جديد
composer create-project laravel/laravel testتثبيت VueJS ويتم ذلك من خلال الذهاب للملف Package.json وبداخل devDependencies نضيف "vue": "^2.6.11"، مع الأخذ بعين الإعتبار إنه يمكن إستخدام إصدار أخر عوضاً عن 2.6.11.
تثبيت مكتبة Vue
في الملف resources/js/app.js يجب إستدعاء مكتبة vue.
require('./bootstrap');
import Vue from 'vue';//import Vue Librayتنفيذ الأمر
npm install
وكما نعلم أنه عند عرض هذا المشروع فإنه سيتم عرض الشكل التالي
ما سنقوم به في هذا الدرس هو كيفية تغيير الشكل أعلاه إلى شكل جدول يحتوي على بيانات ثابته.
للقيام بذلك
- نذهب للملف resources->views->welcome.blade.php ونحذف محتويات body. وإضافة وسم بـ id=app حيث هو المكان الذي سيتم عرض جميع محتويات الموقع بداخلة.
- سيتم الإعتماد على مكتبة bootstrap لذلك سيتم تضمينها في المللف welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<title>Laravel</title>
</head>
<body>
<div id="app">
<posts-index></posts-index>
</div>
</body>
</html>كما نلاحظ إنه في بداخل body تم عمل ما يلي:
- إضافة div وتم إعطاءه id=app بحيث أن هذا app هو ما سيتم عرض محتويات التطبيق بداخله، فجميع الموقع سيتم عرضه داخل هذا div.
- إضافة posts-index tag وهو الدف الذي سيتم تعريف الـ component من خلالة، نستطيع إستخدام أي إسم نريد، لكن يجب استخدام نفس الإسم في استدعاء الـ component.
إنشاء VueJS Components
لإنشاء VueJs Components نذهب للمسار resources/js بداخله ننشئ مجلد بإسم components وبداخله نضع المجلدات حسب نظام التطبيق لدينا، هنا سيتم إنشاء مجلد بإسم Posts وبداخله ملف index.vue
أي Vue Component يجب على الأقل أن يحتوي على شيئين:-
- template
- script
بداخل template سيتم كتابة أكواد html
script وهو المكان الذي سيتم كتابة أكواد الجافا سكربت بداخلة.
<template> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> </template> <script> </script>
لغاية الأن لو قمنا بعمل run للمشروع فإن البيانات لن تظهر، لإننا بحاجة لتسجيل هذا ال component، وإنشاء Vue JS Application.
تسجيل الـ Component
نذهب للملف resources/js/app.js ونستدعي الملف Posts/index.vue
Vue.component('posts-index',require('./components/Posts/index').default)إنشاء Vue Application
في الملف welcome.blade.php قمنا بتعريف div رئيسي وتم إعطاءه id=app، لذلك نحن بحاجة لإخبار VueJs بهذا الـ id، وللقيام بذلك بداخل الملف resources/js/app.js
const app = new Vue({
el:'#app' // el=element
});وبذلك يكون الملف على الشكل التالي
require('./bootstrap');
import Vue from 'vue';
Vue.component('posts-index', require('./components/Posts/index').default);
const app = new Vue({
el :'#app'
})عمل Compile للـ JavaScript
المقصود بعمل Compile إنه وفي أي مشروع Vue فإنه سيتم إنشاء مجموعه من ملفات js، وعند عمل run للمشروع يجب عمل compile لها في ملف واحد، يتم تضمينة في الملف welcome.blade.php.
يمكن القيام بذلك من خلالل تنفيذ الأمر
npm run dev
تضمين ملف app.js في الملف welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Laravel</title>
</head>
<body>
<div id="app">
<posts-index></posts-index>
</div>
<script src="{{ asset('js/app.js') }}"></script> ///////include js
</body>
</html>إضافة Vue في weback.mix.js
في الملف weback.mix.js يجب إخباره بإستخدام Vue حيث يجب أن يتم إستبدال الكود الموجود بالكود التالي
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);الأن عند عمل run يجب ان تظهر لنا الصفحة التالية
وبذلك نكون قد انتهينا من تثبيت Vue JS وعرض البيانات.