Exemple Laravel 8 Vue JS CRUD

Cet exemple de projet consiste à:

Créer un projet Laravel
Etablir la connexion à la base de données
Créer un Model et exécuter la migration
Créer et configurer le contrôleur (controller)
Ajouter des Routes
Installer l’interface utilisateur de Laravel Vue
Installer les dépendances NPM
Construire des composants CRUD de Vue Js
Tester les opérations CRUD de Laravel Vue JS

Installer l’application Laravel

Ouvrez le terminal et exécutez la commande ci-dessous pour manifester un nouveau projet laravel, ignorez cette étape si le projet est déjà installé :

composer create-project laravel/laravel laravel-vue-crud --prefer-dist

Connexion à la base de données:

Cette étape explique comment établir une connexion à la base de données en ajoutant le nom de la base de données, le nom d’utilisateur et le mot de passe dans le fichier de configuration .env de votre projet :

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

Modèle et migration:

Exécutez le processus ci-dessous pour créer respectivement le modèle (table de base de données) et le fichier de migration :

php artisan make:model Product -m

Ajoutet ce code à database/migrations/create_products_table.php:

<?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–>text(‘detail’);
$table–>timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(‘products’);
}
}
Configurer Product Model comme suit à app/Models/Product.php:

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
use HasFactory;
protected $fillable = [
‘name’,
‘detail’
];
}

Executer la migration:

php artisan migrate

Créer Product Controller:

Vous devez créer le contrôleur de produit et définir les méthodes d’opérations CRUD :

php artisan make:controller ProductController

Ouvrir et mettre le code ci-dessous dans app\Http\Controllers\ProductController.php :

public function store(Request $request)
{
$product = new Product([
‘name’ => $request->input(‘name’),
‘detail’ => $request->input(‘detail’)
]);
$product->save();

return response()->json(‘Product created!’);
}

public function show($id)
{
$product = Product::find($id);
return response()->json($product);
}

public function update($id, Request $request)
{
$product = Product::find($id);
$product->update($request->all());

return response()->json(‘Product updated!’);
}

public function destroy($id)
{
$product = Product::find($id);
$product->delete();

return response()->json(‘Product deleted!’);
}
}

Ouvrir le fichier routes/web.php, et définir les Routes suivants:

Route::resource('products', ProductController::class);
});

Ensuite, vous devez ouvrir le fichier routes/api.php. Tout d’abord, importez le contrôleur de produit par-dessus, puis définissez les routes de l’API CRUD dans la méthode du groupe de routes comme indiqué ci-dessous :

Installer Laravel Vue UI

Exécuter la commande composer pour installer Vue UI dans laravel, ça va créer aussi vue laravel scaffold:

composer require laravel/ui
php artisan ui vue

Après cela, utilisez la commande pour installer les packages vue router et vue axios.

npm install vue-router vue-axios

Exécuter cette commande pour installer les packages NPM:

npm install

La commande npm run watch compile les assets et à l’ecoute de toutes modification:

npm run watch

Installer Vue dans Laravel

Pour configurer une application vue dans Laravel, vous devez créer un dossier de mise en page dans le répertoire resources/views et créer un fichier app.blade.php dans le dossier de mise en page.
Modifier le fichier suivant:

<div id="app"></div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>

<strong>Créer Vue CRUD Components</strong>
Ensuite, vous devez ajouter la directive router-view dans le fichier App.vue ; ce modèle aidera à invoquer toutes les routes de vue associées aux composants.

Alors, créez le fichier App.js dans le dossier resources/js, placez le code ci-dessous dans le fichier resources/js/App.js :
<code></code>
<div class="container"><nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse">
<div class="navbar-nav">Products List
Create Product</div>
</div>
</nav>

</div>

<script>
    export default {}
</script>

Maintenant, vous devez créer les fichiers de composants vue js suivants dans le dossier resources/js/components :

AllProduct.vue
CreateProduct.vue
EditProduct.vue

Ajoutez du code dans le fichier resources/js/components/AllProduct.vue ; ici, nous obtenons toutes les données de la base de données et supprimons un seul objet produit de la base de données via le composant vue.

<div>
<h2 class="text-center">Products List</h2>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Detail</th>
<!--
<th>Actions</th>
--></tr>
</thead>
<tbody>
<tr>
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.detail }}</td>
<td>
<div class="btn-group" role="group">Edit
<button class="btn btn-danger">Delete</button></div></td>
</tr>
</tbody>
</table>
</div>
&nbsp;

<script>
    export default {
        data() {
            return {
                products: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/products/')
                .then(response => {
                    this.products = response.data;
                });
        },
        methods: {
            deleteProduct(id) { 
                this.axios
                    .delete(`http://localhost:8000/api/products/${id}`)
                    .then(response => {
                        let i = this.products.map(data => data.id).indexOf(id);
                        this.products.splice(i, 1)
                    });
            }
        }
    }
</script>