ساخت دیتا گرید با استفاده از Vue + laravel


توی این آموزش میخوام نحوه ساختن دیتا گرید با استفاده از vue.js و ajax رو آموزش بدم . من توی محیط laravel میخوام این آموزش رو انجام بدم . لذا افرادی که با فرم ورک لاراول آشنایی کافی رو ندارن هیچ مشکلی نداره ، فقط فرض کنید که توی صفحات مختلف html بخواید از vue.js استفاده کنید .

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

1 - ساختن یک بانک اطلاعاتی فرقی نمیکنه ، Mysql , Sqlsrv

2 - ایجاد ارتباطات بین فرم ورک و بانک اطلاعاتی

3 - ساختن یک تیبل و ایجاد model من اینجا از یک تیبل به نام posts استفاده میکنم.

4 - ایجاد یک کنترلر به نام postController و ساخت یک اکشن به نام index

5 - ایجاد یک route به نام اکشن تعریف شده در کنترلر .

6 - ساخت core اصلی دیتا گرید با vue.js

7 - تبدیل core به کمپوننت .

# ساخت یک بانک اطلاعاتی

واسه ساختن بانک اطلاعاتی خیلی راحت میتونید با استفاده از Phpmyadmin یک بانک اطلاعاتی رو بسازید . اسم بانک اطلاعاتی را میزارم datagrid . 

# ایجاد ارتباط بین فرم ورک و بانک اطلاعاتی

واسه ایجاد کردن ارتباط بین فرم ورک و بانک اطلاعاتی مورد نظر میتونیم از فایل .env اقدام کنیم و این دستورات رو به اطلاعات مورد نظر خودمون تغییر بدیم .

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=datagrid
DB_USERNAME=root
DB_PASSWORD=

# ساخت یک تیبل با استفاده از migrations

با استفاده از دستور

php artisan make:migration post

یک فایل migration ساخته میشود که توی متد up  میتونید دستورات پایین رو بنویسید .

Schema::create('posts', function (Blueprint $table) {
    $table->increments('id');
    $table->string('title');
    $table->string('content');
    $table->string('slug');
    $table->string('thumbnail');
    $table->timestamps();
});

سپس با استفاده از دستور زیر تیبل مورد نظر با موفقیت ساخته میشود .

php artisan migrate

بعد از ساخت تیبل میتوانیم با استفاده از دستور زیر مدل خود را ایجاد کنیم .

php artisan make:model Post

# ایجاد کنترلر postController و اکشن index

برای ایجاد یک کنترلر میتوانید از دستور زیر استفاده کنید یا اینکه میتوانید یک class با controller namespace ایجاد کنید .

php artisan make:controller PostController

ایجاد یک اکشن در کنترلر به نام index

public function index(){
   
    reutrn Post::get();
}

# ایجاد یک route با نام اکشن مورد نظر

Route::get("post", ["as"=>"post.index", "uses"=>"PostController@index"])

# ساخت core اصلی datagrid

<div class="container">
   <table>
      <tr>
          
      </tr>
   </table>
</div>

خوب خیلی راحت یک تیبل ساختیم که این تیبل شامل یک تگ tr  میباشد . حالا میخوایم مقادیر رو با استفاده از ajax صدا بزنیم و در یک متغیر به نام posts آنها رو بریزیم .

new Vue({
    el:".container",
    data:{
        posts:""
    }
    ready:function(){
        var vm = this;
        $.ajax({
            url:"{!! action('Postcontroller@getIndex') !!}",
            type:"get",
            success:function(e){
                vm.posts = e;
            }
        })
    }
})

بعد از اینکار باید بتوانیم مقادیر موجود در متغیر posts را نشان دهیم .

<div class="container">
   <table>
      <thead>
          <tr>
            <td>#</td>
            <td>موضوع</td>
            <td>آدرس</td>    
            <td>تاریخ ایجاد</td>
            <td>تاریخ ویرایش</td>    
          </tr> 
      </thead>
      <tr v-for="post in posts">
          <td v-html="$index"></td>
          <td v-html="post.title"></td>
          <td v-html="post.slug"></td>
          <td v-html="post.created_at"></td>
          <td v-html="post.updated_at"></td>
      </tr>
   </table>
</div>

 # تبدیل core به کمپوننت

برای اینکه یک کمپوننت با vue.js بسازیم باید از دستور زیر استفاده کنیم .

Vue.component('post',
 {
   template: "#post",
   props:{post:''}
 });

خوب همانطوری که میبینید ما یدونه کمپوننت ساختیم که این کمپوننت با نام post تعریف شده و به صورت global میباشد . و خصوصیت template  را معادل #post قرار دادیم .

Props خصوصیت اولیه یک کمپوننت میباشند . که میتوان از این props به عنوان داده های ورودی از parent استفاده کرد .

حالا باید template رو بسازیم.

<template id="post">
    <tr v-for="(key, row) in post">
        <td v-for="cell in row" v-html="cell" track-by="$index"></td>
    </tr>
</template>

template خودمون رو خیلی راحت ساختیم حالا واسه اینکه بتونیم از این کپوننت استفاده کنیم میتونیم به این شکل عمل کنیم .

<div class="container">
   <table>
      <thead>
          <tr>
            <td>#</td>
            <td>موضوع</td>
            <td>آدرس</td>    
            <td>تاریخ ایجاد</td>
            <td>تاریخ ویرایش</td>    
          </tr> 
      </thead>
      <tbody>
          <tr is="post" :post="post"></tr>
      </tbody>
   </table>
</div>

خوب خیلی راحت کمپوننت خودمون رو ساختیم ، حالا میتونیم هر جا که خواستیم از این کمپوننت استفاده کنیم . امیدواروم از آموزش خوشتون اومده باشه . البته این دیتا گرید هنوز خیلی چیزا رو نداره مثل pagination یا مثل تعداد در صفحه که توی آموزشهای بعدی اینارو آموزش میدیم .

مشکل ، مورد ، نظر ، ایده هر سوالی که به ذهنتون در مورد این آموزش میرسه لطفاً بیان کنید



    • srouzbahani35@yahoo.com
      سلام ببخشید میشه اموزش ایجاد گارد در لاراول رو هم بذارین؟ من نیاز دارم برای پروژم چند تا گارد تعریف کنم .
      • mohammad.kaab@gmail.com

        چشم ُ حتما اینکارو در روزهای آتی انجام خواهم داد .