Crud App ب laravel & vuejs الجزء الأول


فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نزيدو معلومات فقاعدة البيانات بإستعمال laravel & vuejs فهنا غادي نديرو une application لي كتدير la gestion d'un stock de livres المستخدم كيزيد كتب جديدة يمكنلو يعدلها أو يمسحها.

نظرة سريعة بالفيديو

1- تحميل المشروع


أول شيء غادي تديرو هو تثبيت composer لي غادي يمكنك من تثبيت laravel يمكنلك  تحملو من الموقع الرسمي من هنا من بعد غادي تفتح cmd غادي نكتب الأمر:

cd c:\xampp\htdocs يلا كنتي خدام ب xampp
كنتي خدام ب wamp غادي نكتب الأمر:
cd c:\wamp\www من بعد غادي تديرالأمر
composer create-project --prefer-dist laravel/laravel bookstore
الإسم ديال المشروع هو bookstore من بعد ما يتزاد المجلد ف wamp/www أو xampp/htdocs منبعد غادي  نكتب الأمر: 
cd c:\xampp\htdocs\bookstore  
كنتي خدام ب wamp غادي نكتب الأمر:
cd c:\wamp\www\bookstore 
 من بعد غادي تديرالأمر:
php artisan make:model Book -m
باش نزيدو la table ديالنا لي غادي تكون سميتها books منبعد غادي تمشي للمجلد database->migrations تما غادي تلقى ل migration تزادت كتبدا ب create_books غادي تزيد فيها الكود باش نزيدو la table ديالنا:

                                <?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->string('author');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}

                            

2- إنشاء قاعدة البيانات

فهنا غادي نخدمو ب sqlite عوض mysql غادي نمشي للملف env. وغادي نديرو تغييرات على الكود باش نغير type de connexion  منبعد غادي  نكتب الأمر: 
cd c:\xampp\htdocs\bookstore  
كنتي خدام ب wamp غادي نكتب الأمر:
cd c:\wamp\www\bookstore 
 من بعد غادي تديرالأمر:
php artisan migrate
لي غادي تمكنا باش نزيدو la table ديالنا فقاعدة البيانات منبعد ما تزاد غادي نمشي للمجلد database غادي نلقى ملف جديد تزاد سميتو database.sqlite مغاديش يمكنا نقراو les données لي فيه حيت cryptés فالتغييرات لي غادي تزيد على env. هو: 

                                APP_NAME=bookstore
APP_ENV=local
APP_KEY=base64:JZf1npgRl2pzbJlFLAYkc5O9oqhvtDaFFeGLZLfG6xU=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost

DB_CONNECTION=sqlite



BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=

                            

3- الملف Book.php

من بعد ف app كاين ل model Book.php ولي عبارة عن model فيه الكود لي كيعطي الأمر للlaravel باش يخلينا نعمرو المعلومات الخاصة بالكتاب الكود ديال الملف هو :

                                <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    //
    protected $fillable = [
        'title', 'description', 'author',
    ];
}
                            

4- الملف Book.vue

من بعد فالمجلد resources/assets/js/components تما كنزيد les fichiers vuejs ديالي ففل version 5.4 ديال laravel كاينة vuejs intégré par défaut كنزيد ملف جديد كنسميه Book.vue فيه كاين الفورم لي كنحدد ملي يديرلها المستخدم submit كنمنعها ب directive v-on:submit.prevent باش كنتحقق واش عندي ل edit ولا ل ajout  من بعد عندي input text لي كنخدم بل
v-model  باش كنربطهم ب les valeurs لي كايجيوني من l'objet book لي عندي ف l'objet data ولي غادي يكون فيه المعلومات الخاصة بكل كتاب منبعد كنخدم ب v-for لي بحالها بحال foreach ف php باش كنعرض les livres ديالي ف liste وعندي الروابط لي ملي كنكليكي عليهم كندير ل modification وsuppression ولي كياخدو ل id ديال كل كتاب منبعد فل la partie js عندي instantiation  ديال ل objet من la classe Vue من بعد ف data كنديكلاري les variables لي عندي كاين جدول غادي يكونوا فيه les livres سميتو list ول objet book لي déja هدرنا عليه  منبعد كاين fonction mounted لي كنعيط فيها ل fonction getBooks لي كترجعنا الكتب لي عندنا منبعد كاين l'objet methods عندي فيه les fonctions لي غادي نحتاج كاين getBooks لي هضرنا عليها كتسترجع الكتب وكتزيدهم ف list وهنا خدمنا ب axios لي كيمكنا باش نديرو http requests باش تزيدو من هنا  منبعد كاين createBook لي كتزيد كتاب جديد دائما باستعمال axios كنرسل المعلومات لي عندي فل objet book منبعد مكيتزادو كنخوي l'objet book باش الفورم كتخوا منبعد كاين viewBook لي كتمكنا من استرجاع كتاب بل id ديالو وكنزيدو فل objet book وكنعطي ل edit true يعني راه غادي تكون modification من بعد كاين updateBook  لي كتمكن من تعديل كتاب من بعد كاين deleteBook لي كتمسح كتاب وكتعاود تعرض الكتب من جديد وبالنسبة للروابط لي عندنا فالكود غادي يكونوا ف les routes لي غادي نزيدهم من بعد الكود ديال الملف هو :

                                    <template>
    <div>
        <h1 class="text-primary">Ajouter un livre</h1>
        <hr>
        <form action="#" @submit.prevent="edit ? updateBook(book.id) : createBook()">
            <div class="form-group">
                <label for="author">Auteur*</label>
                <input type="text" class="form-control" name="author" v-model="book.author">
            </div>
            <div class="form-group">
                <label for="title">Titre*</label>
                <input type="text" class="form-control" name="title" v-model="book.title">
            </div>
            <div class="form-group">
                <label for="title">Titre*</label>
                <textarea cols="30" rows="5" class="form-control" name="description" v-model="book.description"></textarea>
            </div>
            <div class="form-group">
               <button type="submit" v-show="!edit" class="btn btn-success">Ajouter</button>
               <button type="submit" v-show="edit" class="btn btn-warning">Modifier</button>
            </div>
        </form>
        <h3 class="text-danger">Liste des livres</h3>
        <ul class="list-group">
            <li class="list-group-item" v-for="book in list" v-bind:key="book.id">
                <span class="text-primary">{{book.title}}</span> <span class="text-danger">Par: {{book.author}}</span>
                <button @click="viewBook(book.id)" class="btn btn-warning btn-xs">Modifier</button>
                <button @click="deleteBook(book.id)" class="btn btn-danger btn-xs">Supprimer</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data : function(){
            return {
                edit : false,
                list : [],
                book : {
                    id: '',
                    title: '',
                    description : '',
                    author : ''
                }
            }
        },
        mounted: function(){
            console.log('Component mounted.');
            this.getBooks();
        },
        methods : {
            getBooks: function(){
                console.log("getting books");
                axios.get('api/books').then((response)=>{
                    console.log(response.data);
                    this.list = response.data;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            createBook: function(){
                console.log("creating a book");
                var params = Object.assign({},this.book);
                axios.post('api/books/store',params)
                .then(()=>{
                    this.book.title = '';
                    this.book.description = '';
                    this.book.author = '';
                    this.edit = false;
                    this.getBooks();
                }).catch((error)=>{
                    console.log(error);
                });
            },
            viewBook:function(id){
                axios.get('api/books/'+id).then((response)=>{
                    this.book.id = response.data.id;
                    this.book.title = response.data.title;
                    this.book.description = response.data.description;
                    this.book.author = response.data.author;
                });
                this.edit = true;
            },
            updateBook:function(id){
                console.log("update book" + id);
                var params = Object.assign({},this.book);
                axios.patch('api/books/'+id,params)
                .then((response)=>{
                    this.book.title = '';
                    this.book.description = '';
                    this.book.author = '';
                    this.edit = false;
                    this.getBooks();
                }).catch((error)=>{
                    console.log(error);
                });
            },
            deleteBook:function(id){
                console.log("delete book" + id);
                axios.delete('api/books/'+id)
                .then((response)=>{
                    this.getBooks();
                }).catch((error)=>{
                    console.log(error);
                });
            }
        }
    }
</script>

                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد