Nyiptakeun Aplikasi CRUD sareng Laravel sareng Vue.js

Dina tutorial ieu urang tingali babarengan cara nulis kode hiji conto CRUD App, kalawan Laravel na Vue.js.

La Aplikasi Halaman Tunggal bakal ngidinan urang pikeun ngalengkepan hiji siklus operasi dasar dina DB: nyieun, maca, ngamutahirkeun tur mupus kalawan Vue.js , Vue Routers jeung Kerangka Laravel .

Kiwari, kerangka JS anu pang populerna nyaéta Angular JS sareng Vue JS. Angular JS sareng Vue JS mangrupikeun kerangka JS anu ramah-pamaké sareng paling populér. Eta nyadiakeun manajemén sakabéh proyék atawa aplikasi tanpa refreshing kaca jeung validasi jquery kuat.

Vue parantos dibungkus sareng Laravel (sareng sareng Laravel Campur , alat authoring unggulan dumasar kana tas ransel ) sareng ngamungkinkeun para pamekar ngamimitian ngawangun aplikasi halaman tunggal anu kompleks tanpa hariwang ngeunaan transpilers, bungkusan kode, peta sumber atanapi aspék "kotor" sanés pikeun pangwangunan frontend modern.

syarat server

Php 7.4

Laravel 8.x

MySQL

Pasang proyék Laravel

Mimiti, buka Terminal sareng jalankeun paréntah di handap ieu pikeun nyiptakeun proyék laravel énggal:

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

atanapi, upami anjeun masang Laravel Installer salaku kagumantungan global komposer:

laravel new crud-spa

Konpigurasikeun rinci database:

Saatos instalasi Pindah ka diréktori akar proyék anjeun, buka file .env sareng setel detil database sapertos kieu:

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

Pasang dependensi npm

Jalankeun paréntah di handap ieu pikeun masang dependensi hareup-tungtung:

npm install

Sanggeus éta, install vue ,  vue-router  e vue-aksios . Vue-axios bakal dipaké pikeun nelepon Laravel backend API. Jalankeun paréntah di handap ieu dina terminal:

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

Jieun migrasi, modél jeung controller

Jieun template kategori, migrasi, jeung controller. Jalankeun paréntah di handap ieu pikeun éta:

php artisan make:model Category -mcr

-mcr  topik ieu bakal nyieun Modél, Migrasi jeung Controller ngagunakeun sintésis paréntah tunggal.

Ayeuna, buka kategori file migrasi ti database / migrasi tur ngaganti kode kana fungsi ka luhur () :

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

Migrasi pangkalan data nganggo paréntah di handap ieu:

php artisan migrate

Ayeuna, buka Category.php template tiapp/Models  tur edit kodeu dina file 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'];

}

?>

Sanggeus éta, buka CategoryController.php sareng tambahkeun kodeu dina indéks, nyimpen, ngapdet sareng ngahapus metode sapertos kieu:

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

Defirengse Rute di web.php

Ora defirengse aranjeunna routes dina file wéb.php e api.php . Pindah ka folder routes sareng buka file web.php sareng api.php sareng ngapdet di handap ieu 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']);

Jieun aplikasi Vue

Dina hambalan ieu, buka diréktori sumberdaya / pintonan, jieun file app.blade.php  tur nambahkeun kodeu handap pikeun 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>

Jieun komponén pikeun aplikasi Vue

Dina hambalan ieu, buka polder resource/js, jieun polder components  sareng jieun file sapertos kieu:

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

aplikasi. vue  Éta mangrupikeun file utama aplikasi Vue kami. Defiurang bakal rengse router-view  dina éta file. Sadaya jalur bakal muncul dina file aplikasi. vue  .

Buka file Welcome.vue sareng ngapdet kodeu ieu dina file éta:

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

Buka file App.vue sareng ngapdet kodeu sapertos kieu:

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

Lajeng, buka resource / js / components / category / List.vue  sareng tambahkeun kodeu ieu dina file:

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

Sanggeus éta, buka  resource /js/components/category/Add.vue  sareng ngapdet kodeu ieu dina file:

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

Sanggeus éta, buka  resource /js/components/category/Edit.vue  sareng ngapdet kodeu ieu dina file:

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

DefiRengse jalan ka aplikasi CRUD di Vue Router

Ayeuna, anjeun kudu defirengse nu Vue routes, sarta pikeun ngalakukeun ieu buka polder  resource / js , jieun file route.js  sareng ngapdet kodeu ieu dina file:

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

Di dieu kami geus dipaké komponén loading slow. euy JS ngatur loading komponén dina cara lazy kalawan jalur, ku kituna dina DOM anjeun tiasa ngamuat komponén ukur nalika aranjeunna diperlukeun ngaliwatan jalur.

Asupkeun kagumantungan Vue.js dina app.js

Ayeuna anjeun kedah nambihan sadaya jalur, vue-axios sareng kagumantungan anu sanés.

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

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

Ngajalankeun server ngembangkeun

Buka terminal sareng jalankeun paréntah ieu:

npm run watch

php artisan serve

April localhost: 8000 dina browser.

BlogInnovazione.it