Waren

Erstellen einer CRUD-App mit Laravel und Vue.js

laravel vuejs

In diesem Tutorial sehen wir gemeinsam, wie man den Code einer Beispiel-CRUD-App mit Laravel und Vue.js schreibt.

La Einzelseitenanwendung ermöglicht es uns, einen Zyklus grundlegender Operationen auf der DB abzuschließen: Erstellen, Lesen, Aktualisieren und Löschen mit Vue.js , Vue-Router und Laravel-Framework .

Heutzutage sind die beliebtesten JS-Frameworks Angular JS und Vue JS. Angular JS und Vue JS sind sehr benutzerfreundlich und die beliebtesten JS-Frameworks. Es bietet die Verwaltung des gesamten Projekts oder der Anwendung ohne Aktualisierung der Seite und eine leistungsstarke JQuery-Validierung.

Vue wird mit Laravel (zusammen mit Laravel-Mix , ein hervorragendes Authoring-Tool basierend auf Webpack ) und ermöglicht es Entwicklern, mit dem Erstellen komplexer Einzelseitenanwendungen zu beginnen, ohne sich Gedanken über Transpiler, Codepakete, Quellkarten oder andere „schmutzige“ Aspekte der modernen Frontend-Entwicklung machen zu müssen.

Serveranforderungen

PHP 7.4

Laravel 8.x.

MySQL

Installieren Sie das Laravel-Projekt

Öffnen Sie zunächst Terminal und führen Sie den folgenden Befehl aus, um ein neues Laravel-Projekt zu erstellen:

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

oder, wenn Sie Laravel Installer als globale Composer-Abhängigkeit installiert haben:

laravel new crud-spa

Datenbankdetails konfigurieren:

Nach der Installation Wechseln Sie in Ihr Projektstammverzeichnis, öffnen Sie die .env-Datei und stellen Sie die Datenbankdetails wie folgt ein:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

Installieren Sie npm-Abhängigkeiten

Führen Sie den folgenden Befehl aus, um die Front-End-Abhängigkeiten zu installieren:

npm install

Danach installieren vue ,  Vue-Router  e vue-axios . Vue-axios wird verwendet, um die Laravel-Backend-API aufzurufen. Führen Sie den folgenden Befehl auf dem Terminal aus:

npm install vue vue-router vue-axios --save

Migration, Modell und Controller erstellen

Erstellen Sie eine Kategorievorlage, eine Migration und einen Controller. Führen Sie dazu den folgenden Befehl aus:

php artisan make:model Category -mcr

-mcr  In diesem Thema werden Modelle, Migrationen und Controller mithilfe einer einzelnen Befehlssynthese erstellt.

Öffnen Sie nun die Kategorie-Migrationsdatei von Datenbanken / Migration und ersetzen Sie den Code in der Funktion hoch() :

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

Migrieren Sie die Datenbank mit dem folgenden Befehl:

php artisan migrate

Öffnen Sie nun die Vorlage Category.php ausapp/Models  und bearbeiten Sie den Code in der Datei model Kategorie.php :

<?php

namespace App\Models;

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

class Category extends Model {

   use HasFactory;

   protected $fillable = ['title','description'];

}

?>

Danach öffnen CategoryController.php und fügen Sie den Code in den Index-, Store-, Update- und Delete-Methoden wie folgt hinzu:

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $categories = Category::all(['id','title','description']);
        return response()->json($categories);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $category = Category::create($request->post());
        return response()->json([
            'message'=>'Category Created Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function show(Category $category)
    {
        return response()->json($category);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Category $category)
    {
        $category->fill($request->post())->save();
        return response()->json([
            'message'=>'Category Updated Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function destroy(Category $category)
    {
        $category->delete();
        return response()->json([
            'message'=>'Category Deleted Successfully!!'
        ]);
    }
}

DefiBeenden Sie die Routen in web.php

Uhr defiMach sie fertig routes in den Dateien web.php e api.php . Gehen Sie zum Ordner routes und öffnen Sie die Dateien web.php und api.php und aktualisieren Sie Folgendes routes:

routes/web.php

Innovations-Newsletter
Verpassen Sie nicht die wichtigsten Neuigkeiten zum Thema Innovation. Melden Sie sich an, um sie per E-Mail zu erhalten.
<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

routes/api.php

<?php
 
Route::resource('category',App\Http\Controllers\CategoryController::class)->only(['index','store','show','update','destroy']);

Erstellen Sie eine Vue-App

Wechseln Sie in diesem Schritt in das Verzeichnis Ressource/Ansichten, erstellen Sie die Datei app.blade.php  und fügen Sie den folgenden Code hinzu 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 CRUD App</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="app">
        </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
</html>

Erstellen Sie eine Komponente für die Vue-App

Wechseln Sie in diesem Schritt zum Ordner resource/js, erstellen Sie den Ordner components  und erstellen Sie die Dateien wie folgt:

  • View app
  • Welcome.vue
  • Category/List.vue
  • Category/Add.vue
  • Category/Edit.vue

app. vue  Es ist die Hauptdatei unserer Vue-App. Defiwir werden fertig Router-Ansicht  in dieser Datei. Alle Pfade werden in der Datei angezeigt app. vue  .

Öffne die Datei Welcome.vue und aktualisieren Sie den folgenden Code in dieser Datei:

<template>
    <div class="container mt-5">
        <div class="col-12 text-center">
            <h1>Laravel Vuejs CRUD</h1>
        </div>
    </div>
</template>

Öffnen Sie die Datei App.vue und aktualisieren Sie den Code wie folgt:

<template>
    <main>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <router-link to="/" class="navbar-brand" href="#">Laravel Vue Crud App</router-link>
                <div class="collapse navbar-collapse">
                    <div class="navbar-nav">
                        <router-link exact-active-class="active" to="/" class="nav-item nav-link">Home</router-link>
                        <router-link exact-active-class="active" to="/category" class="nav-item nav-link">Category</router-link>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container mt-5">
            <router-view></router-view>
        </div>
    </main>
</template>
 
<script>
    export default {}
</script>

Dann öffnen resource / js / components / category / List.vue  und fügen Sie den folgenden Code in die Datei ein:

<template>
    <div class="row">
        <div class="col-12 mb-2 text-end">
            <router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Category</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody v-if="categories.length > 0">
                                <tr v-for="(category,key) in categories" :key="key">
                                    <td>{{ category.id }}</td>
                                    <td>{{ category.title }}</td>
                                    <td>{{ category.description }}</td>
                                    <td>
                                        <router-link :to='{name:"categoryEdit",params:{id:category.id}}' class="btn btn-success">Edit</router-link>
                                        <button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td colspan="4" align="center">No Categories Found.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"categories",
    data(){
        return {
            categories:[]
        }
    },
    mounted(){
        this.getCategories()
    },
    methods:{
        async getCategories(){
            await this.axios.get('/api/category').then(response=>{
                this.categories = response.data
            }).catch(error=>{
                console.log(error)
                this.categories = []
            })
        },
        deleteCategory(id){
            if(confirm("Are you sure to delete this category ?")){
                this.axios.delete(`/api/category/${id}`).then(response=>{
                    this.getCategories()
                }).catch(error=>{
                    console.log(error)
                })
            }
        }
    }
}
</script>

Danach öffnen  resource /js/components/category/Add.vue  und aktualisieren Sie den folgenden Code in der Datei:

<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Add Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="create">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"add-category",
    data(){
        return {
            category:{
                title:"",
                description:""
            }
        }
    },
    methods:{
        async create(){
            await this.axios.post('/api/category',this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

Danach öffnen  resource /js/components/category/Edit.vue  und aktualisieren Sie den folgenden Code in der Datei:


<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Update Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="update">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"update-category",
    data(){
        return {
            category:{
                title:"",
                description:"",
                _method:"patch"
            }
        }
    },
    mounted(){
        this.showCategory()
    },
    methods:{
        async showCategory(){
            await this.axios.get(`/api/category/${this.$route.params.id}`).then(response=>{
                const { title, description } = response.data
                this.category.title = title
                this.category.description = description
            }).catch(error=>{
                console.log(error)
            })
        },
        async update(){
            await this.axios.post(`/api/category/${this.$route.params.id}`,this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

DefiBeenden Sie den Pfad zur CRUD-App im Vue Router

Jetzt musst du es tun defibeende das Vue routes, und gehen Sie dazu in den Ordner  resource / js , erstellen Sie die Datei route.js  und aktualisieren Sie den folgenden Code in der Datei:

const Welcome = () => import('./components/Welcome.vue' /* webpackChunkName: "resource/js/components/welcome" */)
const CategoryList = () => import('./components/category/List.vue' /* webpackChunkName: "resource/js/components/category/list" */)
const CategoryCreate = () => import('./components/category/Add.vue' /* webpackChunkName: "resource/js/components/category/add" */)
const CategoryEdit = () => import('./components/category/Edit.vue' /* webpackChunkName: "resource/js/components/category/edit" */)

export const routes = [
    {
        name: 'home',
        path: '/',
        component: Welcome
    },
    {
        name: 'categoryList',
        path: '/category',
        component: CategoryList
    },
    {
        name: 'categoryEdit',
        path: '/category/:id/edit',
        component: CategoryEdit
    },
    {
        name: 'categoryAdd',
        path: '/category/add',
        component: CategoryCreate
    }
]

Hier haben wir Komponenten verwendet langsames Laden. vue js verwaltet das Laden von Komponenten in gewisser Weise lazy mit Pfaden, sodass Sie auf dem DOM Komponenten nur dann laden können, wenn sie über Pfade benötigt werden.

Fügen Sie Vue.js-Abhängigkeiten in app.js ein

Jetzt müssen Sie alle Pfade, Vue-Axios und andere Abhängigkeiten hinzufügen.

resource / js / app.js

require('./bootstrap');
import vue from 'vue'
window.Vue = vue;

import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

Aktualisieren Sie webpack.mix.js

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

Führen Sie den Entwicklungsserver aus

Öffnen Sie das Terminal und führen Sie diesen Befehl aus:

npm run watch
php artisan serve

Apri lokaler Host: 8000 im Browser.

BlogInnovazione.it

Innovations-Newsletter
Verpassen Sie nicht die wichtigsten Neuigkeiten zum Thema Innovation. Melden Sie sich an, um sie per E-Mail zu erhalten.
Stichworte: LaravelphpSoftware.Software-DesignSoftware-EntwicklungSoftware Engineeringvue.js
27. Februar 2023 9:55 Uhr

Aktuelle Artikel

Googles neue künstliche Intelligenz kann DNA, RNA und „alle Moleküle des Lebens“ modellieren

Google DeepMind stellt eine verbesserte Version seines Modells der künstlichen Intelligenz vor. Das neue, verbesserte Modell bietet nicht nur…

9. Mai 2024

Erkundung der modularen Architektur von Laravel

Laravel, bekannt für seine elegante Syntax und leistungsstarken Funktionen, bietet auch eine solide Grundlage für modulare Architektur. Dort…

9. Mai 2024

Cisco Hypershield und Übernahme von Splunk Die neue Ära der Sicherheit beginnt

Cisco und Splunk unterstützen Kunden dabei, ihren Weg zum Security Operations Center (SOC) der Zukunft zu beschleunigen, mit…

8. Mai 2024

Jenseits der wirtschaftlichen Seite: die nicht offensichtlichen Kosten von Ransomware

Ransomware dominiert seit zwei Jahren die Nachrichten. Den meisten Menschen ist durchaus bewusst, dass Angriffe…

6. Mai 2024

Innovativer Eingriff in Augmented Reality mit einem Apple-Viewer in der Poliklinik Catania

In der Poliklinik von Catania wurde eine Augenkorrektur mit dem kommerziellen Viewer Apple Vision Pro durchgeführt.

3. Mai 2024

Die Vorteile von Malvorlagen für Kinder – eine Welt voller Magie für alle Altersgruppen

Die Entwicklung der Feinmotorik durch Malen bereitet Kinder auf komplexere Fähigkeiten wie das Schreiben vor. Färben…

2. Mai 2024

Die Zukunft ist da: Wie die Schifffahrtsindustrie die Weltwirtschaft revolutioniert

Der Marinesektor ist eine echte globale Wirtschaftsmacht, die auf einen 150-Milliarden-Milliarden-Markt zusteuert...

1. Mai 2024

Verlage und OpenAI unterzeichnen Vereinbarungen zur Regulierung des Informationsflusses, der von künstlicher Intelligenz verarbeitet wird

Letzten Montag gab die Financial Times einen Deal mit OpenAI bekannt. FT lizenziert seinen erstklassigen Journalismus…

30. April 2024

Lesen Sie Innovation in Ihrer Sprache

Innovations-Newsletter
Verpassen Sie nicht die wichtigsten Neuigkeiten zum Thema Innovation. Melden Sie sich an, um sie per E-Mail zu erhalten.

Folgen Sie uns

Aktuelle Artikel

Etikett

Alimente attacco informatik blockchain Chatbot chatten gpt Cloud Cloud Computing Content Marketing Cyber ​​Attacke Internet-Sicherheit Verbraucherrecht E-EINKAUF Äneas Innovationsveranstaltung gianfranco fedele Google influencer Innovation Innovationen finanzieren inkrementelle Innovation medizinische Innovation Innovation Nachhaltigkeit Technologische Innovation künstliche Intelligenz IOT Laravel Maschinelles lernen metaverse Microsoft nft php antworten Robotica seo SERP Software. Software-Design Software-Entwicklung Software Engineering Nachhaltigkeit Anfang thales Dein Thema VPN web3