إنشاء تطبيق CRUD باستخدام Laravel و Vue.js

في هذا البرنامج التعليمي ، نرى معًا كيفية كتابة رمز مثال لتطبيق CRUD ، باستخدام Laravel و Vue.js.

La تطبيق صفحة واحدة سيسمح لنا بإكمال دورة العمليات الأساسية على قاعدة البيانات: الإنشاء والقراءة والتحديث والحذف باستخدام Vue.js وأجهزة التوجيه Vue و إطار Laravel .

في الوقت الحاضر ، أكثر أطر عمل JS شيوعًا هي Angular JS و Vue JS. Angular JS و Vue JS هي أطر عمل JS سهلة الاستخدام للغاية وأكثرها شيوعًا. يوفر إدارة المشروع أو التطبيق بأكمله دون تحديث الصفحة والتحقق من صحة jquery قوي.

تأتي Vue معبأة مسبقًا مع Laravel (جنبًا إلى جنب مع لارافيل ميكس ، أداة تأليف ممتازة تعتمد على webpack ) ويسمح للمطورين بالبدء في إنشاء تطبيقات معقدة من صفحة واحدة دون القلق بشأن المحولات أو حزم التعليمات البرمجية أو خرائط المصدر أو الجوانب "القذرة" الأخرى لتطوير الواجهة الحديثة.

متطلبات الخادم

فب 7.4

لارافيل 8.x

MySQL

ثبّت مشروع Laravel

أولاً ، افتح Terminal وقم بتشغيل الأمر التالي لإنشاء مشروع Laravel جديد:

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

أو ، إذا قمت بتثبيت Laravel Installer باعتباره تبعية عامة للملحن:

laravel new crud-spa

تكوين تفاصيل قاعدة البيانات:

بعد التثبيت ، انتقل إلى الدليل الجذر لمشروعك ، وافتح ملف .env وقم بتعيين تفاصيل قاعدة البيانات على النحو التالي:

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

قم بتشغيل الأمر التالي لتثبيت تبعيات الواجهة الأمامية:

npm install

بعد ذلك ، قم بتثبيت VUE ,  جهاز التوجيه vue  e vue-axios . سيتم استخدام Vue-axios لاستدعاء واجهة برمجة تطبيقات Laravel الخلفية. قم بتشغيل الأمر التالي على الجهاز:

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

إنشاء الهجرة والنموذج والتحكم

قم بإنشاء قالب فئة ، وترحيل ، ووحدة تحكم. قم بتشغيل الأمر التالي لذلك:

php artisan make:model Category -mcr

-مكر  سيؤدي هذا الموضوع إلى إنشاء نموذج ، وترحيل ، ووحدة تحكم باستخدام توليف أمر واحد.

الآن ، افتح ملف ترحيل الفئة من قواعد البيانات / الهجرة واستبدل الرمز في الوظيفة أعلى() :

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

قم بترحيل قاعدة البيانات باستخدام الأمر التالي:

php artisan migrate

الآن ، افتح نموذج Category.php منapp/Models  وتحرير الكود في الملف 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'];

}

?>

بعد ذلك ، افتح فئةController.php وأضف الكود في طرق الفهرس والتخزين والتحديث والحذف على النحو التالي:

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

Defiإنهاء الطرق في web.php

الآن defiانهاءهم routes في الملفات web.php e api.php . اذهب إلى المجلد routes وافتح ملف web.php و api.php وقم بتحديث ما يلي 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']);

أنشئ تطبيق Vue

في هذه الخطوة ، انتقل إلى الدليل الموارد / الآراء، قم بإنشاء الملف app.blade.php  وأضف الكود التالي إلى 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

في هذه الخطوة ، انتقل إلى المجلد resource/js، قم بإنشاء المجلد components  وأنشئ الملفات على النحو التالي:

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

التطبيق. vue  إنه الملف الرئيسي لتطبيق Vue. Defiسننتهي عرض جهاز التوجيه  في هذا الملف. ستظهر جميع المسارات في الملف التطبيق. vue  .

افتح الملف Welcome.vue وقم بتحديث الكود التالي في هذا الملف:

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

افتح ملف App.vue وقم بتحديث الكود كما يلي:

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

ثم افتح resource / js / components / category / List.vue  وأضف الكود التالي في الملف:

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

بعد ذلك ، افتح  resource /js/components/category/Add.vue  وقم بتحديث الكود التالي في الملف:

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

بعد ذلك ، افتح  resource /js/components/category/Edit.vue  وقم بتحديث الكود التالي في الملف:

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

Defiأكمل المسار إلى تطبيق CRUD في Vue Router

الآن ، عليك أن تفعل defiانهي ال Vue routes، وللقيام بذلك انتقل إلى المجلد  resource / js ، قم بإنشاء الملف route.js  وقم بتحديث الكود التالي في الملف:

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

هنا استخدمنا المكونات تحميل بطيء. vue js يدير تحميل المكونات بطريقة ما lazy مع المسارات ، لذلك في DOM ، لا يمكنك تحميل المكونات إلا عند الحاجة إليها من خلال المسارات.

قم بتضمين تبعيات Vue.js في app.js

أنت الآن بحاجة إلى إضافة جميع المسارات والمحور الرأسية والاعتماديات الأخرى.

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

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

قم بتشغيل خادم التطوير

افتح Terminal وقم بتشغيل هذا الأمر:

npm run watch

php artisan serve

أبري الاستضافة المحلية: 8000 في المتصفح.

BlogInnovazione.it