این وب سایت با تمامی محتویات و دامین به فروش می رسد. لطفا جهت خریداری از طریق بخش ارتباط با ما در تماس باشید

جستجو ...


بازگشت
هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

در این مقاله، استفاده از Bootstrap و Vue در طراحی frontend یک برنامه لاراول با استفاده از css و جاوا اسکریپت را مورد بررسی قرار خواهیم داد. با لیداوب همراه باشید.


استفاده از Bootstrap و Vue در طراحی frontend یک برنامه لاراول

معمولاً، لاراول مشخص نمی‌کند که از کدام پیش پردازنده جاوا اسکریپت یا CSS استفاده کنید، با این حال، نقطه شروع اولیه مناسبی را توسط Bootstrap و Vue ارائه می‌دهد که استفاده از آن در بسیاری از برنامه‌ها مفید خواهد بود. در حالت پیش‌فرض، لاراول برای نصب هر دو این پکیج‌های frontend از NPM استفاده می‌کند.

CSS

Laravel Mix یک API ساده و روان برای کامپایل کردن SASS یا Less فراهم کرده است که دارای پسوند CSS ساده است که متغیرها، mixinها و سایر ویژگی‌های قدرتمند را که کار با CSS را بسیار لذت‌بخش‌‌تر می‌کند، اضافه می‌کند. در این مقاله، ما به صورت خلاصه در مورد کامپایل CSS بحث می‌کنیم. برای کسب اطلاعات کامل‌تر در مورد کامپایل کردن SASS یا Less، می‌توانید مستندات Laravel Mix را در این باره مطالعه کنید.

جاوا اسکریپت

لاراول چند ساختار اولیه را جهت نوشتن جاوا اسکریپت به صورت پیشرفته با استفاده از کتابخانه Vue شامل می‌شود. Vue یک API ساده و روان جهت ساخت برنامه‌های کاربردی جاوا اسکریپت توسط کامپوننت‌ها ارائه می‌دهد. همانند CSS، می‌توان از Laravel Mix استفاده کرد تا بوسیله آن به راحتی بتوان کامپوننت‌های جاوا اسکریپت را به یک فایل جاوا اسکریپت جهت نمایش در مرورگر کامپایل کرد.

حذف ساختار frontend در لاراول

اگر بخواهید یکی از ساختارهای frontend در برنامه لاراول را حذف کنید، می‌توانید از دستور آرتیسان preset استفاده کنید. این دستور، زمانی که با گزینه none ترکیب ‌شود، Bootstrap و Vue را از برنامه حذف می‌کند و تنها یک فایل SASS خالی و چند کتابخانه‌ی معمولی جاوا اسکریپت باقی می‌ماند:

php artisan preset none

CSS در لاراول

فایل package.json  لاراول شامل پکیج bootstrap-sass است که به شما کمک می‌کند که یک نمونه اولیه از ظاهر برنامه خود را توسط Bootstrap ایجاد کنید. با این حال، می‌توانید به راحتی پکیج‌ها را براساس نیاز برنامه خود از فایل package.json اضافه یا حذف کنید. جهت ساخت برنامه لاراول خود نیازی به استفاده از فریم ورک Bootstrap نخواهید داشت، با این حال، برای کسانی که تصمیم به استفاده از آن می‌گیرند، یک نقطه شروع مناسب ارائه می‌دهد.
قبل از کامپایل کردن CSS، وابستگی‌های frontend پروژه خود را توسط Node package manager (NPM) نصب کنید:

npm install

زمانی که وابستگی‌ها توسط دستور npm instal l نصب شدند، می‌توانید فایل‌های SASS خود را توسط Laravel Mix به CSS ساده کامپایل کنید. دستور npm run dev دستورالعمل‌ها را در فایل webpack.mix.js پردازش می‌کند. به صورت معمول، CSS کامپایل شده در دایرکتوری public/css قرار می‌گیرد:

npm run dev

webpack.mix.js که به صورت پیش‌فرض در لاراول قرار دارد، فایل resources/assets/sass/app.scss را کامپایل می‌کند. فایل app.scss یک فایل از متغیرهای SASS را وارد کرده و Bootstrap را بارگذاری می‌کند که نقطه شروع خوبی را برای اکثر برنامه‌های کاربردی ایجاد می‌کند. در صورت تمایل می‌توانید فایل app.scss را سفارشی کنید، با این حال می‌توانید Laravel Mix را پیکربندی کنید و از یک پیش پردازنده کاملاً متفاوت استفاده کنید.

جاوا اسکریپت در لاراول

تمام وابستگی‌های جاوا اسکریپت موردنیاز توسط برنامه در فایل package.json در دایرکتوری ریشه پروژه قرار دارد. این فایل مانند یک فایل composer.json است به جز آن که وابستگی‌های جاوا اسکریپت را به جای وابستگی‌های PHP تعریف می‌کند. می‌توانید این وابستگی‌ها را توسط Node package manager (NPM) نصب کنید:

npm install
در حالت پیش‌فرض، فایل package.json لاراول شامل چند پکیج از جمله vue و axios برای ایجاد برنامه جاوا اسکریپت می‌باشد. می‌توانید آن‌ها را براساس نیاز خود در فایل package.json حذف یا اضافه کنید.

پس از نصب پکیج‌ها، می‌توانید از دستور npm run dev برای کامپایل کردن assetها استفاده کنید. Webpack یک بستر ماژولار مناسب برای برنامه‌های پیشرفته جاوا اسکریپت است. در زمان اجرای دستور npm run dev ، دستورالعمل‌ها توسط Webpack در فایل webpack.mix.js  اجرا می‌شود:

npm run dev

در حالت پیش‌فرض، فایل webpack.mix.js لاراول، SASS و فایل resources/assets/js/app.js را کامپایل می‌کند. در فایل app.js می‌توانید کامپوننت‌های Vue را ثبت کنید یا اگر یک فریم ورک متفاوت را ترجیح می‌دهید، می‌توانید برنامه ی جاوا اسکریپت خود را پیکربندی کنید. جاوا اسکریپت کامپایل شده معمولاً در دایرکتوری public/js قرار می‌گیرد.

فایل app.js فایل resources/assets/js/bootstrap.js را بارگزاری می‌کند که Vue، Axios، jQuery و سایر وابستگی‌های جاوا اسکریپت را راه‌ اندازی و پیکربندی می‌کند. در داخل این فایل، وابستگی‌های جاوا اسکریپتی دیگر را نیز می‌توانید پیکربندی کنید.

کامپوننت‌ های Vue در لاراول

در حالت پیش‌فرض، برنامه‌های لاراول شامل یک کامپوننت ExampleComponent.vue است که در دایرکتوری resources/assets/js/components قرار دارد. فایل ExampleComponent.vue نمونه‌ای از single file Vue component است که قالب جاوا اسکریپت و HTML خود را در همان فایل تعریف می‌کند. کامپوننت‌های Single file یک روش بسیار مناسب برای ایجاد برنامه‌های جاوا اسکریپت محور است. نمونه کامپوننت در فایل app.js ثبت شده است:

Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);

برای استفاده از کامپوننت در برنامه خود، می‌توانید آن را در یکی از قالب‌های HTML خود قرار دهید. برای مثال، پس از اجرای دستور آرتیسان make:auth برای ایجاد صفحه احراز هویت و ثبت نام برنامه، می‌توانید کامپوننت را در قالب home.blade.php قرار دهید:

@extends('layouts.app')
@section('content')

@endsection
توجه کنید، هر بار که یک کامپوننت Vue را تغییر می‌دهید، باید دستور npm run dev را اجرا کنید. همچنین، می‌توانید دستور npm run watch را اجرا کنید تا هر بار که کامپوننت‌ها تغییر می‌کنند، بتوانید آن‌ها را مانیتور کرده و مجدداً به صورت خودکار کامپایل کنید. البته، اگر بخواهید اطلاعات جامع‌تری درباره کامپوننت‌های Vue کسب کنید، می‌توانید مستندات Vue که یک مرور کلی بر فریم ورک Vue ارائه می‌دهد را مطالعه کنید.

استفاده از React در لاراول

اگر بخواهید از React برای ایجاد برنامه‌های جاوا اسکریپت استفاده کنید، لاراول انجام این کار را راحت کرده است تا بتوانید ساختار Vue را با ساختار React جایگزین کنید. در یک برنامه جدید لاراول، می‌توانید از دستور preset با گزینه react استفاده کنید:

php artisan preset react

این دستور، ساختار Vue را حذف کرده و آن را با ساختار React شامل یک کامپوننت نمونه، جایگزین می‌کند.

فرا بگیرید:

آموزش پایه لاراول ۵,۵

آموزش CSS

آموزش HTML مقدماتی

طراحی frontend یک برنامه در لاراول از اهمیت بالایی برخوردار است. در این مقاله از لیداوب به صورت خلاصه چگونگی استفاده از CSS و جاوا اسکریپت را در یک برنامه لاراول بررسی کردیم. اگر سوال یا نظری در این زمینه دارید، می‌توانید آن را در بخش کامنت با ما به اشتراک بگذارید.

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های