Laravel ve Vue.js ile CRUD Uygulaması Oluşturma

Bu öğreticide, Laravel ve Vue.js ile örnek bir CRUD Uygulamasının kodunun nasıl yazılacağını birlikte göreceğiz.

La Tek Sayfa Uygulaması DB'deki temel işlemler döngüsünü tamamlamamıza izin verecek: ile oluşturma, okuma, güncelleme ve silme Vue.js , Vue Yönlendiriciler ve Laravel Çerçevesi .

Günümüzde en popüler JS çerçeveleri Angular JS ve Vue JS'dir. Angular JS ve Vue JS, oldukça kullanıcı dostu ve en popüler JS çerçeveleridir. Sayfayı yenilemeden tüm projenin veya uygulamanın yönetimini ve güçlü jquery doğrulamasını sağlar.

Vue, Laravel ile önceden paketlenmiş olarak gelir (ile birlikte laravel karışımı dayalı mükemmel bir yazma aracı webpack ) ve geliştiricilerin aktarıcılar, kod paketleri, kaynak haritaları veya modern ön uç geliştirmenin diğer "kirli" yönleri hakkında endişelenmeden karmaşık tek sayfa uygulamaları oluşturmaya başlamasına olanak tanır.

Sunucu gereksinimleri

Php 7.4

laravel 8.x

MySQL

Laravel projesini kurun

Öncelikle Terminal'i açın ve yeni bir laravel projesi oluşturmak için aşağıdaki komutu çalıştırın:

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

veya, bir besteci global bağımlılığı olarak Laravel Installer'ı yüklediyseniz:

laravel new crud-spa

Veritabanı ayrıntılarını yapılandırın:

Kurulumdan sonra proje kök dizininize gidin, .env dosyasını açın ve veritabanı ayrıntılarını aşağıdaki gibi ayarlayın:

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 bağımlılıklarını kurun

Ön uç bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın:

npm install

Bundan sonra yükleyin vue ,  vue yönlendirici  e vue-eksenleri . Laravel arka uç API'sini çağırmak için Vue-axios kullanılacaktır. Terminalde aşağıdaki komutu çalıştırın:

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

Geçiş, model ve denetleyici oluşturun

Bir kategori şablonu, geçiş ve denetleyici oluşturun. Bunun için aşağıdaki komutu çalıştırın:

php artisan make:model Category -mcr

-mcr  bu konu, tek komut sentezini kullanarak Model, Migration ve Controller oluşturacaktır.

Şimdi, kategori geçiş dosyasını şu adresten açın: veritabanları / taşıma ve kodu işleve değiştirin yukarı() :

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

Aşağıdaki komutu kullanarak veritabanını geçirin:

php artisan migrate

Şimdi, Category.php şablonunu şuradan açın:app/Models  ve dosyadaki kodu düzenleyin model Kategori.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'];

}

?>

Ondan sonra aç CategoryController.php ve kodu dizine ekleyin, saklayın, güncelleyin ve silin yöntemleri aşağıdaki gibidir:

<?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'deki Rotaları bitirin

Ora defibitir onları routes dosyalarda web.php e api.php . Klasöre git routes ve web.php ve api.php dosyasını açın ve aşağıdakileri güncelleyin 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']);

Bir Vue uygulaması oluşturun

Bu adımda, dizine gidin kaynak/görünümler, dosyayı oluştur app.blade.php  ve aşağıdaki kodu ekleyin 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 uygulaması için bileşen oluştur

Bu adımda, klasöre gidin resource/js, klasörü oluştur components  ve dosyaları aşağıdaki gibi oluşturun:

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

app.vue  Vue uygulamamızın ana dosyasıdır. Defibitireceğiz yönlendirici görünümü  o dosyada Tüm yollar dosyada görünecek app.vue  .

Dosyayı aç Welcome.vue ve bu dosyada aşağıdaki kodu güncelleyin:

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

App.vue dosyasını açın ve kodu aşağıdaki gibi güncelleyin:

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

Ardından, aç resource / js / components / category / List.vue  ve dosyaya aşağıdaki kodu ekleyin:

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

Ondan sonra aç  resource /js/components/category/Add.vue  ve dosyadaki aşağıdaki kodu güncelleyin:

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

Ondan sonra aç  resource /js/components/category/Edit.vue  ve dosyadaki aşağıdaki kodu güncelleyin:

<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'da CRUD uygulamasının yolunu tamamlayın

Şimdi, yapmalısın defibitirmek Vue routesve bunu yapmak için klasöre gidin  resource / js , dosyayı oluştur route.js  ve dosyadaki aşağıdaki kodu güncelleyin:

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 bileşenleri kullandık yavaş yükleme. vue js bileşenlerin yüklenmesini bir şekilde yönetir lazy yollarla, yani DOM'da bileşenleri yalnızca yollarda ihtiyaç duyulduğunda yükleyebilirsiniz.

Vue.js bağımlılıklarını app.js'ye dahil et

Şimdi tüm yolları, vue-axios'u ve diğer bağımlılıkları eklemeniz gerekiyor.

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'yi güncelleyin

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

Geliştirme sunucusunu çalıştırın

Terminali açın ve şu komutu çalıştırın:

npm run watch

php artisan serve

Apri yerel ana bilgisayar: 8000 tarayıcıda.

BlogInnovazione.it