Kuunda Programu ya CRUD na Laravel na Vue.js

Katika somo hili tunaona pamoja jinsi ya kuandika msimbo wa mfano wa CRUD App, na Laravel na Vue.js.

La Maombi ya Ukurasa Mmoja itaturuhusu kukamilisha mzunguko wa shughuli za kimsingi kwenye DB: kuunda, kusoma, kusasisha na kufuta kwa kutumia Vue.js , Njia za Vue na Mfumo wa Laravel .

Siku hizi, mifumo maarufu ya JS ni Angular JS na Vue JS. Angular JS na Vue JS ni mifumo rahisi ya watumiaji na maarufu zaidi ya JS. Inatoa usimamizi wa mradi mzima au programu bila kuburudisha ukurasa na uthibitisho wenye nguvu wa jQuery.

Vue huja ikiwa imepakiwa mapema na Laravel (pamoja na Mchanganyiko wa Laravel , chombo bora cha uandishi kulingana na kifurushi cha wavuti ) na huruhusu wasanidi programu kuanza kuunda programu changamano za ukurasa mmoja bila kuwa na wasiwasi kuhusu vibadilishaji faili, vifurushi vya msimbo, ramani chanzo au vipengele vingine "vichafu" vya ukuzaji wa hali ya mbele ya kisasa.

Mahitaji ya seva

PHP 7.4

Laravel 8.x

MySQL

Sakinisha mradi wa Laravel

Kwanza, fungua Terminal na uendeshe amri ifuatayo ili kuunda mradi mpya wa laravel:

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

au, ikiwa umesakinisha Laravel Installer kama utegemezi wa kimataifa wa mtunzi:

laravel new crud-spa

Sanidi maelezo ya hifadhidata:

Baada ya kusakinisha Nenda kwenye saraka ya mizizi ya mradi wako, fungua faili ya .env na uweke maelezo ya hifadhidata kama ifuatavyo:

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

Sakinisha utegemezi wa npm

Tekeleza amri ifuatayo ili kusanikisha utegemezi wa mwisho wa mbele:

npm install

Baada ya hayo, kufunga mtazamo ,  vue-ruta  e vue-axios . Vue-axios itatumika kuita API ya nyuma ya Laravel. Tumia amri ifuatayo kwenye terminal:

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

Unda uhamiaji, mfano na mtawala

Unda kiolezo cha kategoria, uhamishaji na kidhibiti. Tekeleza amri ifuatayo kwa hiyo:

php artisan make:model Category -mcr

-mcr  mada hii itaunda Mfano, Uhamiaji na Kidhibiti kwa kutumia usanisi wa amri moja.

Sasa, fungua kategoria ya uhamiaji faili kutoka hifadhidata / uhamiaji na ubadilishe nambari kwenye kitendakazi juu () :

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

Hamisha hifadhidata kwa kutumia amri ifuatayo:

php artisan migrate

Sasa, fungua kiolezo cha Category.php kutokaapp/Models  na uhariri msimbo katika faili model Jamii.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'];

}

?>

Baada ya hayo, fungua JamiiController.php na uongeze msimbo katika faharasa, hifadhi, sasisha na ufute mbinu kama ifuatavyo:

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

Defimaliza Njia katika web.php

Ora defikuwamaliza routes katika faili web.php e api.php . Nenda kwenye folda routes na ufungue faili ya web.php na api.php na usasishe yafuatayo 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']);

Unda programu ya Vue

Katika hatua hii, nenda kwenye saraka rasilimali/maoni, tengeneza faili app.blade.php  na ongeza nambari ifuatayo kwa 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>

Unda kijenzi cha programu ya Vue

Katika hatua hii, nenda kwenye folda resource/js, tengeneza folda components  na unda faili kama ifuatavyo:

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

programu. vue  ni faili kuu ya programu yetu ya Vue. Defitutamaliza mtazamo wa router  katika faili hilo. Njia zote zitaonekana kwenye faili programu. vue  .

Fungua faili Welcome.vue na usasishe nambari ifuatayo kwenye faili hiyo:

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

Fungua faili ya App.vue na usasishe msimbo kama ifuatavyo:

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

Kisha, fungua resource / js / components / category / List.vue  na ongeza nambari ifuatayo kwenye faili:

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

Baada ya hayo, fungua  resource /js/components/category/Add.vue  na usasishe nambari ifuatayo kwenye faili:

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

Baada ya hayo, fungua  resource /js/components/category/Edit.vue  na usasishe nambari ifuatayo kwenye faili:

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

DefiMaliza njia ya kwenda kwenye programu ya CRUD katika Kipanga njia cha Vue

Sasa, inabidi defikumaliza Vue routes, na kufanya hivyo nenda kwenye folda  resource / js , tengeneza faili route.js  na usasishe nambari ifuatayo kwenye faili:

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

Hapa tumetumia vipengele upakiaji polepole. Angalia JS inasimamia upakiaji wa vipengele kwa njia lazy na njia, kwa hivyo kwenye DOM unaweza kupakia vifaa wakati tu zinahitajika kupitia njia.

Jumuisha vitegemezi vya Vue.js katika app.js

Sasa unahitaji kuongeza njia zote, vue-axios na utegemezi mwingine.

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

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

Endesha seva ya ukuzaji

Fungua terminal na uendesha amri hii:

npm run watch

php artisan serve

Aprili eneo la nyumbani: 8000 katika kivinjari.

BlogInnovazione.it