如何在 Laravel 10 中集成 Vue Inertia 分页

大家好，

我们今天的主题是 Laravel 10 Vue 3 Pagination with Vite Example。这篇文章详细讨论了使用 Laravel 的简单 Vue.js 分页示例。我们将看一个如何使用 vue js 在 Laravel 10 中生成分页的示例。我想以使用 Vue 3 为例演示 Laravel 10 分页。

您可以将此示例与 laravel 6、laravel 7、laravel 8、laravel 9 和 laravel 10 版本一起使用。

在本教程中，我们将使用 laravel breeze、inertia js、vite 和 tailwind CSS 构建带有 laravel API 的 React js 分页。我们将制作一个名为“帖子”的表格，其中包含标题和正文列。然后记录将分页显示。

按照 Laravel 10 Vue Inertia Pagination Integration Tutorial 的以下教程步骤进行操作。

第 1 步：下载 Laravel

让我们通过安装一个新的 Laravel 应用程序开始本教程。如果您已经创建了项目，则跳过以下步骤。

composer create-project laravel/laravel example-app

第 2 步：使用 Breeze 创建身份验证

现在，在这一步中，我们需要使用 composer 命令来安装 breeze，所以让我们运行 bellow 命令并安装 bellow 库。

composer require laravel/breeze --dev

现在，我们需要使用以下命令创建身份验证。您可以使用 vue js 创建基本的登录、注册和电子邮件验证。如果要创建团队管理，则必须传递附加参数。你可以看到以下命令：

php artisan breeze:install vue

现在，让我们节点js包：

npm install

让我们运行 vite，你必须继续启动这个命令：

npm run dev

现在，我们需要运行迁移命令来创建数据库表：

php artisan migrate

第 3 步：创建迁移和模型

在这里，我们需要为 Posts 表创建数据库迁移，我们还将为 files 表创建模型。

php artisan make:migration create_posts_table

移民：

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

php artisan migrate

现在我们将使用以下命令创建 Post.php 模型：

php artisan make:model Post

应用程序/模型/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

第 4 步：创建路线

第三步，我们将为 vue js 图片上传示例创建路由。所以在这里创建获取和发布路线。

路线/web.php

<?php
 
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('posts', [PostController::class, 'index'])->name('index');

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

第五步：创建控制器

在此步骤中，我们将创建 PostController 文件并在其上添加以下代码。

应用程序/Http/Controllers/PostController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
   
class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::latest()
                    ->paginate(5);

        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }
}

第 6 步：创建 vue 页面

在这里，在这一步中，我们将为 Index.vue 创建 vue js 文件

因此，让我们创建它并在其上添加以下代码。

资源/js/Pages/Posts/Index.vue

<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Pagination from '@/Components/Pagination.vue'

defineProps({
    posts: Object,
});

</script>

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Laravel 10 Vue 3 Pagination Example with Vite - NiceSnippets.com
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">

                        <table className="table-fixed w-full">
                            <thead>
                                <tr className="bg-gray-100">
                                    <th className="px-4 py-2 w-20">No.</th>
                                    <th className="px-4 py-2">Title</th>
                                    <th className="px-4 py-2">Body</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="post in posts.data">
                                    <td className="border px-4 py-2">{{ post.id }}</td>
                                    <td className="border px-4 py-2">{{ post.title }}</td>
                                    <td className="border px-4 py-2">{{ post.body }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <Pagination class="mt-6" :links="posts.links" />
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

资源/js/Components/Pagination.vue

.vue looks like:

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap mt-8">
            <template v-for="(link, key) in links" :key="key">
                <div
                    v-if="link.url === null"
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label"
                />

                <Link
                    v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
                    :class="{ 'bg-blue-700 text-white': link.active }"
                    :href="link.url"
                    v-html="link.label"
                />
            </template>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
    components: {
        Link,
    },
    props: {
        links: Array,
    },
});
</script>

运行 Laravel 应用程序：

所有必需的步骤都已完成，现在您必须输入下面给出的命令并按回车键运行 Laravel 应用程序：

php artisan serve

同时继续运行以下命令进行 vite：

npm run dev

如果要构建，则可以运行以下命令：

npm run build

现在，转到您的 Web 浏览器，键入给定的 URL 并查看应用程序输出：

http://localhost:8000/login

现在可以了……

输出

我希望它可以帮助你...

文章原文出处：https: //www.nicesnippets.com/

#laravel #vue #integration 

What is GEEK

Buddha Community

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

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

Vue Laravel File Upload | Upload Image in Laravel Vue

We will use Laravel as a backend and Vue js as a frontend framework or library. In this small project, we will upload an image from the vue component. First, we download the Laravel and then install the dependencies using pm, and then we will start our project.

Steps to upload file in Laravel Vue

The first step will be to install and configure the Laravel Framework.

Step 1: Install Laravel

Go to your terminal and hit the following command.

composer create-project laravel/laravel vuefileupload --prefer-dist

After installation, go to the project folder root and type the following command.

npm install

It installs all the necessary dependencies to build Vue components.

#vue #laravel vue #vue js #laravel

如何在 Laravel 10 中集成 Vue Inertia 分页

大家好，

我们今天的主题是 Laravel 10 Vue 3 Pagination with Vite Example。这篇文章详细讨论了使用 Laravel 的简单 Vue.js 分页示例。我们将看一个如何使用 vue js 在 Laravel 10 中生成分页的示例。我想以使用 Vue 3 为例演示 Laravel 10 分页。

您可以将此示例与 laravel 6、laravel 7、laravel 8、laravel 9 和 laravel 10 版本一起使用。

在本教程中，我们将使用 laravel breeze、inertia js、vite 和 tailwind CSS 构建带有 laravel API 的 React js 分页。我们将制作一个名为“帖子”的表格，其中包含标题和正文列。然后记录将分页显示。

按照 Laravel 10 Vue Inertia Pagination Integration Tutorial 的以下教程步骤进行操作。

第 1 步：下载 Laravel

让我们通过安装一个新的 Laravel 应用程序开始本教程。如果您已经创建了项目，则跳过以下步骤。

composer create-project laravel/laravel example-app

第 2 步：使用 Breeze 创建身份验证

现在，在这一步中，我们需要使用 composer 命令来安装 breeze，所以让我们运行 bellow 命令并安装 bellow 库。

composer require laravel/breeze --dev

现在，我们需要使用以下命令创建身份验证。您可以使用 vue js 创建基本的登录、注册和电子邮件验证。如果要创建团队管理，则必须传递附加参数。你可以看到以下命令：

php artisan breeze:install vue

现在，让我们节点js包：

npm install

让我们运行 vite，你必须继续启动这个命令：

npm run dev

现在，我们需要运行迁移命令来创建数据库表：

php artisan migrate

第 3 步：创建迁移和模型

在这里，我们需要为 Posts 表创建数据库迁移，我们还将为 files 表创建模型。

php artisan make:migration create_posts_table

移民：

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

php artisan migrate

现在我们将使用以下命令创建 Post.php 模型：

php artisan make:model Post

应用程序/模型/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

第 4 步：创建路线

第三步，我们将为 vue js 图片上传示例创建路由。所以在这里创建获取和发布路线。

路线/web.php

<?php
 
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('posts', [PostController::class, 'index'])->name('index');

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

第五步：创建控制器

在此步骤中，我们将创建 PostController 文件并在其上添加以下代码。

应用程序/Http/Controllers/PostController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
   
class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::latest()
                    ->paginate(5);

        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }
}

第 6 步：创建 vue 页面

在这里，在这一步中，我们将为 Index.vue 创建 vue js 文件

因此，让我们创建它并在其上添加以下代码。

资源/js/Pages/Posts/Index.vue

<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Pagination from '@/Components/Pagination.vue'

defineProps({
    posts: Object,
});

</script>

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Laravel 10 Vue 3 Pagination Example with Vite - NiceSnippets.com
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">

                        <table className="table-fixed w-full">
                            <thead>
                                <tr className="bg-gray-100">
                                    <th className="px-4 py-2 w-20">No.</th>
                                    <th className="px-4 py-2">Title</th>
                                    <th className="px-4 py-2">Body</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="post in posts.data">
                                    <td className="border px-4 py-2">{{ post.id }}</td>
                                    <td className="border px-4 py-2">{{ post.title }}</td>
                                    <td className="border px-4 py-2">{{ post.body }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <Pagination class="mt-6" :links="posts.links" />
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

资源/js/Components/Pagination.vue

.vue looks like:

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap mt-8">
            <template v-for="(link, key) in links" :key="key">
                <div
                    v-if="link.url === null"
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label"
                />

                <Link
                    v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
                    :class="{ 'bg-blue-700 text-white': link.active }"
                    :href="link.url"
                    v-html="link.label"
                />
            </template>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
    components: {
        Link,
    },
    props: {
        links: Array,
    },
});
</script>

运行 Laravel 应用程序：

所有必需的步骤都已完成，现在您必须输入下面给出的命令并按回车键运行 Laravel 应用程序：

php artisan serve

同时继续运行以下命令进行 vite：

npm run dev

如果要构建，则可以运行以下命令：

npm run build

现在，转到您的 Web 浏览器，键入给定的 URL 并查看应用程序输出：

http://localhost:8000/login

现在可以了……

输出

我希望它可以帮助你...

文章原文出处：https: //www.nicesnippets.com/

#laravel #vue #integration 

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete