Ho theha CRUD App ka Laravel le Vue.js

Thutong ena re bona hammoho mokhoa oa ho ngola khoutu ea mohlala oa CRUD App, ka Laravel le Vue.js.

La Tšebeliso ea Leqephe le le Leng e tla re lumella ho phethela potoloho ea lits'ebetso tsa mantlha ho DB: theha, bala, ntlafatsa le ho hlakola ka Vue.js , Li-routers tsa Vue le Moralo oa Laravel .

Matsatsing ana, liforeimi tse tsebahalang haholo tsa JS ke Angular JS le Vue JS. Angular JS le Vue JS li bonolo haholo ho basebelisi 'me li ratoa haholo ke liforeimi tsa JS. E fana ka tsamaiso ea morero kapa kopo eohle ntle le ho khatholla leqephe le matla a ho netefatsa jquery.

Vue e tla e phuthetsoe esale pele le Laravel (hammoho le Motsoako oa Laravel , sesebelisoa se setle sa ho ngola se thehiloeng ho webpack ) mme e lumella bahlahisi hore ba qale ho haha ​​​​likopo tse rarahaneng tsa leqephe le le leng ntle le ho tšoenyeha ka li-transpilers, liphutheloana tsa khoutu, limmapa tsa mohloli kapa likarolo tse ling tse "silafetseng" tsa tsoelo-pele ea morao-rao.

Litlhoko tsa seva

Liphp 7.4

Laravel 8.x

MySQL

Kenya morero oa Laravel

Ntlha ea pele, bula Terminal 'me u tsamaise taelo e latelang ho theha morero o mocha oa laravel:

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

kapa, haeba u kentse Laravel Installer e le moqapi oa lefats'e ka bophara:

laravel new crud-spa

Lokisa lintlha tsa database:

Kamora ho kenya E-ea bukeng ea motso oa projeke, bula faele ea .env ebe u beha lintlha tsa database ka tsela e latelang:

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

Kenya li- dependencies tsa npm

Etsa taelo e latelang ho kenya litšepe tse ka pele:

npm install

Ka mor'a moo, kenya pono ,  vue-router  e vue-axios . Vue-axios e tla sebelisoa ho letsetsa Laravel backend API. Etsa taelo e latelang ho terminal:

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

Etsa ho falla, mohlala le molaoli

Theha sebopeho sa sehlopha, phalliso, le molaoli. Etsa taelo e latelang bakeng sa seo:

php artisan make:model Category -mcr

- mcr  sehlooho sena se tla theha Model, Migration le Controller ho sebelisa synthesis ea taelo e le 'ngoe.

Joale, bula faele ea phalliso ea sehlopha ho tloha databases/ phalliso ebe o kenya khoutu sebakeng sa tšebetso holimo() :

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

Tsamaisa database u sebelisa taelo e latelang:

php artisan migrate

Joale, bula Category.php template ho tlohaapp/Models  ebe o edita khoutu faeleng 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'];

}

?>

Ka mor'a moo, bula CategoryController.php 'me u kenye khoutu ho index, boloka, ntlafatsa le ho hlakola mekhoa ka tsela e latelang:

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

Defiqeta Litsela ho web.php

Nako defiba qete routes ka lifaele web.php e api.php . Eya ho sephutheli routes 'me u bule faele ea web.php le api.php ebe u ntlafatsa tse latelang 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']);

Theha sesebelisoa sa Vue

Mohato ona, e-ea ho directory mohlodi/maikutlo, theha faele app.blade.php  ebe o kenya khoutu e latelang ho 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>

Theha karolo bakeng sa app ea Vue

Mohato ona, e-ea ho foldareng resource/js, etsa foldara components  'me u thehe lifaele ka tsela e latelang:

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

app. boe  ke faele ea mantlha ea app ea rona ea Vue. Defire tla qeta pono ea router  faeleng eo. Litsela tsohle li tla hlaha faeleng app. boe  .

Bula faele Welcome.vue 'me u ntlafatse khoutu e latelang faeleng eo:

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

Bula faele ea App.vue 'me u ntlafatse khoutu ka tsela e latelang:

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

Ebe, bula resource / js / components / category / List.vue  ebe o kenya khoutu e latelang faeleng:

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

Ka mor'a moo, bula  resource /js/components/category/Add.vue  'me u ntlafatse khoutu e latelang faeleng:

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

Ka mor'a moo, bula  resource /js/components/category/Edit.vue  'me u ntlafatse khoutu e latelang faeleng:

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

DefiQetella tsela e eang ho sesebelisoa sa CRUD ho Vue Router

Jwale, o tlamehile defiqeta the Vue routes, 'me ho etsa sena e ea foldareng  resource / js , theha faele route.js  'me u ntlafatse khoutu e latelang faeleng:

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

Mona re sebelisitse likaroloana ho kenya butle. Sheba JS e laola phahlo ya dikarolo ka tsela e itseng lazy ka litsela, kahoo ho DOM o ka kenya likarolo feela ha li hlokahala ka litsela.

Kenyelletsa tse itšetlehileng ka Vue.js ho app.js

Hona joale o hloka ho eketsa litsela tsohle, vue-axios le tse ling tse itšetlehileng ka tsona.

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

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

Matha seva ea ntlafatso

Bula terminal 'me u tsamaise taelo ena:

npm run watch

php artisan serve

Mmesa homehost: 8000 sebatli.

BlogInnovazione.it