Afirandina Serlêdanek CRUD bi Laravel û Vue.js

Di vê tutoriyê de em bi hev re dibînin ka meriv çawa koda mînakek CRUD App-ê, bi Laravel û Vue.js re dinivîse.

La Serlêdana Rûpelek Yekane dê rê bide me ku em çerxa operasyonên bingehîn li ser DB-ê biqedînin: biafirînin, bixwînin, nûve bikin û jêbirin Vue.js , Vue Routers û Çarçoveya Laravel .

Naha, çarçoveyên JS yên herî populer Angular JS û Vue JS ne. Angular JS û Vue JS çarçoveyên JS-ê yên pir bikarhêner-heval û herî populer in. Ew bêyî nûvekirina rûpelê û pejirandina jquery ya hêzdar rêveberiya tevahiya proje an serîlêdanê peyda dike.

Vue bi Laravel re (li gel Laravel Mix , amûrek nivîskarek hêja ya ku li ser bingeha wê ye webpack ) û destûrê dide pêşdebiran ku dest bi avakirina serîlêdanên yek-rûpelê tevlihev bikin bêyî ku li ser transpilers, pakêtên kodê, nexşeyên çavkaniyê an aliyên din ên "pîs" ên pêşkeftina pêşkeftina nûjen xem bikin.

Pêdiviyên serverê

Php 7.4

Laravel 8.x

MySQL

Projeya Laravel saz bikin

Pêşîn, Termînalê vekin û emrê jêrîn bimeşînin da ku projeyek laravel a nû biafirînin:

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

an, heke we Laravel Installer wekî pêwendiyek gerdûnî ya berhevkar saz kir:

laravel new crud-spa

Detayên databasê mîheng bikin:

Piştî sazkirinê Herin pelrêça root ya projeya xwe, pelê .env vekin û hûrguliyên databasê wekî jêrîn saz bikin:

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

Girêdanên npm saz bikin

Fermana jêrîn bimeşînin da ku girêdanên pêş-end-end saz bikin:

npm install

Piştî vê yekê, saz bikin vue ,  vue-rûter  e vue-axios . Vue-axios dê were bikar anîn da ku API-ya paşîn a Laravel bang bike. Fermana jêrîn li ser termînalê bimeşînin:

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

Koçberî, model û kontrolker biafirînin

Şablonek kategoriyê, koçberî û kontrolker biafirînin. Ji bo wê emrê jêrîn bicîh bikin:

php artisan make:model Category -mcr

-mcr  ev mijar dê Model, Koçberî û Kontrolker bi karanîna senteza yek fermanê biafirîne.

Naha, pelê koçberiya kategoriyê jê vekin databases / koçberî û kodê di fonksiyonê de biguherînin bi jorve() :

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

Bi karanîna fermana jêrîn databasê koç bikin:

php artisan migrate

Naha, ji şablonê Category.php vekinapp/Models  û kodê di pelê de biguherînin model Category.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'];

}

?>

Piştî vê yekê, vekin CategoryController.php û kodê di navnîşan, hilanîn, nûvekirin û jêbirinê de bi awayên jêrîn zêde bikin:

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

DefiRoutes di web.php de biqedînin

ora defiwan biqedînin routes di pelan de web.php e api.php . Biçe peldankê routes û pelê web.php û api.php vekin û jêrîn nûve bikin 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']);

Serlêdanek Vue biafirînin

Di vê gavê de, biçin pelrêça çavkanî / dîtin, pelê çêbikin app.blade.php  û koda jêrîn lê zêde bike 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>

Ji bo sepana Vue pêkhateyek biafirînin

Di vê gavê de, biçin peldankê resource/js, peldankê biafirîne components  û pelan bi vî rengî biafirînin:

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

app.vue  ew pelê sereke ya sepana me ya Vue ye. Defiem ê biqedînin router-view  di wê dosyayê de. Hemî rê dê di pelê de xuya bibin app.vue  .

Pelê vekin Welcome.vue û di wê pelê de koda jêrîn nûve bikin:

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

Pelê App.vue vekin û kodê wekî jêrîn nûve bikin:

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

Piştre, vekin resource / js / components / category / List.vue  û koda jêrîn li pelê zêde bikin:

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

Piştî vê yekê, vekin  resource /js/components/category/Add.vue  û di pelê de koda jêrîn nûve bikin:

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

Piştî vê yekê, vekin  resource /js/components/category/Edit.vue  û di pelê de koda jêrîn nûve bikin:

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

DefiRêya berbi sepana CRUD di Vue Router de biqedînin

Niha, divê hûn defibiqedînin Vue routes, û ji bo vê yekê herin peldankê  resource / js , pelê çêbikin route.js  û di pelê de koda jêrîn nûve bikin:

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

Li vir me pêkhateyên bi kar anîne barkirina hêdî. vue JS barkirina pêkhateyan bi awayekî birêve dibe lazy bi riyan re, ji ber vê yekê li ser DOM-ê hûn dikarin hêmanan tenê gava ku ew bi riyan re hewce ne bar bikin.

Girêdanên Vue.js di app.js de vedihewînin

Naha hûn hewce ne ku hemî rê, vue-axios û girêdanên din lê zêde bikin.

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

webpack.mix.js nûve bikin

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

Pêşkêşkara pêşveçûnê bimeşîne

Termînalê vekin û vê fermanê bimeşînin:

npm run watch

php artisan serve

Avrêl herêmî: 8000 di gerokê de.

BlogInnovazione.it