Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

11 months ago

Como implementar tabelas de dados com Vue.js no aplicativo Laravel

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.

  • Passo 1: Instale o aplicativo Laravel 8
  • Etapa 2: conectando o aplicativo ao banco de dados
  • Etapa 3: criar modelo e migração
  • Etapa 4: configuração do NPM
  • Etapa 5: adicionar rotas
  • Etapa 6: criar controlador por comando
  • Passo 7: Criar Componente Vue
  • Etapa 8: criar visualizações de lâmina e inicializar componentes Vue
  • Etapa 9: execute o servidor de desenvolvimento

Passo 1: Instale o aplicativo Laravel 8

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

Etapa 2: conectando o aplicativo ao banco de dados

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

Etapa 3: criar modelo e migração

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

Etapa 4: configuração do NPM

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

Etapa 5: adicionar rotas

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']);

Etapa 6: criar controlador por comando

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);
         
    }
}

Passo 7: Criar Componente Vue

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',
});

Etapa 8: criar visualizações de lâmina e inicializar componentes Vue

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

Etapa 9: execute o servidor de desenvolvimento

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!!!

1.05 GEEK