Məqalələr

Laravel və Vue.js ilə CRUD Tətbiqinin yaradılması

Bu dərslikdə biz Laravel və Vue.js ilə nümunə CRUD Tətbiqinin kodunu necə yazmağı birlikdə görürük.

La Tək Səhifə Tətbiqi bizə DB-də əsas əməliyyatlar dövrünü tamamlamağa imkan verəcək: yaratmaq, oxumaq, yeniləmək və silmək Vue.js , Vue Routers və Laravel Çərçivəsi .

Hal-hazırda ən populyar JS çərçivələri Angular JS və Vue JS-dir. Angular JS və Vue JS çox istifadəçi dostu və ən populyar JS çərçivələridir. Səhifəni yeniləmədən və güclü jQuery yoxlamadan bütün layihə və ya proqramın idarə edilməsini təmin edir.

Vue Laravel ilə əvvəlcədən qablaşdırılır ( Laravel Qarışığı , əsasında əla müəllif aləti veb-paket ) və tərtibatçılara ötürücülər, kod paketləri, mənbə xəritələri və ya müasir cəbhə inkişafının digər "çirkli" aspektləri barədə narahat olmadan mürəkkəb tək səhifəli proqramlar qurmağa başlamağa imkan verir.

Server tələbləri

Php 7.4

Laravel 8.x

MySQL

Laravel layihəsini quraşdırın

Əvvəlcə Terminalı açın və yeni laravel layihəsi yaratmaq üçün aşağıdakı əmri işlədin:

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

və ya, əgər siz Laravel Installer proqramını bəstəkar qlobal asılılıq kimi quraşdırdınızsa:

laravel new crud-spa

Verilənlər bazası təfərrüatlarını konfiqurasiya edin:

Quraşdırıldıqdan sonra layihənin kök kataloquna gedin, .env faylını açın və verilənlər bazası təfərrüatlarını aşağıdakı kimi qurun:

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

Npm asılılıqlarını quraşdırın

Front-end asılılıqlarını quraşdırmaq üçün aşağıdakı əmri yerinə yetirin:

npm install

Bundan sonra quraşdırın vue ,  vue-router  e vue-axios . Vue-axios Laravel backend API-yə zəng etmək üçün istifadə olunacaq. Terminalda aşağıdakı əmri yerinə yetirin:

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

Miqrasiya, model və nəzarətçi yaradın

Kateqoriya şablonu, köçürmə və nəzarətçi yaradın. Bunun üçün aşağıdakı əmri yerinə yetirin:

php artisan make:model Category -mcr

-mcr  bu mövzu tək komanda sintezindən istifadə edərək Model, Miqrasiya və Nəzarətçi yaradacaq.

İndi kateqoriya miqrasiya faylını açın verilənlər bazası / miqrasiya və kodu funksiyaya əvəz edin yuxarı() :

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

Aşağıdakı əmrdən istifadə edərək verilənlər bazasını köçürün:

php artisan migrate

İndi buradan Category.php şablonunu açınapp/Models  və fayldakı kodu redaktə edin 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'];

}

?>

Bundan sonra açın CategoryController.php və kodu indeksə əlavə edin, saxlayın, yeniləyin və aşağıdakı üsulları silin:

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

Defiweb.php-də Marşrutları bitirin

Indi defionları bitir routes fayllarda web.php e api.php . Qovluğa keçin routes və web.php və api.php faylını açın və aşağıdakıları yeniləyin routes:

routes/web.php

İnnovasiya bülleteni
Yeniliklərlə bağlı ən vacib xəbərləri qaçırmayın. Onları e-poçtla almaq üçün qeydiyyatdan keçin.
<?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']);

Vue proqramı yaradın

Bu addımda kataloqa keçin resurs/baxışlar, faylı yaradın app.blade.php  və aşağıdakı kodu əlavə edin 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>

Vue tətbiqi üçün komponent yaradın

Bu addımda qovluğa keçin resource/js, qovluğu yaradın components  və faylları aşağıdakı kimi yaradın:

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

proqram vue  bu Vue tətbiqimizin əsas faylıdır. Defibitirəcəyik marşrutlaşdırıcı görünüşü  həmin faylda. Bütün yollar faylda görünəcək proqram vue  .

Faylı açın Welcome.vue və həmin faylda aşağıdakı kodu yeniləyin:

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

App.vue faylını açın və kodu aşağıdakı kimi yeniləyin:

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

Sonra açın resource / js / components / category / List.vue  və fayla aşağıdakı kodu əlavə edin:

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

Bundan sonra açın  resource /js/components/category/Add.vue  və faylda aşağıdakı kodu yeniləyin:

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

Bundan sonra açın  resource /js/components/category/Edit.vue  və faylda aşağıdakı kodu yeniləyin:


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

DefiVue Router-də CRUD tətbiqinə gedən yolu tamamlayın

İndi etməlisən defibitir Vue routes, və bunu etmək üçün qovluğa keçin  resource / js , faylı yaradın route.js  və faylda aşağıdakı kodu yeniləyin:

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

Burada komponentlərdən istifadə etdik yavaş yükləməvue JS bir şəkildə komponentlərin yüklənməsini idarə edir lazy yollarla, buna görə də DOM-da komponentləri yalnız yollar vasitəsilə lazım olduqda yükləyə bilərsiniz.

Vue.js asılılıqlarını app.js-ə daxil edin

İndi bütün yolları, vue-axiosları və digər asılılıqları əlavə etməlisiniz.

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-i yeniləyin

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

İnkişaf serverini işə salın

Terminalı açın və bu əmri yerinə yetirin:

npm run watch
php artisan serve

Aprel yerli host: 8000 brauzerdə.

BlogInnovazione.it

İnnovasiya bülleteni
Yeniliklərlə bağlı ən vacib xəbərləri qaçırmayın. Onları e-poçtla almaq üçün qeydiyyatdan keçin.

Articoli recenti

Smart Lock Market: bazar araşdırması hesabatı dərc edilib

Smart Lock Market termini istehsal, paylama və istifadəni əhatə edən sənaye və ekosistemə aiddir ...

Mart 27 2024

Dizayn nümunələri nədir: niyə istifadə olunur, təsnifatı, müsbət və mənfi cəhətləri

Proqram mühəndisliyində dizayn nümunələri proqram dizaynında tez-tez baş verən problemlərin optimal həllidir. mən kimiyəm...

Mart 26 2024

Sənaye markalanmasının texnoloji təkamülü

Sənaye markalanması, səthində daimi işarələr yaratmaq üçün istifadə olunan bir neçə texnikanı əhatə edən geniş bir termindir ...

Mart 25 2024

VBA ilə yazılmış Excel makrolarının nümunələri

Aşağıdakı sadə Excel makro nümunələri VBA Təxmini oxuma müddətindən istifadə etməklə yazılmışdır: 3 dəqiqə Nümunə...

Mart 25 2024