لاراول یکی از محبوب ترین فریم ورکهای PHP است که کتابخانه Vue.js را که بسیار سریع در حال رشد است، داخل خود جاسازی کرده است.
توسعه دهندگان لاراول برای طراحی سایت به راحتی می توانند از Vue.js استفاده کنند و با vue.js به frontend خود قدرت دهند.
برای آموزش امروز به ابزارهای زیر نیاز داریم:
قبل از هر چیز باید Node.js را در سیستم خود نصب کنیم که بسیار راحت از سایت node.js میتوان آنرا نصب کرد. سپس در پروژه لاراول خود با دستورات زیر laravel-mix را که بصورت پیش فرض در پروژه وجود دارد نصب می کنیم.
npm install
در فایل env و یا در دایرکتوری config/database.php اطلاعات مربوط به دیتابیسمان(username, DB name, and password) را وارد می کنیم.
با دستور زیر جدول tasks را ایجاد می کنیم.
cd /path-to-project/project-name
php artisan make:migration create_tasks_table --create=tasks
با دستور بالا یک فایل با نامی که در بالا برای migration خود انتخاب کردیم در دایرکتوری database/migration ایجاد می شود که در متد up دستورات زیر را وارد می کنیم:
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->unsignedInteger('user_id');
$table->text('description');
$table->timestamps();
});
}
سپس در دایرکتوری app/Providers/AppServiceProvider.php در متد boot اندازه فیلدهای string خود را در دیتابیس مشخص می کنیم.
use Illuminate\Support\Facades\Schema;
public function boot()
{
Schema::defaultStringLength(191);
}
برای ایجاد جداول مورد نظر بالا دستور زیر را اجرا می کنیم
Php artisan migrate
در لاراول یک سیستم تایید اعتبار پیش فرضی وجود دارد که با آن کاربران می توانند ثبت نام، ورود و خروج به سیستم را داشته باشند و برای امنیت بیشتر از laravel CRSF توکن استفاده می کند. برای پروژه SPA خود با laravel و Vue به این سیستم احراز هویت نیاز داریم. با دستور زیر سیستم احراز هویت پیش فرض لاراول نصب می شود.
php artisan make:auth
برای ساخت مدل خود کافیست دستور زیر وارد کنیم:
php artisan make:model Task -r
با اجرای دستور بالا در CMD کلاس app/Task.php ایجاد می شود که دستورات زیر را در آن وارد می کنیم:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Contracts\Validation\Validator;
class Task extends Model
{
protected $fillable = [
'name',
'user_id',
'description',
];
}
با دستور بالا همچنین کلاس app/Http/Controllers/TaskController.php ایجاد می شود که دستورات زیر را در آن وارد می کنیم:
<?php
namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class TaskController extends Controller
{
public function index()
{
$tasks = Task::where(['user_id' => Auth::user()->id])->get();
return response()->json([
'tasks' => $tasks,
], 200);
}
public function create()
{
//
}
public function store(Request $request)
{
}
public function show(Task $task)
{
//
}
public function edit(Task $task)
{
//
}
public function update(Request $request, Task $task)
{
}
public function destroy(Task $task)
{
}
}
برای اعمال سیستم احراز هویت یک میان افزار در متد سازنده کنترل Task ایجاد می کنیم:
public function __construct()
{
$this->middleware('auth');
}
در متد Store کنترلر Task برای ایجاد Task کدهای زیر را وارد می کنیم:
$this->validate($request, [
'name' => 'required',
'description' => 'required',
]);
$task = Task::create([
'name' => request('name'),
'description' => request('description'),
'user_id' => Auth::user()->id
]);
return response()->json([
'task' => $task,
'message' => 'Success'
], 200);
در متد update کنترل task برای ویرایش Task، کدهای زیر را وارد می کنیم:
$this->validate($request, [
'name' => 'required|max:255',
'description' => 'required',
]);
$task->name = request('name');
$task->description = request('description');
$task->save();
return response()->json([
'message' => 'Task updated successfully!'
], 200);
در متد destroy کنترل task برای حذف Task، کدهای زیر را وارد می کنیم:
$task->delete();
return response()->json([
'message' => 'Task deleted successfully!'
], 200);
ایجاد مسیرهای(آدرس دهی وب) در فایل route/web.php به شکل زیر می باشد:
Route::get('/home', 'HomeController@index')->name('home');
Route::resource('/task', 'TaskController');
یک کامپوننت Vue با نام Task.vue در مسیر /resources/assets/js/components/ ایجاد می کنیم و کدهای زیر را در آن وارد می کنیم:
سپس برای رجیستر کردن کامپوننت بالا در فایل app.js در مسیر/resources/assets/js/app.js کدهای زیر را وارد می کنیم:
Vue.component('task', require('./components/Task.vue'));
برای اضافه شدن کامپوننت بالا و رجیستر شدن کامپوننت از دستور زیر استفاده می کنیم:
npm run dev
برای صدا زدن کامپوننت در تمپلت home.blade.php در مسیر /resources/views/ کدهای زیر را وارد می کنیم:
@extends('layouts.app')
@section('content')
<task></task>
@endsection
فایل Task.vue را در مسیر /resources/assets/js/components/ با کدهای زیر آپدیت می کنیم:
با دستور زیر کامپوننت خود را کامپایل می کنیم:
npm run dev
تیریک می گویم single page laravel app شما ایجاد گردید.