Construire une application Laravel 9 CRUD en utilisant Vite its, voici comment le faire ! – Solution brillante

Construire une application Laravel 9 CRUD en utilisant Vite its, voici comment le faire ! – Solution brillante. Aujourd’hui, nous allons apprendre Laravel 9 Application Vue JS CRUD utilisant l’exemple Vite. Ce didacticiel couvrira l’application laravel 9 Vue Js CRUD en utilisant la dernière mise à jour laravel de Vite avec un exemple.

Vite est un outil de construction frontal moderne qui fournit un environnement de développement extrêmement rapide et regroupe votre code pour la production. Lors de la création d’applications avec Laravel, vous utiliserez généralement Vite pour regrouper les fichiers CSS et JavaScript de votre application dans des ressources prêtes pour la production.

Vue.js est un framework JavaScript frontal modèle-vue-vue open-source pour la création d’interfaces utilisateur et d’applications à page unique. Il a été créé par Evan You et est maintenu par lui et le reste des membres actifs de l’équipe principale.

• Étape 1: Installation de la nouvelle application Laravel 9
• Étape 2: Création de la base de données et de la configuration
• Étape 3: Création d’authentification avec Breeze
• Étape 4: Création d’une migration et d’un modèle
• Étape 5 : Création d’un itinéraire
• Étape 6 : Création d’un contrôleur
• Étape 7 : Création de pages Vue
• Étape 8 : Essai
• Étape 9 : Conclusion

Tout d’abord, nous installons une nouvelle application laravel 9. Pour installer une application laravel, exécutez la commande suivante dans le terminal.

composer create-project laravel/laravel vuejs-crud-vitecd vuejs-crud-vite

Note: “vuejs-crud-vite” est le nom de notre application laravel.

Maintenant, nous allons créer une base de données. Première ouverture phpmyadmin et créer une base de données avec le nom “vuejs-crud-vite” (vous pouvez utiliser tout ce que vous voulez).

Nous allons maintenant ajouter les détails de la base de données à l’application laravel. Ouvrir .env fichier et entrez les détails de la base de données.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuejs-crud-vite
DB_USERNAME=root
DB_PASSWORD=

• laravel vite
• vite laravel
• vite laravel 9

Nous allons maintenant créer auth avec Breeze. Exécutez la commande suivante dans le terminal pour installer la bibliothèque Breeze.

composer require laravel/breeze --dev

créez une authentification avec la commande suivante.

php artisan breeze:install vue

Installez le package Node JS.

npm install

Maintenant, exécutez la commande vite et faites-la continuer à fonctionner.

npm run dev

Remarque : si une erreur se produit, le nœud a été mis à jour vers la v16.16.0 et cela a fonctionné

Ouvrez maintenant un nouveau terminal et exécutez la migration.

php artisan migrate

Ici, nous allons créer une table de migration pour les messages. Pour créer une migration de publications, exécutez la commande suivante.

php artisan make:migration create_posts_table

ajoutez les champs suivants au fichier de migration des publications.

• laravel vite
• vite laravel
• vite laravel 9

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

;

Exécutez à nouveau la migration pour créer une table de messages.

php artisan migrate

Alors maintenant, nous allons créer Modèle de poteau. Créer un Modèle de poteau exécutez la commande suivante dans le terminal.

php artisan make:model Post

Et ajoutez le code suivant à Message.php modèle.

use Illuminate\Database\Eloquent\Model;class Post extends Model

use HasFactory;    /**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'body'
];

• laravel vite
• vite laravel
• vite laravel 9

Nous allons maintenant créer une route de ressources pour notre application CRUD. Ajoutez l’itinéraire suivant à routes/web.php

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('/', 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';Route::resource('posts', PostController::class);

Dans cette étape, nous allons créer un Post Controller. Créer un nouveau fichier PostController.php dans app/Http/Contrôleurs dossier et ajoutez le code suivant à l’intérieur.

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::all();
return Inertia::render('Posts/Index', ['posts' => $posts]);
/**
* Write code on Method
*
* @return response()
*/
public function create()

return Inertia::render('Posts/Create');
/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function store(Request $request)

Validator::make($request->all(), [
'title' => ['required'],
'body' => ['required'],
])->validate();
Post::create($request->all());
return redirect()->route('posts.index');
/**
* Write code on Method
*
* @return response()
*/
public function edit(Post $post)

return Inertia::render('Posts/Edit', [
'post' => $post
]);
/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function update($id, Request $request)

Validator::make($request->all(), [
'title' => ['required'],
'body' => ['required'],
])->validate();
Post::find($id)->update($request->all());
return redirect()->route('posts.index');
/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function destroy($id)

Post::find($id)->delete();
return redirect()->route('posts.index');

Dans cette dernière étape, nous créons une page Vue Js – Index.vue, Créer.vue et Edit.vue.

Créer un nouveau dossier Des postes à l’intérieur ressources/js/Pages et créer des pages ci-dessous à l’intérieur Des postes dossier.

ressources/js/Pages/Articles/Index.vue

className="px-6 py-2 text-white bg-green-500 rounded-md focus:outline-none"
:href="https://brilliansolution.com/tutorial-laravel-9-vue-js-crud-app-using-vite-example/route("posts.create')"
>
Create Post



















No.
Title
Body
Action
 post.id 
 post.title 
 post.body 

tabIndex="1"
className="px-4 py-2 text-sm text-white bg-blue-500 rounded"
:href=" post.id)"
>
Edit

@click="destroy(post.id)"
tabIndex="-1"
type="button"
className="mx-1 px-4 py-2 text-sm text-white bg-red-500 rounded"
>
Delete

ressources/js/Pages/Messages/Create.vue

className="px-6 py-2 text-white bg-blue-500 rounded-md focus:outline-none"
:href="https://brilliansolution.com/tutorial-laravel-9-vue-js-crud-app-using-vite-example/route("posts.index')"
>
Back





id="title" 
type="text" 
class="mt-1 block w-full" 
v-model="form.title" 
autofocus />

 form.errors.title 



id="body" 
class="mt-1 block w-full" 
v-model="form.body" 
autofocus />

 form.errors.body 



type="submit"
className="px-6 py-2 font-bold text-white bg-green-500 rounded"
>
Save

ressources/js/Pages/Articles/Edit.vue

className="px-6 py-2 text-white bg-blue-500 rounded-md focus:outline-none"
:href="https://brilliansolution.com/tutorial-laravel-9-vue-js-crud-app-using-vite-example/route("posts.index')"
>
Back





id="title" 
type="text" 
class="mt-1 block w-full" 
v-model="form.title" 
autofocus />

 form.errors.title 



id="body" 
class="mt-1 block w-full" 
v-model="form.body" 
autofocus />

 form.errors.body 



type="submit"
className="px-6 py-2 font-bold text-white bg-green-500 rounded"
>
Save

Créer un nouveau fichier Textaarea.vue à l’intérieur ressources/js/Pages/Composants

ressources/js/Pages/Components/Textarea.vue

Ajouter une navigation de poste dans Authentifié.vue à l’intérieur ressources/js/Mises en page dossier.

  Dashboard  Posts

Testons maintenant notre application Laravel 9 Vue JS CRUD en utilisant Vite Example. Exécutez la commande suivante pour démarrer le serveur laravel.

php artisan serve

Exécutez également Vite dans un nouveau terminal et laissez-le fonctionner.

npm run dev

ou construire.

npm run build

Ouvrez maintenant n’importe quel navigateur Web et entrez le lien suivant pour tester l’application.

Remarque : enregistrez un nouvel utilisateur, puis cliquez sur les publications depuis la navigation.

Aperçu:

Aujourd’hui, nous avons appris Application Laravel 9 Vue JS CRUD utilisant l’exemple de Vite. J’espère que ce tutoriel vous a aidé à apprendre Laravel 9. Si vous avez des questions, vous pouvez nous les poser dans la section des commentaires ci-dessous.

mots clés:

• laravel vite
• vite laravel
• vite laravel 9

En rapport