Ṣiṣẹda ohun elo CRUD pẹlu Laravel ati Vue.js

Ninu ikẹkọ yii a rii papọ bi a ṣe le kọ koodu apẹẹrẹ CRUD App, pẹlu Laravel ati Vue.js.

La Ohun elo Oju-iwe Kanṣoṣo yoo gba wa laaye lati pari kan ọmọ ti ipilẹ mosi lori DB: ṣẹda, ka, mu ati ki o parẹ pẹlu Vue.js , Vue olulana ati Laravel Framework .

Ni ode oni, awọn ilana JS olokiki julọ jẹ Angular JS ati Vue JS. JS angula ati Vue JS jẹ ore-olumulo pupọ ati awọn ilana JS olokiki julọ. O pese isakoso ti gbogbo ise agbese tabi ohun elo lai onitura oju-iwe ati awọn alagbara jquery afọwọsi.

Vue wa ni iṣaju iṣaju pẹlu Laravel (pẹlu pẹlu Laravel Mix , Ohun elo onkọwe ti o dara julọ ti o da lori apo wẹẹbu ) ati gba awọn olupilẹṣẹ laaye lati bẹrẹ kikọ awọn ohun elo oju-iwe kan ti o nipọn laisi aibalẹ nipa awọn itọpa, awọn idii koodu, awọn maapu orisun tabi awọn aaye “idọti” miiran ti idagbasoke iwaju iwaju ode oni.

Server ibeere

Php 7.4

Laravel 8.x

MySQL

Fi sori ẹrọ ise agbese Laravel

Ni akọkọ, ṣii Terminal ati ṣiṣe aṣẹ atẹle lati ṣẹda iṣẹ akanṣe laravel tuntun kan:

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

tabi, ti o ba fi sori ẹrọ Laravel insitola bi igbẹkẹle agbaye olupilẹṣẹ:

laravel new crud-spa

Ṣe atunto awọn alaye ibi ipamọ data:

Lẹhin fifi sori ẹrọ Lọ si ilana ilana gbongbo ise agbese rẹ, ṣii faili .env ki o ṣeto awọn alaye data bi atẹle:

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

Fi awọn igbẹkẹle npm sori ẹrọ

Ṣiṣe aṣẹ atẹle lati fi sori ẹrọ awọn igbẹkẹle-ipari iwaju:

npm install

Lẹhin iyẹn, fi sori ẹrọ wiwo ,  vue-olulana  e vue-axios . Vue-axios yoo ṣee lo lati pe Laravel backend API. Ṣiṣe aṣẹ wọnyi lori ebute naa:

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

Ṣẹda ijira, awoṣe ati oludari

Ṣẹda awoṣe ẹka, ijira, ati oludari. Ṣiṣe aṣẹ atẹle fun iyẹn:

php artisan make:model Category -mcr

-mcr  koko yii yoo ṣẹda Awoṣe, Iṣilọ ati Alakoso nipa lilo iṣelọpọ aṣẹ kanṣoṣo.

Bayi, ṣii faili ijira ẹka lati infomesonu / ijira ki o si ropo koodu sinu iṣẹ soke() :

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

Gbe ibi ipamọ data lọ ni lilo aṣẹ atẹle:

php artisan migrate

Bayi, ṣii awoṣe Category.php latiapp/Models  ati ṣatunkọ koodu inu faili naa model Ẹka.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'];

}

?>

Lẹhin iyẹn, ṣii CategoryController.php ati ṣafikun koodu ni atọka, tọju, imudojuiwọn ati paarẹ awọn ọna bii atẹle:

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

Defipari Awọn ipa ọna ni web.php

Ora defipari wọn routes ninu awọn faili ayelujara.php e àpi.php . Lọ si folda routes ati ṣii web.php ati faili api.php ki o ṣe imudojuiwọn atẹle naa 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']);

Ṣẹda ohun elo Vue kan

Ni ipele yii, lọ si itọsọna naa awọn oluşewadi / wiwo, ṣẹda faili naa app.blade.php  ki o si fi awọn wọnyi koodu to 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>

Ṣẹda paati fun Vue app

Ni ipele yii, lọ si folda naa resource/js, ṣẹda folda components  ati ṣẹda awọn faili bi atẹle:

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

app vue  o jẹ akọkọ faili ti wa Vue app. Defiao pari olulana-view  ninu faili yẹn. Gbogbo awọn ọna yoo han ninu faili naa app vue  .

Ṣii faili naa Welcome.vue ati imudojuiwọn koodu atẹle ninu faili yẹn:

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

Ṣii faili App.vue ki o ṣe imudojuiwọn koodu naa gẹgẹbi atẹle:

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

Lẹhinna, ṣii resource / js / components / category / List.vue  ki o si fi koodu atẹle sinu faili naa:

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

Lẹhin iyẹn, ṣii  resource /js/components/category/Add.vue  ati imudojuiwọn koodu atẹle ninu faili naa:

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

Lẹhin iyẹn, ṣii  resource /js/components/category/Edit.vue  ati imudojuiwọn koodu atẹle ninu faili naa:

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

DefiPari ọna si ohun elo CRUD ni Vue Router

Bayi, o ni lati defipari awọn Vue routes, ati lati ṣe eyi lọ si folda  resource / js , ṣẹda faili naa route.js  ati imudojuiwọn koodu atẹle ninu faili naa:

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

Nibi ti a ti lo irinše o lọra ikojọpọ. Wo JS n ṣakoso ikojọpọ awọn paati ni ọna kan lazy pẹlu awọn ọna, nitorinaa lori DOM o le gbe awọn paati nikan nigbati wọn nilo nipasẹ awọn ọna.

Fi awọn igbẹkẹle Vue.js sinu app.js

Bayi o nilo lati ṣafikun gbogbo awọn ọna, vue-axios ati awọn igbẹkẹle miiran.

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

Ṣe imudojuiwọn 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();

Ṣiṣe awọn olupin idagbasoke

Ṣii ebute ki o ṣiṣẹ aṣẹ yii:

npm run watch

php artisan serve

Oṣu Kẹrin ogun agbele: 8000 ninu ẹrọ aṣawakiri.

BlogInnovazione.it