Ukwenza i-CRUD App kunye neLaravel kunye neVue.js

Kule tutorial sibona kunye indlela yokubhala ikhowudi yomzekelo weCRUD App, kunye neLaravel kunye neVue.js.

La Isicelo sephepha elinye iya kusivumela ukuba sigqibezele umjikelo wemisebenzi esisiseko kwi-DB: dala, funda, uhlaziye kwaye ucime nge Vue.js , IiRouter zeVue kunye Isakhelo seLaravel .

Kule mihla, ezona zikhokelo ze-JS zithandwa kakhulu yi-Angular JS kunye ne-Vue JS. I-Angular JS kunye ne-Vue JS zisebenziseka kakhulu kwaye zithandwa kakhulu izikhokelo ze-JS. Inika ulawulo lweprojekthi yonke okanye isicelo ngaphandle kokuhlaziya iphepha kunye nokuqinisekiswa okunamandla kwe-jquery.

I-Vue iza ipakishwe kwangaphambili kunye neLaravel (kunye ne Umxube weLaravel , isixhobo esibalaseleyo sogunyaziso esekwe kwi umqulu wewebhu ) kwaye ivumela abaphuhlisi ukuba baqale ukwakha izicelo ezintsonkothileyo zephepha elinye ngaphandle kokukhathazeka malunga nabaguquleli, iipakethi zekhowudi, iimephu zomthombo okanye ezinye izinto "ezimdaka" zophuhliso lwangoku lwangoku.

Iimfuno zeseva

I-Php 7.4

ILaravel 8.x

MySQL

Faka iprojekthi yeLaravel

Okokuqala, vula iTheminali kwaye usebenzise lo myalelo ulandelayo ukwenza iprojekthi entsha yelaravel:

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

okanye, ukuba ufake iLaravel Installer njengomqambi oxhomekeke kwihlabathi:

laravel new crud-spa

Qwalasela iinkcukacha zedatha:

Emva kokufakela Yiya kuluhlu lweengcambu zeprojekthi yakho, vula ifayile ye-.env kwaye usete iinkcukacha zedatha ngolu hlobo lulandelayo:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

Faka ukuxhomekeka kwe-npm

Qhuba lo myalelo ulandelayo ukufakela ukuxhomekeka kwisiphelo sangaphambili:

npm install

Emva koko, faka umbono ,  vue-router  e vue-axios . I-Vue-axios iya kusetyenziselwa ukubiza i-Laravel backend API. Yenza lo myalelo ulandelayo kwi-terminal:

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

Yenza ukufuduka, imodeli kunye nomlawuli

Yenza itemplate yodidi, ukufuduka, kunye nomlawuli. Yenza lo myalelo ulandelayo ukuze:

php artisan make:model Category -mcr

-mcr  Esi sihloko sizakwenza uMzekelo, ukuFudukela kunye noMlawuli usebenzisa udibaniso lomyalelo omnye.

Ngoku, vula ifayile yokufuduka yodidi ukusuka ugcino lweenkcukacha / imfuduko kwaye ubuyisele ikhowudi kumsebenzi phezulu() :

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

Hambisa isiseko sedatha usebenzisa lo myalelo ulandelayo:

php artisan migrate

Ngoku, vula itemplate yeCategory.php ukusukaapp/Models  kwaye uhlele ikhowudi kwifayile model Udidi.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'];

}

?>

Emva koko, vula CategoryController.php kwaye wongeze ikhowudi kwisalathiso, gcina, uhlaziye kwaye ucime iindlela ngolu hlobo lulandelayo:

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

Defigqiba IiNdlela kwi-web.php

Ora defibagqibezele routes kwiifayile web.php e api.php . Yiya kwisiqulathi seefayili routes kwaye uvule ifayile yewebhu.php kunye ne-api.php kwaye uhlaziye oku kulandelayo 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']);

Yenza i-app ye-Vue

Kweli nyathelo, yiya kuluhlu imithombo/iimbono, yenza ifayile app.blade.php  kwaye wongeze le khowudi ilandelayo ku 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>

Yenza icandelo le-Vue app

Kweli nyathelo, yiya kwifolda resource/js, yenza isiqulathi seefayili components  kwaye wenze iifayile ngolu hlobo lulandelayo:

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

usetyenziso  yeyona fayile iphambili yeVue app yethu. Defisogqiba i-router-view  kuloo fayile. Zonke iindlela ziya kuvela kwifayile usetyenziso  .

Vula ifayile Welcome.vue kwaye uhlaziye ikhowudi elandelayo kuloo fayile:

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

Vula ifayile ye-App.vue kwaye uhlaziye ikhowudi ngolu hlobo lulandelayo:

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

Emva koko, vula resource / js / components / category / List.vue  kwaye wongeze le khowudi ilandelayo kwifayile:

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

Emva koko, vula  resource /js/components/category/Add.vue  kwaye uhlaziye le khowudi ilandelayo kwifayile:

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

Emva koko, vula  resource /js/components/category/Edit.vue  kwaye uhlaziye le khowudi ilandelayo kwifayile:

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

DefiGqibezela indlela eya kwi-CRUD app kwi-Vue Router

Ngoku, kufuneka defigqibezela i Vue routes, kwaye ukwenza oku yiya kwincwadi eneenkcukacha  resource / js , yenza ifayile route.js  kwaye uhlaziye le khowudi ilandelayo kwifayile:

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

Apha sisebenzise amacandelo ukulayisha okucothayo. Jonga iJS ilawula ukulayishwa kwamalungu ngendlela lazy ngeendledlana, ngoko ke kwiDOM ungalayisha amacandelo kuphela xa afuneka ngomendo.

Bandakanya ukuxhomekeka kwe-Vue.js kwi-app.js

Ngoku kufuneka udibanise zonke iindlela, i-vue-axios kunye nezinye izinto ezixhomekeke kuyo.

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),
});

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

Qhuba umncedisi wophuhliso

Vula i-terminal kwaye usebenzise lo myalelo:

npm run watch

php artisan serve

UTshazimpuzi indawo yendawo: 8000 kwisikhangeli.

BlogInnovazione.it