Laravel اور Vue.js کے ساتھ ایک CRUD ایپ بنانا

اس ٹیوٹوریل میں ہم مل کر دیکھتے ہیں کہ Laravel اور Vue.js کے ساتھ مثال کے طور پر CRUD ایپ کا کوڈ کیسے لکھا جائے۔

La سنگل پیج ایپلی کیشن ہمیں DB پر بنیادی کارروائیوں کا ایک چکر مکمل کرنے کی اجازت دے گا: اس کے ساتھ بنائیں، پڑھیں، اپ ڈیٹ کریں اور حذف کریں۔ Vue.js , Vue Routers اور لاریول فریم ورک .

آج کل، سب سے زیادہ مقبول JS فریم ورک Angular JS اور Vue JS ہیں۔ Angular JS اور Vue JS بہت صارف دوست اور سب سے زیادہ مقبول JS فریم ورک ہیں۔ یہ صفحہ کو تازہ کیے بغیر اور طاقتور jquery کی توثیق کے پورے پروجیکٹ یا ایپلیکیشن کا انتظام فراہم کرتا ہے۔

Vue Laravel کے ساتھ پہلے سے پیک کیا جاتا ہے (ساتھ ساتھ لاریول مکس پر مبنی ایک بہترین تصنیف کا آلہ ویب پیک ) اور ڈویلپرز کو ٹرانسپلرز، کوڈ پیکجز، سورس میپس یا جدید فرنٹ اینڈ ڈیولپمنٹ کے دیگر "گندے" پہلوؤں کی فکر کیے بغیر پیچیدہ سنگل پیج ایپلی کیشنز کی تعمیر شروع کرنے کی اجازت دیتا ہے۔

سرور کی ضروریات

پی ایچ پی 7.4،XNUMX

Laravel 8.x

MySQL

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

اس کے بعد، انسٹال کریں قول ,  ویو راؤٹر  e vue-axios . Vue-axios کا استعمال Laravel backend API کو کال کرنے کے لیے کیا جائے گا۔ ٹرمینل پر درج ذیل کمانڈ کو چلائیں:

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

}

?>

اس کے بعد، کھولیں 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

app. vue  یہ ہماری Vue ایپ کی مرکزی فائل ہے۔ Defiہم ختم کریں گے روٹر ویو  اس فائل میں. فائل میں تمام راستے ظاہر ہوں گے۔ app. 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
    }
]

یہاں ہم نے اجزاء استعمال کیے ہیں۔ سست لوڈنگ. وو جے ایس ایک طرح سے اجزاء کی لوڈنگ کا انتظام کرتا ہے۔ 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