Como criar rolagem infinita e carregar mais no Laravel 8 Vue

Este tutorial de rolagem infinita do Laravel 8 Vue JS explica como criar uma rolagem infinita ou carregar mais no aplicativo Laravel 8 Vue JS.

Ao longo deste guia abrangente, você encontrará os métodos mais fáceis de construir a rolagem de página infinita do Vue Js usando os componentes vue js no projeto laravel.

A rolagem infinita é um procedimento que permite que os usuários rolem por uma grande parte do conteúdo sem nenhuma percepção da linha de chegada. Este método mantém totalmente a atualização de uma página quando você rola para baixo.

Genericamente, a rolagem infinita está sendo usada pela maioria dos aplicativos modernos para aprimorar a experiência do usuário. Em sites de comércio eletrônico, você pode ver vários produtos em uma única página; à medida que você percorre o aplicativo, mais dados são carregados na visualização do aplicativo.

Usando o mesmo paradigma, criaremos um pequeno aplicativo no qual carregaremos mais vários produtos, principalmente quando ocorrer um evento de rolagem de página. Dessa forma, mostraremos todos os produtos usando a rolagem infinita de páginas no aplicativo laravel vue js.

Instale o projeto Laravel

A primeira começa com a instalação do projeto laravel, então abra o terminal e execute o seguinte comando:

composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

Adicionar detalhes do banco de dados

Na segunda etapa, abra o arquivo de configuração .env e adicione o nome do banco de dados, nome de usuário e senha:

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

Criar modelo e executar migração

Esta etapa trata de verificar como criar um modelo, igualmente importante migrar a tabela para o banco de dados usando a migração.

Então, execute o comando para criar o arquivo de modelo do produto:

php artisan make:model Product -m

Além disso, abra o arquivo database/migrations/create_products_table.php e adicione os valores da tabela na migração do produto:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Abra o arquivo app/Http/Models/Product.php e atualize o seguinte código:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'description'
    ];        
}

Logo após criar e configurar o modelo e a migração, é hora de executar o seguinte comando para migrar a tabela Product dentro do banco de dados:

php artisan migrate

Gerar dados falsos

Primeiro você precisa criar uma classe de fábrica de produtos:

php artisan make:factory ProductFactory --model=Product

festança

cópia de

Além disso, coloque o código abaixo em database\factories\ProductFactory.php :

<?php

namespace Database\Factories;

use App\Models\Product;
use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Product::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'description' => $this->faker->text
        ];
    }
}

Use o comando tinker no console para gerar os dados de teste no banco de dados:

php artisan tinker

Product::factory()->count(200)->create()

Gerar e configurar o controlador

Vá até o console, invoque o seguinte comando para gerar um novo controlador:

php artisan make:controller ProductController

Abra o arquivo recém-gerado neste caminho app/Http/Controllers/ProductController.php e atualize o código abaixo:

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;


class ProductController extends Controller
{
    public function index(Request $request)
    {
        return view('welcome');
    }

    public function fetchProducts()
    {
        $data = Product::orderBy('id')->paginate(12);
        return response()->json($data);
    }
}

Criar rota

Em seguida, crie uma rota que ajudará a fazer a solicitação HTTP GET e buscar os dados dos produtos do banco de dados; insira o código abaixo no arquivo routes/web.php :

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

Route::get('/', [ProductController::class, 'index']);

Route::get('/products', [ProductController::class, 'fetchProducts']);

Instalar a interface do usuário do Laravel Vue

Nesta etapa, você precisa instalar o pacote laravel Vue UI com o comando abaixo:

composer require laravel/ui

php artisan ui vue

Além disso, execute o comando para instalar as dependências npm necessárias:

npm install

Instale o Vue Infinite Loading

Na etapa subsequente, instale o pacote vue-infinite-loading com o comando npm. É um plugin de rolagem infinita útil para o aplicativo Vue.js.

Ele oferece uma solução rápida para implementar uma rolagem infinita ou carregar mais recursos de uma maneira exorbitante e sem esforço. Aqui estão os recursos que este incrível plugin oferece:

• Compatível com dispositivos móveis
• Spinners internos
• Suporte bidirecional
• Carregar exibição de mensagem de resultado

npm install vue-infinite-loading

Configurar o Vue JS no Laravel

Crie o arquivo InfiniteScrollComponent.vue na pasta resources/js/components/, adicione o seguinte código no arquivo resources/js/components/InfiniteScrollComponent.vue :

<template>
    <div> 
        <div v-for="product in Products" :key="product.id">
            {{product.name}}
        </div>
        <infinite-loading @distance="1" @infinite="handleLoadMore"></infinite-loading>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Products: [],
                page: 1,
            };
        },
        methods: {
            handleLoadMore($state) {

                this.$http.get('/products?page=' + this.page)
                    .then(res => {
                        return res.json();
                    }).then(res => {
                        $.each(res.data, (key, value) => {
                            this.Products.push(value);
                        });
                        $state.loaded();
                    });

                this.page = this.page + 1;
            },
        },
    }
</script>

Em seguida, instale o pacote vue-resource para habilitar componentes de arquivo único Vue:

npm install vue-resource

festança

cópia de

Em seguida, abra o arquivo resources/js/app.js e registre o componente Vue JS:

require('./bootstrap');
window.Vue = require('vue').default;
import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.component('infinite-scroll-component', require('./components/InfiniteScrollComponent.vue').default);
Vue.component('InfiniteLoading', require('vue-infinite-loading'));

const app = new Vue({
    el: '#app',
});

Além disso, adicione o componente vue dentro do arquivo resources/views/welcome.blade.php :

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

<div class="container" style="margin-top:30px">
    <infinite-scroll-component></infinite-scroll-component>
</div>

@endsection

Por fim, crie uma pasta de layout dentro do caminho resources/views e também crie um arquivo app.blade.php.

Adicione o seguinte código em resources/views/layout/app.blade.php :

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}" />

    <title>Laravel Vue JS Load More Example</title>

    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>

</html>

Aplicativo de teste

Por fim, você deve executar o comando abaixo para compilar os ativos vue:

npm run watch

Abra outro terminal e inicie o servidor de desenvolvimento laravel:

php artisan serve

Abra o navegador e cole a seguinte url na barra de endereços e visualize o aplicativo:

http://127.0.0.1:8000

O tutorial de rolagem infinita do laravel vue js acabou; neste tutorial, aprendemos como criar o Load More no Laravel 8 Vue JS App usando o pacote vue-infinite-loading .

What is GEEK

Buddha Community

Laravel 8 VUE JS Example | Laravel 8 VUE JS Tutorial For Beginners

#laravel 8 vue js #laravel vue js #laravel vue js tutorial #laravel 8 vue js tutorial

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Laravel 8 New Features | Release Notes - Tuts Make

In this post, i will show you what’s new in laravel 8 version.

#What’s new in Laravel 8?

• 1 - Change Path Of Default Models Directory
• 2 - Removed Controllers Namespace Prefix
• 3 - Enhancements on php artisan serve
• 4 - Enhanced Rate Limiting
• 5 - Enhanced on Route Caching
• 6 - Update on Pagination Design
• 8 - Dynamic Blade Componenets
• 7 - Update Syntax for Closure Based Event Listeners
• 8 - Queueable Model Event Listeners
• 9 - Maintenance mode: secret access
• 10 - Maintenance mode: pre-rendered page
• 11 - Queued job batching
• 12 - Queue backoff()
• 13 - Laravel Factory

https://www.tutsmake.com/laravel-8-new-features-release-notes/

#laravel 8 features #laravel 8 release date #laravel 8 tutorial #news - laravel 8 new features #what's new in laravel 8 #laravel 8 release notes

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

How to Send E-mail Using Queue in Laravel 7/8

Today I will show you How to Send E-mail Using Queue in Laravel 7/8, many time we can see some process take more time to load like payment gateway, email send, etc. Whenever you are sending email for verification then it load time to send mail because it is services. If you don’t want to wait to user for send email or other process on loading server side process then you can use queue.

Read More : How to Send E-mail Using Queue in Laravel 7/8

https://websolutionstuff.com/post/how-to-send-e-mail-using-queue-in-laravel-7-8

---

Read Also : Send Mail Example In Laravel 8

https://websolutionstuff.com/post/send-mail-example-in-laravel-8

#how to send e-mail using queue in laravel 7/8 #email #laravel #send mail using queue in laravel 7 #laravel 7/8 send mail using queue #laravel 7/8 mail queue example