Laravel සහ Vue.js සමඟ CRUD යෙදුමක් නිර්මාණය කිරීම

මෙම නිබන්ධනයේදී අපි Laravel සහ Vue.js සමඟ උදාහරණ CRUD යෙදුමක කේතය ලියන්නේ කෙසේදැයි බලමු.

La තනි පිටු යෙදුම DB හි මූලික මෙහෙයුම් චක්‍රයක් සම්පූර්ණ කිරීමට අපට ඉඩ සලසයි: සමඟින් සාදන්න, කියවන්න, යාවත්කාලීන කරන්න සහ මකා දමන්න Vue.js , Vue රවුටර් සහ Laravel රාමුව .

වර්තමානයේ, වඩාත් ජනප්රිය JS රාමු වන්නේ Angular JS සහ Vue JS ය. Angular JS සහ Vue JS ඉතා පරිශීලක-හිතකාමී සහ වඩාත්ම ජනප්‍රිය JS රාමු වේ. එය පිටුව නැවුම් කිරීම සහ බලවත් jquery වලංගු කිරීමකින් තොරව සම්පූර්ණ ව්‍යාපෘතියේ හෝ යෙදුමේ කළමනාකරණය සපයයි.

Vue Laravel සමඟ පූර්ව ඇසුරුම් කර ඇත (සමඟ Laravel මික්ස් , පදනම් වූ විශිෂ්ට කර්තෘ මෙවලමක් webpack ) සහ සංවර්ධකයින්ට ට්‍රාන්ස්පයිලර්, කේත පැකේජ, මූලාශ්‍ර සිතියම් හෝ නවීන ඉදිරිපස සංවර්ධනයේ වෙනත් “අපිරිසිදු” අංශ ගැන කරදර නොවී සංකීර්ණ තනි පිටු යෙදුම් තැනීමට පටන් ගැනීමට ඉඩ සලසයි.

සේවාදායක අවශ්යතා

රුපියල් 7.4

Laravel 8.x

MySQL

Laravel ව්යාපෘතිය ස්ථාපනය කරන්න

පළමුව, ටර්මිනලය විවෘත කර නව laravel ව්‍යාපෘතියක් නිර්මාණය කිරීමට පහත විධානය ක්‍රියාත්මක කරන්න:

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

හෝ, ඔබ Laravel ස්ථාපකය නිර්මාපකයාගේ ගෝලීය පරායත්තතාවයක් ලෙස ස්ථාපනය කළේ නම්:

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-රවුටරය  e vue-axios . Laravel backend API ඇමතීමට Vue-axios භාවිතා කරනු ඇත. ටර්මිනලයේ පහත විධානය ක්‍රියාත්මක කරන්න:

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

Defiweb.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අපි අවසන් කරන්නෙමු router-view  එම ගොනුවේ. සියලුම මාර්ග ගොනුවේ දිස්වනු ඇත යෙදුම 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>

DefiVue Router හි CRUD යෙදුම වෙත මාර්ගය අවසන් කරන්න

දැන්, ඔබ කළ යුතුයි 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 මත ඔබට සංරචක පූරණය කළ හැක්කේ ඒවා මාර්ග හරහා අවශ්‍ය වූ විට පමණි.

app.js හි Vue.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();

සංවර්ධන සේවාදායකය ධාවනය කරන්න

ටර්මිනලය විවෘත කර මෙම විධානය ක්‍රියාත්මක කරන්න:

npm run watch

php artisan serve

අප්රි දේශීය හොස්ට්: 8000 බ්රවුසරයේ.

BlogInnovazione.it