Krijimi i një aplikacioni CRUD me Laravel dhe Vue.js

Në këtë tutorial ne shohim së bashku se si të shkruajmë kodin e një aplikacioni shembull CRUD, me Laravel dhe Vue.js.

La Aplikim me një faqe do të na lejojë të përfundojmë një cikël operacionesh bazë në DB: të krijojmë, lexojmë, përditësojmë dhe fshijmë me Vue.js , Vue Routers dhe Korniza Laravel .

Në ditët e sotme, kornizat më të njohura të JS janë Angular JS dhe Vue JS. Angular JS dhe Vue JS janë korniza JS shumë miqësore dhe më të njohura për përdoruesit. Ai siguron menaxhimin e të gjithë projektit ose aplikacionit pa rifreskuar faqen dhe vlefshmëri të fuqishme jquery.

Vue vjen i para-paketuar me Laravel (së bashku me Përzierje Laravel , një mjet i shkëlqyer autori i bazuar në paketë ) dhe i lejon zhvilluesit të fillojnë të ndërtojnë aplikacione komplekse me një faqe pa u shqetësuar për transpiluesit, paketat e kodeve, hartat burimore ose aspekte të tjera "të pista" të zhvillimit modern të frontendit.

Kërkesat e serverit

Php 7.4

Laravel 8.x

MySQL

Instaloni projektin Laravel

Së pari, hapni Terminal dhe ekzekutoni komandën e mëposhtme për të krijuar një projekt të ri laravel:

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

ose, nëse keni instaluar Laravel Installer si një varësi globale e kompozitorit:

laravel new crud-spa

Konfiguro detajet e bazës së të dhënave:

Pas instalimit Shkoni në direktorinë rrënjë të projektit tuaj, hapni skedarin .env dhe vendosni detajet e bazës së të dhënave si më poshtë:

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

Instaloni varësitë npm

Ekzekutoni komandën e mëposhtme për të instaluar varësitë nga front-end:

npm install

Pas kësaj, instaloni Vue ,  router-vue  e vue-axios . Vue-axios do të përdoret për të thirrur API-në e fundit të Laravel. Ekzekutoni komandën e mëposhtme në terminal:

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

Krijo migrim, model dhe kontrollues

Krijoni një model kategorie, migrim dhe kontrollues. Drejtoni komandën e mëposhtme për këtë:

php artisan make:model Category -mcr

-mcr  kjo temë do të krijojë Modelin, Migrimin dhe Kontrolluesin duke përdorur sintezën e një komande të vetme.

Tani, hapni skedarin e migrimit të kategorisë nga bazat e të dhënave / migrimi dhe zëvendësoni kodin në funksion lart () :

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

Migroni bazën e të dhënave duke përdorur komandën e mëposhtme:

php artisan migrate

Tani, hapni shabllonin Category.php ngaapp/Models  dhe modifikoni kodin në skedar model Kategoria.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'];

}

?>

Pas kësaj, hapeni CategoryController.php dhe shtoni kodin në metodat e indeksit, ruani, përditësoni dhe fshini si më poshtë:

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

Defipërfundoni Rrugët në web.php

Tani defipërfundoni ato routes në dosje web.php e api.php . Shkoni te dosja routes dhe hapni skedarin web.php dhe api.php dhe përditësoni sa vijon 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']);

Krijo një aplikacion Vue

Në këtë hap, shkoni te drejtoria burimi/shikimet, krijoni skedarin app.blade.php  dhe shtoni kodin e mëposhtëm në 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>

Krijo komponent për aplikacionin Vue

Në këtë hap, shkoni te dosja resource/js, krijoni dosjen components  dhe krijoni skedarët si më poshtë:

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

aplikacioni vue  është skedari kryesor i aplikacionit tonë Vue. Defido të përfundojmë shikimi i ruterit  në atë dosje. Të gjitha shtigjet do të shfaqen në skedar aplikacioni vue  .

Hapni skedarin Welcome.vue dhe përditësoni kodin e mëposhtëm në atë skedar:

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

Hapni skedarin App.vue dhe përditësoni kodin si më poshtë:

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

Pastaj, hapeni resource / js / components / category / List.vue  dhe shtoni kodin e mëposhtëm në skedar:

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

Pas kësaj, hapeni  resource /js/components/category/Add.vue  dhe përditësoni kodin e mëposhtëm në skedar:

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

Pas kësaj, hapeni  resource /js/components/category/Edit.vue  dhe përditësoni kodin e mëposhtëm në skedar:

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

DefiPërfundoni shtegun për në aplikacionin CRUD në Vue Router

Tani, ju duhet të defipërfundoni Vue routes, dhe për ta bërë këtë shkoni te dosja  resource / js , krijoni skedarin route.js  dhe përditësoni kodin e mëposhtëm në skedar:

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

Këtu kemi përdorur komponentë ngarkim i ngadaltë. vue JS menaxhon ngarkimin e komponentëve në një mënyrë lazy me shtigje, kështu që në DOM mund të ngarkoni komponentë vetëm kur ato nevojiten përmes shtigjeve.

Përfshi varësitë e Vue.js në app.js

Tani duhet të shtoni të gjitha shtigjet, vue-axios dhe varësitë e tjera.

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

Përditëso 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();

Drejtoni serverin e zhvillimit

Hapni terminalin dhe ekzekutoni këtë komandë:

npm run watch

php artisan serve

APRI lokal lokal: 8000 në shfletuesin.

BlogInnovazione.it