ການສ້າງແອັບ CRUD ດ້ວຍ Laravel ແລະ Vue.js

ໃນບົດສອນນີ້ພວກເຮົາເຫັນວິທີການຂຽນລະຫັດຂອງ CRUD App ຕົວຢ່າງ, ດ້ວຍ Laravel ແລະ Vue.js.

La ຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ ຈະອະນຸຍາດໃຫ້ພວກເຮົາເຮັດສໍາເລັດວົງຈອນຂອງການດໍາເນີນງານພື້ນຖານກ່ຽວກັບ DB: ສ້າງ, ອ່ານ, ປັບປຸງແລະລຶບດ້ວຍ Vuejs , Vue Routers ແລະ Laravel Framework .

ໃນປັດຈຸບັນ, ກອບ JS ທີ່ນິຍົມຫຼາຍທີ່ສຸດແມ່ນ Angular JS ແລະ Vue JS. Angular JS ແລະ Vue JS ແມ່ນກອບ JS ທີ່ເປັນມິດກັບຜູ້ໃຊ້ຫຼາຍແລະເປັນທີ່ນິຍົມຫຼາຍທີ່ສຸດ. ມັນສະຫນອງການຄຸ້ມຄອງໂຄງການຫຼືຄໍາຮ້ອງສະຫມັກທັງຫມົດໂດຍບໍ່ມີການໂຫຼດຫນ້າຈໍຄືນຫນ້າແລະການກວດສອບ jquery ທີ່ມີປະສິດທິພາບ.

Vue ມາກ່ອນການຫຸ້ມຫໍ່ດ້ວຍ Laravel (ພ້ອມກັບ ປະສົມ Laravel , ເຄື່ອງມືການຂຽນທີ່ດີເລີດໂດຍອີງໃສ່ webpack ) ແລະອະນຸຍາດໃຫ້ນັກພັດທະນາເລີ່ມຕົ້ນສ້າງຄໍາຮ້ອງສະຫມັກຫນ້າດຽວທີ່ສັບສົນໂດຍບໍ່ມີການກັງວົນກ່ຽວກັບ transpilers, ຊຸດລະຫັດ, ແຜນທີ່ແຫຼ່ງຫຼືລັກສະນະ "ເປື້ອນ" ອື່ນໆຂອງການພັດທະນາຫນ້າທີ່ທັນສະໄຫມ.

ຄວາມຕ້ອງການເຊີບເວີ

Ph 7.4 ນ

Laravel 8.x

MySQL

ຕິດຕັ້ງໂຄງການ Laravel

ທໍາອິດ, ເປີດ Terminal ແລະດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ເພື່ອສ້າງໂຄງການ laravel ໃຫມ່:

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

ຫຼື, ຖ້າເຈົ້າຕິດຕັ້ງ Laravel Installer ເປັນການອ້າງອີງທົ່ວໂລກຂອງ composer:

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-router  e vue-axios . Vue-axios ຈະຖືກໃຊ້ເພື່ອໂທຫາ Laravel backend API. ດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ຢູ່ໃນ terminal:

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

ສ້າງການເຄື່ອນຍ້າຍ, ຕົວແບບແລະຕົວຄວບຄຸມ

ສ້າງແມ່ແບບປະເພດ, ການເຄື່ອນຍ້າຍ, ແລະຕົວຄວບຄຸມ. ດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ສໍາລັບການນັ້ນ:

php artisan make:model Category -mcr

-mcr  ຫົວຂໍ້ນີ້ຈະສ້າງ Model, Migration ແລະ Controller ໂດຍໃຊ້ການສັງເຄາະຄໍາສັ່ງດຽວ.

ໃນປັດຈຸບັນ, ເປີດໄຟລ໌ການເຄື່ອນຍ້າຍປະເພດຈາກ ຖານຂໍ້ມູນ / ການເຄື່ອນຍ້າຍ ແລະປ່ຽນລະຫັດເຂົ້າໃນຫນ້າທີ່ ຂຶ້ນ() :

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 ໝວດໝູ່.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

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

ໃນຂັ້ນຕອນນີ້, ໄປທີ່ໂຟນເດີ resource/js, ສ້າງໂຟນເດີ components  ແລະ​ສ້າງ​ໄຟລ​໌​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

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

app. vue  ມັນແມ່ນໄຟລ໌ຕົ້ນຕໍຂອງແອັບ Vue ຂອງພວກເຮົາ. Defiພວກເຮົາຈະສິ້ນສຸດ router-view  ໃນໄຟລ໌ນັ້ນ. ເສັ້ນທາງທັງໝົດຈະປາກົດຢູ່ໃນໄຟລ໌ app. vue  .

ເປີດໄຟລ໌ 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();

ດໍາເນີນການເຄື່ອງແມ່ຂ່າຍການພັດທະນາ

ເປີດ terminal ແລະດໍາເນີນການຄໍາສັ່ງນີ້:

npm run watch

php artisan serve

ເດືອນເມສາ ທ້ອງຖິ່ນ: 8000 ໃນ browser.

BlogInnovazione.it