Članci

Kreiranje CRUD aplikacije sa Laravel i Vue.js

U ovom tutorijalu zajedno vidimo kako napisati kod primjera CRUD aplikacije, sa Laravel i Vue.js.

La Aplikacija za jednu stranicu će nam omogućiti da završimo ciklus osnovnih operacija na DB-u: kreiranje, čitanje, ažuriranje i brisanje pomoću Vue.js , Vue ruteri i Laravel Framework .

Danas su najpopularniji JS okviri Angular JS i Vue JS. Angular JS i Vue JS su vrlo jednostavni i najpopularniji JS okviri. Pruža upravljanje cijelim projektom ili aplikacijom bez osvježavanja stranice i moćne jquery validacije.

Vue dolazi prethodno zapakovano sa Laravel-om (zajedno sa Laravel Mix , odličan autorski alat zasnovan na webpack ) i omogućava programerima da počnu graditi složene aplikacije na jednoj stranici bez brige o transpilerima, paketima koda, izvornim mapama ili drugim „prljavim“ aspektima modernog frontend razvoja.

Zahtevi servera

Php 7.4

Laravel 8.x

MySQL

Instalirajte Laravel projekat

Prvo otvorite Terminal i pokrenite sljedeću naredbu da kreirate novi laravel projekat:

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

ili, ako ste instalirali Laravel Installer kao globalnu zavisnost kompozitora:

laravel new crud-spa

Konfigurirajte detalje baze podataka:

Nakon instalacije Idite u korijenski direktorij vašeg projekta, otvorite .env datoteku i postavite detalje baze podataka na sljedeći način:

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

Instalirajte npm zavisnosti

Pokrenite sljedeću naredbu da instalirate front-end ovisnosti:

npm install

Nakon toga, instalirajte pogled ,  vue-router  e vue-axios . Vue-axios će se koristiti za pozivanje Laravel backend API-ja. Pokrenite sljedeću naredbu na terminalu:

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

Kreirajte migraciju, model i kontroler

Kreirajte predložak kategorije, migraciju i kontroler. Za to pokrenite sljedeću naredbu:

php artisan make:model Category -mcr

-mcr  ova tema će kreirati model, migraciju i kontroler koristeći sintezu jedne naredbe.

Sada otvorite datoteku za migraciju kategorije iz baze podataka / migracija i zamijenite kod u funkciju gore() :

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

Migrirajte bazu podataka koristeći sljedeću naredbu:

php artisan migrate

Sada otvorite predložak Category.php izapp/Models  i uredite kod u datoteci 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'];

}

?>

Nakon toga otvorite CategoryController.php i dodajte kod u indeks, pohranite, ažurirajte i izbrišite metode na sljedeći način:

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

Defizavršite rute u web.php

Ora defizavrši ih routes u fajlovima web.php e api.php . Idi u folder routes i otvorite web.php i api.php fajl i ažurirajte sljedeće routes:

routes/web.php

Inovacijski bilten
Ne propustite najvažnije vijesti o inovacijama. Prijavite se da ih primate putem e-pošte.
<?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']);

Kreirajte Vue aplikaciju

U ovom koraku idite na direktorij resurs/pregledi, kreirajte datoteku app.blade.php  i dodajte sljedeći kod u 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>

Kreirajte komponentu za Vue aplikaciju

U ovom koraku idite na fasciklu resource/js, kreirajte folder components  i kreirajte fajlove na sledeći način:

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

app. vue  to je glavna datoteka naše Vue aplikacije. Defizavršićemo ruter-view  u tom fajlu. Sve staze će se pojaviti u datoteci app. vue  .

Otvorite fajl Welcome.vue i ažurirajte sljedeći kod u toj datoteci:

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

Otvorite datoteku App.vue i ažurirajte kod na sljedeći način:

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

Onda otvori resource / js / components / category / List.vue  i dodajte sljedeći kod u datoteku:

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

Nakon toga otvorite  resource /js/components/category/Add.vue  i ažurirajte sljedeći kod u datoteci:

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

Nakon toga otvorite  resource /js/components/category/Edit.vue  i ažurirajte sljedeći kod u datoteci:


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

DefiZavršite put do CRUD aplikacije u Vue Routeru

Sada moraš defizavršiti Vue routes, i da to uradite idite u fasciklu  resource / js , kreirajte datoteku route.js  i ažurirajte sljedeći kod u datoteci:

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

Ovdje smo koristili komponente sporo učitavanjevue JS upravlja učitavanjem komponenti na neki način lazy sa putanjama, tako da na DOM možete učitavati komponente samo kada su potrebne kroz putanje.

Uključite Vue.js zavisnosti u app.js

Sada morate dodati sve staze, vue-axios i druge zavisnosti.

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

Ažurirajte 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();

Pokrenite razvojni server

Otvorite terminal i pokrenite ovu naredbu:

npm run watch
php artisan serve

Aprila lokalno domaćinstvo: 8000 u pretraživaču.

BlogInnovazione.it

Inovacijski bilten
Ne propustite najvažnije vijesti o inovacijama. Prijavite se da ih primate putem e-pošte.

Nedavni članak

Smart Lock Market: objavljen izvještaj o istraživanju tržišta

Termin Smart Lock Market odnosi se na industriju i ekosistem koji okružuje proizvodnju, distribuciju i upotrebu…

27 Marzo 2024

Šta su obrasci dizajna: zašto ih koristiti, klasifikacija, prednosti i nedostaci

U softverskom inženjerstvu, obrasci dizajna su optimalna rješenja za probleme koji se obično javljaju u dizajnu softvera. Ja sam kao…

26 Marzo 2024

Tehnološka evolucija industrijskog označavanja

Industrijsko označavanje je širok pojam koji obuhvata nekoliko tehnika koje se koriste za stvaranje trajnih tragova na površini…

25 Marzo 2024

Primjeri Excel makroa napisanih pomoću VBA

Sljedeći jednostavni primjeri Excel makroa napisani su korištenjem VBA procijenjenog vremena čitanja: 3 minute Primjer…

25 Marzo 2024