Артиколи

Laravel және Vue.js көмегімен CRUD қолданбасын жасау

Бұл оқулықта біз Laravel және Vue.js көмегімен CRUD қолданбасы мысалының кодын қалай жазу керектігін бірге көреміз.

La Бір бет қосымшасы бізге ДҚ-дағы негізгі операциялар циклін аяқтауға мүмкіндік береді: көмегімен жасау, оқу, жаңарту және жою Vue.js , Vue маршрутизаторлары және Laravel Framework .

Қазіргі уақытта ең танымал JS фреймворктері Angular JS және Vue JS болып табылады. Angular JS және Vue JS өте ыңғайлы және ең танымал JS фреймворктері. Ол бүкіл жобаны немесе қолданбаны бетті жаңартусыз және күшті jQuery тексеруінсіз басқаруды қамтамасыз етеді.

Vue Ларавелмен алдын ала оралған ( Ларавел Микс , негізіндегі тамаша авторлық құрал веб-пакет ) және әзірлеушілерге транспилерлер, код пакеттері, бастапқы карталар немесе қазіргі заманғы интерфейсті әзірлеудің басқа «лас» аспектілері туралы алаңдамай, күрделі бір беттік қолданбаларды құруды бастауға мүмкіндік береді.

Серверге қойылатын талаптар

Php 7.4

Ларавел 8.х

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 Laravel серверлік API интерфейсін шақыру үшін пайдаланылады. Терминалда келесі пәрменді іске қосыңыз:

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

Тасымалдауды, үлгіні және контроллерді жасаңыз

Санат үлгісін, тасымалдауды және контроллерді жасаңыз. Ол үшін келесі пәрменді іске қосыңыз:

php artisan make:model Category -mcr

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

Defiweb.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 қолданбасы үшін құрамдас жасаңыз

Бұл қадамда қалтаға өтіңіз resource/js, қалтаны жасаңыз components  және файлдарды келесідей жасаңыз:

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

vue қолданбасы  бұл біздің Vue қолданбасының негізгі файлы. Defiаяқтаймыз маршрутизатор көрінісі  сол файлда. Барлық жолдар файлда пайда болады 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>

DefiVue Router ішіндегі CRUD қолданбасына жолды аяқтаңыз

Енді керек 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 жүйесінде құрамдастарды жолдар арқылы қажет болғанда ғана жүктей аласыз.

app.js ішіне Vue.js тәуелділіктерін қосыңыз

Енді барлық жолдарды, vue-аксиоларды және басқа тәуелділіктерді қосу керек.

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

Инновациялық ақпараттық бюллетень
Инновация туралы ең маңызды жаңалықтарды жіберіп алмаңыз. Оларды электрондық пошта арқылы алу үшін тіркеліңіз.

Соңғы мақалалар

Smart Lock Market: нарықты зерттеу есебі жарияланды

Smart Lock Market термині өндірісті, таратуды және пайдалануды қоршаған өнеркәсіп пен экожүйені білдіреді ...

27 Marzo 2024

Дизайн үлгілері дегеніміз не: оларды не үшін пайдалану, жіктеу, оң және теріс жақтары

Бағдарламалық жасақтама инженериясында дизайн үлгілері бағдарламалық жасақтаманы жобалауда жиі кездесетін мәселелердің оңтайлы шешімі болып табылады. мен сияқтымын…

26 Marzo 2024

Өнеркәсіптік таңбалаудың технологиялық эволюциясы

Өнеркәсіптік таңбалау - бұл бетінде тұрақты белгілерді жасау үшін қолданылатын бірнеше әдістерді қамтитын кең термин ...

25 Marzo 2024

VBA көмегімен жазылған Excel макростарының мысалдары

Келесі қарапайым Excel макрос мысалдары VBA Estimated оқу уақыты арқылы жазылған: 3 минут Мысал…

25 Marzo 2024

Инновацияны өз тіліңізде оқыңыз

Инновациялық ақпараттық бюллетень
Инновация туралы ең маңызды жаңалықтарды жіберіп алмаңыз. Оларды электрондық пошта арқылы алу үшін тіркеліңіз.

Артымыздан