DataTables é um plug-in jQuery que pode ser usado para adicionar controles interativos e avançados a tabelas HTML. Ele fornece recursos como pesquisa, classificação e paginação, bem como a capacidade de personalizar a aparência e o comportamento da tabela.
Neste tutorial, aprenderemos como implementar tabelas de dados com Vue.js em seu aplicativo Laravel. Este tutorial passo a passo mostrará como criar um recurso simples de tabelas de dados que permite aos usuários filtrar, classificar e paginar dados em uma tabela.
Nesta etapa, você precisa instalar a configuração mais recente do aplicativo laravel, então abra seu terminal OU prompt de comando e execute o seguinte comando:
composer create-project --prefer-dist laravel/laravel blog
Depois de instalar com sucesso o novo aplicativo laravel, vá para o diretório raiz do projeto e abra o arquivo .env . Em seguida, configure a credencial do banco de dados no arquivo .env da seguinte maneira:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Próximo passo, você precisa executar o seguinte comando no terminal:
php artisan make:model Post -fm
Este comando criará um nome de modelo post.php e também criará um arquivo de migração para a tabela de posts .
Agora abra o arquivo de migração create_posts_table.php em database>migrations e substitua a função up() pelo seguinte código:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->string('slug');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Em seguida, migre a tabela usando o comando abaixo:
php artisan migrate
Em seguida, navegue até app/Models/Post.php e atualize o seguinte código em seu modelo Post.php da seguinte forma:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $guarded = [];
}
Em seguida, navegue até database/factories e abra PostFactory.php . Em seguida, atualize o seguinte código nele da seguinte maneira:
/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Models\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
return [
'title' => $faker->sentence,
'slug' => \Str::slug($faker->sentence)
];
});
e, em seguida, execute o seguinte comando no terminal para gerar dados falsos usando o faker da seguinte forma:
php artisan tinker
//and then
factory(\App\Models\Post::class,100)->create()
exit
Você precisa configurar o Vue e instalar as dependências do Vue usando o NPM. Portanto, execute o seguinte comando no prompt de comando:
php artisan preset vue
Instale todas as dependências do Vue:
npm install
Instale vuejs-datatable:
npm install vuejs-datatable
Próximo passo, vá para a pasta de rotas e abra o arquivo web.php e adicione as seguintes rotas em seu arquivo:
rotas/web.php
use App\Http\Controllers\PostController;
Route::get('posts', [PostController::class, 'index']);
Próximo passo, abra seu prompt de comando e execute o seguinte comando para criar um controlador por um artesão:
php artisan make:controller PostController
Depois disso, vá app\Http\Controllers e abra o arquivo PostController.php . Em seguida, atualize o seguinte código em seu arquivo PostController.php :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index(Request $request)
{
$posts = Post::get();
return response()->json($posts);
}
}
Próximo passo, vá para resources/assets/js/components a pasta e crie um arquivo chamado DataTableComponent.vue .
Agora, atualize o seguinte código em seu arquivo de componentes DataTableComponent.vue :
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel Vue Datatables Component Example - Tutsmake.com</div>
<div class="card-body">
<datatable :columns="columns" :data="rows"></datatable>
<datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import DatatableFactory from 'vuejs-datatable';
export default {
components: { DatatableFactory },
mounted() {
console.log('Component mounted.')
},
data(){
return {
columns: [
{label: 'id', field: 'id'},
{label: 'Title', field: 'title'},
{label: 'Slug', field: 'slug'}
],
rows: [],
page: 1,
per_page: 10,
}
},
methods:{
getPosts: function() {
axios.get('/posts').then(function(response){
this.rows = response.data;
}.bind(this));
}
},
created: function(){
this.getPosts()
}
}
</script>
Agora abra resources/assets/js/app.js e inclua o componente DataTableComponent.vue da seguinte forma:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);
const app = new Vue({
el: '#app',
});
Nesta etapa, navegue até recursos/visualizações e crie uma pasta chamada layouts . Dentro desta pasta, crie um arquivo blade view chamado arquivo app.blade.php .
Em seguida, navegue até recursos/visualizações/layouts e abra o arquivo app.blade.php . Em seguida, atualize o seguinte código em seu arquivo app.blade.php da seguinte forma:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 8 Vue JS DataTable Example Tutorial</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@stack('fontawesome')
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Em seguida, navegue até resources/views/ e abra welocome.blade.php . Em seguida, atualize o seguinte código em seu arquivo welcome.blade.php da seguinte forma:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel Vue Js DataTable Example</div>
<div class="card-body">
<datatable-component></datatable-component>
</div>
</div>
</div>
</div>
</div>
@endsection
Para iniciar o servidor de desenvolvimento executando o seguinte comando no prompt de comando ou terminal:
npm run dev
or
npm run watch
Obrigado por ler!!!