Skep 'n CRUD-toepassing met Laravel en Vue.js

In hierdie tutoriaal sien ons saam hoe om die kode van 'n voorbeeld CRUD-toepassing te skryf, met Laravel en Vue.js.

La Enkelbladsy-toepassing sal ons toelaat om 'n siklus van basiese bewerkings op DB te voltooi: skep, lees, werk op en verwyder met Vue.js , Vue Routers en Laravel Raamwerk .

Deesdae is die gewildste JS-raamwerke Angular JS en Vue JS. Angular JS en Vue JS is baie gebruikersvriendelike en gewildste JS-raamwerke. Dit bied bestuur van die hele projek of toepassing sonder om die bladsy te verfris en kragtige jquery-bekragtiging.

Vue kom vooraf verpak met Laravel (saam met Laravel Mengsel , 'n uitstekende outeursinstrument gebaseer op webpak ) en laat ontwikkelaars toe om komplekse enkelbladsytoepassings te begin bou sonder om bekommerd te wees oor transpileerders, kodepakkette, bronkaarte of ander "vuil" aspekte van moderne frontend-ontwikkeling.

Bedienervereistes

Php 7.4

Laravel 8.x

MySQL

Installeer die Laravel-projek

Maak eers Terminal oop en voer die volgende opdrag uit om 'n nuwe laravel-projek te skep:

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

of, as jy Laravel Installer as 'n komponis globale afhanklikheid geïnstalleer het:

laravel new crud-spa

Stel databasisbesonderhede op:

Na installasie Gaan na jou projek se wortelgids, maak die .env-lêer oop en stel die databasisbesonderhede soos volg in:

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

Installeer npm-afhanklikhede

Voer die volgende opdrag uit om die front-end afhanklikhede te installeer:

npm install

Daarna, installeer vue ,  vue-router  e sien-aksios . Vue-axios sal gebruik word om die Laravel backend API te noem. Voer die volgende opdrag op die terminale uit:

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

Skep migrasie, model en beheerder

Skep 'n kategorie sjabloon, migrasie en beheerder. Voer die volgende opdrag daarvoor uit:

php artisan make:model Category -mcr

-mcr  hierdie onderwerp sal model, migrasie en kontroleerder skep deur enkelopdragsintese te gebruik.

Maak nou die kategorie-migrasielêer oop vanaf databasisse / migrasie en vervang die kode in die funksie op () :

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

Migreer die databasis deur die volgende opdrag te gebruik:

php artisan migrate

Maak nou die Category.php-sjabloon oop vanafapp/Models  en wysig die kode in die lêer 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'];

}

?>

Daarna, maak oop Kategoriebeheerder.php en voeg die kode in die indeks, stoor, werk en skrap metodes soos volg:

<?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!!'
        ]);
    }
}

Defivoltooi die Roetes in web.php

Ora defimaak hulle klaar routes in lêers web.php e api.php . Gaan na gids routes en maak die web.php- en api.php-lêer oop en werk die volgende op routes:

routes/web.php

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

Skep 'n Vue-toepassing

Gaan in hierdie stap na die gids hulpbron/beskouings, skep die lêer app.blade.php  en voeg die volgende kode by 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>

Skep komponent vir Vue app

Gaan in hierdie stap na die gids resource/js, skep die gids components  en skep die lêers soos volg:

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

app. vue  dit is die hooflêer van ons Vue-app. Defions sal klaarmaak router-aansig  in daardie lêer. Alle paaie sal in die lêer verskyn app. vue  .

Maak die lêer oop Welcome.vue en werk die volgende kode in daardie lêer op:

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

Maak die App.vue-lêer oop en werk die kode soos volg op:

<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>

Toe, maak oop resource / js / components / category / List.vue  en voeg die volgende kode by die lêer:

<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>

Daarna, maak oop  resource /js/components/category/Add.vue  en werk die volgende kode in die lêer op:

<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>

Daarna, maak oop  resource /js/components/category/Edit.vue  en werk die volgende kode in die lêer op:

<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>

DefiVoltooi die pad na die CRUD-toepassing in Vue Router

Nou, jy moet defivoltooi die Vue routes, en om dit te doen, gaan na die gids  resource / js , skep die lêer route.js  en werk die volgende kode in die lêer op:

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 het ons komponente gebruik stadige laai. sien JS bestuur die laai van komponente op 'n manier lazy met paaie, dus op die DOM kan jy slegs komponente laai wanneer dit deur paaie benodig word.

Sluit Vue.js-afhanklikhede in app.js in

Nou moet jy alle paaie, vue-aksio's en ander afhanklikhede byvoeg.

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),
});

Dateer webpack.mix.js op

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

Begin die ontwikkelingsbediener

Maak terminale oop en voer hierdie opdrag uit:

npm run watch

php artisan serve

April plaaslike huis: 8000 in die blaaier.

BlogInnovazione.it