مقالات

ایجاد یک برنامه CRUD با Laravel و Vue.js

در این آموزش با هم می بینیم که چگونه کد یک نمونه برنامه CRUD را با Laravel و Vue.js بنویسیم.

La اپلیکیشن تک صفحه ای به ما این امکان را می دهد که چرخه ای از عملیات اصلی را در DB تکمیل کنیم: ایجاد، خواندن، به روز رسانی و حذف با Vue.js ، روترهای Vue و فریم ورک لاراول .

امروزه محبوب ترین فریم ورک های JS Angular JS و Vue JS هستند. Angular JS و Vue JS بسیار کاربرپسند و محبوب ترین فریمورک های JS هستند. این برنامه مدیریت کل پروژه یا برنامه را بدون تازه کردن صفحه و اعتبارسنجی قدرتمند جی کوئری فراهم می کند.

Vue با لاراول از پیش بسته بندی شده (همراه با لاراول میکس ، یک ابزار تالیف عالی بر اساس بسته وب ) و به توسعه دهندگان این امکان را می دهد که بدون نگرانی در مورد ترانسپایلرها، بسته های کد، نقشه های منبع یا دیگر جنبه های "کثیف" توسعه frontend مدرن، شروع به ساخت برنامه های پیچیده تک صفحه ای کنند.

نمایه محتوا

نیازمندی های سرور

PHP 7.4،XNUMX

لاراول 8.x

خروجی

پروژه لاراول را نصب کنید

ابتدا ترمینال را باز کرده و دستور زیر را برای ایجاد یک پروژه لاراول جدید اجرا کنید:

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 را نصب کنید

برای نصب وابستگی های front-end دستور زیر را اجرا کنید:

npm install

پس از آن، نصب کنید نظر , vue-router e vue-axios . Vue-axios برای فراخوانی API باطن لاراول استفاده خواهد شد. دستور زیر را در ترمینال اجرا کنید:

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

مهاجرت، مدل و کنترلر ایجاد کنید

یک قالب دسته بندی، مهاجرت و کنترلر ایجاد کنید. برای آن دستور زیر را اجرا کنید:

php artisan make:model Category -mcr

-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'];

}

?>

پس از آن، باز کنید CategoryController.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 قرار دهید

اکنون باید تمام مسیرها، vue-axios و سایر وابستگی ها را اضافه کنید.

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