макалалар

Laravel жана Vue.js менен CRUD колдонмосун түзүү

Бул окуу куралында биз Laravel жана Vue.js менен CRUD колдонмосунун кодун кантип жазууну чогуу көрөбүз.

La Бир бет колдонмо бизге МБдагы негизги операциялардын циклин бүтүрүүгө мүмкүндүк берет: түзүү, окуу, жаңыртуу жана жок кылуу Vue.js , Vue Routers жана Laravel Framework .

Бүгүнкү күндө эң популярдуу JS алкактары Angular JS жана Vue JS болуп саналат. Angular JS жана Vue JS абдан колдонуучуга ыңгайлуу жана эң популярдуу JS алкактары. Бул баракты жаңыртпастан жана күчтүү jQuery валидациясы жок бүтүндөй долбоорду же тиркемени башкарууну камсыз кылат.

Vue Laravel менен алдын ала таңгакталган (менен бирге Laravel Mix , негизинде эң сонун автордук курал веб-пакет ) жана иштеп чыгуучуларга транспилерлер, код пакеттери, булак карталары же заманбап фронтондук өнүгүүнүн башка "ыплас" аспектилери жөнүндө кабатырланбастан, татаал бир беттик тиркемелерди түзө баштоого мүмкүндүк берет.

Мазмун индекси

Сервердин талаптары

Php 7.4

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 Laravel backend API чалуу үчүн колдонулат. Терминалда төмөнкү буйрукту иштетиңиз:

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

Миграцияны, моделди жана контроллерди түзүү

Категория үлгүсүн, миграцияны жана контроллерди түзүңүз. Ал үчүн төмөнкү буйрукту иштетиңиз:

php artisan make:model Category -mcr

-mcr бул тема бир буйрук синтезин колдонуу менен Модель, Миграция жана Контроллер түзөт.

Эми категорияга көчүрүү файлын ачыңыз маалымат базалары / миграция жана функцияга кодду алмаштырыңыз up() :

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

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

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да компоненттерди жолдор аркылуу керек болгондо гана жүктөй аласыз.

Vue.js көз карандылыктарын app.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

Tags: laravelPHPпрограммалык камсыздоопрограммалык камсыздоопрограммалык камсыздоону иштеп чыгууПрограммалык камсыздооview.js

27-февраль, 2023-жыл, 9:55

кийинки Жаш инноваторлордун глобалдык суу кризисин чечүүгө салым кошуу чакырыгы »

Мурунку « Meta LLaMA моделин ишке киргизди, бул OpenAIдин GPT-3ке караганда күчтүүрөөк изилдөө куралы

акыркы макалалар

Comunicati Калып

Veeam ransomware үчүн коргоодон баштап жооп кайтарууга жана калыбына келтирүүгө чейин эң комплекстүү колдоону камтыйт

Veeam тарабынан Coveware кибер опузалап инциденттерге жооп берүү кызматтарын көрсөтүүнү улантат. Coveware криминалистика жана ремедиация мүмкүнчүлүктөрүн сунуштайт ...

April 23 2024

макалалар

Жашыл жана санариптик революция: алдын ала тейлөө мунай жана газ өнөр жайын кантип өзгөртөт

Болжолдуу тейлөө заводду башкарууга инновациялык жана жигердүү мамиле кылуу менен мунай жана газ секторун революция кылып жатат.…

April 22 2024

макалалар

Улуу Британиянын монополияга каршы жөнгө салуучу органы GenAI боюнча BigTech коңгуроосун көтөрөт

Улуу Британиянын CMA жасалма интеллект рыногунда Big Tech жүрүм-туруму жөнүндө эскертүү берди. Ал жерде…

April 18 2024

Comunicati Калып

Casa Green: Италияда туруктуу келечек үчүн энергетикалык революция

Имараттардын энергетикалык натыйжалуулугун жогорулатуу үчүн Европа Биримдиги тарабынан иштелип чыккан "Case Green" Декрети өзүнүн мыйзам чыгаруу процессин аяктады ...

April 18 2024