Стварэнне прыкладання CRUD з Laravel і Vue.js

У гэтым уроку мы разам паглядзім, як напісаць код прыкладу прыкладання CRUD з Laravel і Vue.js.

La Ужыванне адной старонкі дазволіць нам завяршыць цыкл асноўных аперацый з БД: стварэнне, чытанне, абнаўленне і выдаленне з Vue.js , Маршрутызатары Vue і Рамка Laravel .

У наш час самымі папулярнымі фрэймворкамі JS з'яўляюцца Angular JS і Vue JS. Angular JS і Vue JS - вельмі зручныя і самыя папулярныя фрэймворкі JS. Ён забяспечвае кіраванне ўсім праектам або дадаткам без абнаўлення старонкі і магутную праверку jquery.

Vue пастаўляецца ў камплекце з Laravel (разам з Laravel Mix , выдатны аўтарскі інструмент, заснаваны на вэб-пакет ) і дазваляе распрацоўнікам пачаць ствараць складаныя аднастаронкавыя прыкладанні, не клапоцячыся пра транспілеры, пакеты кода, карты зыходных кодаў або іншыя «брудныя» аспекты сучаснай распрацоўкі інтэрфейсу.

Патрабаванні да сервера

Php 7.4 XNUMX XNUMX

Laravel 8.x

MySQL

Усталюйце праект Laravel

Спачатку адкрыйце тэрмінал і выканайце наступную каманду, каб стварыць новы праект Laravel:

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

або, калі вы ўсталявалі Laravel Installer як глабальную залежнасць кампазітара:

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

Пасля гэтага ўсталюйце выгляд ,  vue-маршрутызатар  e vue-axios . Vue-axios будзе выкарыстоўвацца для выкліку бэкэнд-API Laravel. Выканайце наступную каманду на тэрмінале:

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

Defiзавяршыць маршруты ў web.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

прыл  гэта галоўны файл нашага прыкладання Vue. Defiмы скончым выгляд маршрутызатара  у гэтым файле. Усе шляхі з'явяцца ў файле прыл  .

Адкрыйце файл 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>

DefiСкончыце шлях да праграмы CRUD у Vue Router

Цяпер вы павінны 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
    }
]

Тут мы выкарыстоўвалі кампаненты павольная загрузка. vue JS пэўным чынам кіруе загрузкай кампанентаў lazy з шляхамі, таму ў DOM вы можаце загружаць кампаненты толькі тады, калі яны патрэбныя праз шляхі.

Уключыце залежнасці Vue.js у app.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