Blog ب laravel & vue js الجزء الرابع


فهاد الجزء الرابع من blog ب laravel & vuejs غادي نزيدو القائمة الرئيسية ديالنا لي غادي تمكنا من التنقل بين الصفحات وأيضا غادي نزيدو الصفحة الرئيسية لي غادي يتعرضوا فيها les posts كاملين.
 

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

1- إضافة القائمة الرئيسية

قبل ما نزيدو ل Menu غادي نزيدو des packages لي غادي نحتاجوا ف cmd دير هاد ل commande :

npm install vue-router laravel-vue-pagination

زدنا router وزدنا ل pagination لي غادي نحتاجوا من بعد دائما ف dossier js غادي نزيدوا component جديد نسميوه Navbar.vue لي فيه غادي نزيد ل Menu هنا خدمنا ب bootstrap.

ف data object كنحدد les routes ديالي وأيضا كنتحقق واش المستخدم  connecté بل fonction isLogged لي زدنا فل class User وأيضا كنسترجع إسم المستخدم يلا كان متوفر ف localStorage.

أيضا عندي ل méthode userlogout لي كت déconnecter المستخدم وتدير تحديث للمتصفح.

فل Menu كنزيد الروابط لي كيديو للصفحات لي عندي وكنتحقق يلا كان المستخدم connecté كنعرض الإسم و رابط الخروج مكانش كنعرض روابط التسجيل وتسجيل الدخول.

الكود ديال الملف هو :



                                //
<template>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <router-link class="navbar-brand" :to="home">Blog</router-link>
            <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                aria-expanded="false" aria-label="Toggle navigation">
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <router-link class="nav-link" :to="home">Accueil</router-link>
                </li>
                <li class="nav-item">
                  <router-link class="nav-link" :to="signup" v-if="!logged">Inscription</router-link>
                </li>
                <li class="nav-item">
                  <router-link class="nav-link" :to="login" v-if="!logged">Connexion</router-link>
                </li>
                <li class="nav-item">
                    <a class="nav-link" @click="userlogout" style="cursor:pointer" v-if="logged">
                        <span class="font-weight-bold">{{name.toUpperCase()}}</span> Déconnexion
                    </a>
                </li>
              </ul>
            </div>
        </nav>
    </div>
</template>

<script>
export default {
    data(){
        return{
            home : '/',
            login : '/login',
            signup : '/signup',
            logout : '/logout',
            logged : User.isLogged().logged,
            name : User.isLogged().name
        }
    },
    methods: {
        userlogout(){
            User.logout();
            this.logged = false;
            this.$router.go();
        }
    },
}
</script>
                            

2- إضافة ل component الرئيسي

دائما ف dossier js غادي نزيدوا component جديد نسميوه AppHome.vue لي فيه غادي نسترجع ل Menu لي زدنا وأيضا غادي نخدم ب router view باش نعرض ال component لي كيوافق كل رابط مشيتلو فهاد ل component الرئيسي.

الكود ديال الملف هو :

                                //
<template>
    <div>
        <Navbar/>
        <router-view></router-view>
    </div>
</template>


<script>
    import Navbar from './Navbar.vue';

    export default {
        components: {
            Navbar
        }
    }
</script>
                            

3- إضافة ل component Categories

دائما ف dossier js زيد dossier سميه components فيه غادي نزيدوا component جديد نسميوه Categories.vue لي فيه غادي نسترجع les catégories ديالي ونعرضهم ف liste وكل catégorie ضغطت عليها غادي تديني للملف لي كيعرض les posts الخاصين بل catégorie ولي غادي نزيدوه من بعد.

الكود ديال الملف هو :

                                //Categories.vue

<template>
    <div class="col-md-4 mt-5">
        <div class="card">
            <h2 class="card-header">Catégories</h2>
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item"
                        v-for="(category,index) in categories"
                        :key="index"
                    >
                        <router-link :to="`/posts/category/${category.slug}`">
                            {{category.name}}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            categories : []
        }
    },
    created () {
        axios.get('/api/categories')
            .then(response => this.categories = response.data.categories)
            .catch(err => console.log(err));
    }
}
</script>
                            

4- إضافة ل component Home

دائما ف dossier components فيه غادي نزيدوا component جديد نسميوه Home.vue لي فيه غادي نسترجع les posts كاملين ونعرضهم وكنسترجع أيضا ل component Categories وكنعرضوا وكنخدم بل package laravel-vue-pagination لي سبق وزدنا باش كنعرض ل pagination.

الكود ديال الملف هو :




                                    //Home.vue

<template>
    <div class="container">
        <div class="row my-4">
            <Categories></Categories>
            <div class="col-md-8 mt-5">
                <div class="card">
                    <div class="card-header">Articles</div>

                    <div class="card-body"
                        v-for="(post,index) in posts.data"
                        :key="index"
                    >
                        <div class="media">
                            <img :src="post.photo" class="rounded shadow-sm img-fluid mr-2" alt="" srcset="">
                            <div class="media-body">
                                <router-link :to="post.path">
                                    <h3>{{post.title}}</h3>
                                </router-link>
                                <p>
                                    <span class="text-default">
                                        {{post.user.name}}
                                    </span>
                                    <span class="text-danger">
                                        {{post.added}}
                                    </span>
                                </p>
                                <p class="lead">{{post.body.substr(0,200)}}...</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-center">
                        <pagination :data="posts" @pagination-change-page="getPosts"></pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Categories from './Categories.vue';

    export default {
        data(){
            return{
                posts : {}
            }
        },
        components : {
            Categories
        },
        created () {
            this.getPosts();
        },
        methods: {
            getPosts(page){
                if(typeof page === 'undefined'){
                    page = 1;
                }
                axios.get('/api/posts?page='+page)
                    .then(response => {
                        console.log(response.data);
                        this.posts = response.data;
                    })
                    .catch(err => console.log(err));
            }
        },
    }
</script>
                                

5- إضافة ل component PostCategory

دائما ف dossier components فيه غادي نزيدوا component جديد نسميوه PostCategory.vue لي فيه غادي نسترجع les posts الخاصين ب catégorie ضغطت عليها ونعرضهم.

عندي نفس الكود لي ف Home فقط زدت ل watch لي كتراقب  route وفاش كيتغير كتنفذ ل fonction getPosts وهادشي كيمكن باش نسترجع ل posts الخاصين ب catégorie ضغطت عليها بلا تحديث ديال الصفحة.

الكود ديال الملف هو :



                                    //PostCategory.vue

<template>
    <div class="container">
        <div class="row my-4">
            <Categories></Categories>
            <div class="col-md-8 mt-5">
                <div class="card">
                    <div class="card-header">Articles</div>

                    <div class="card-body"
                        v-for="(post,index) in posts"
                        :key="index"
                    >
                        <div class="media">
                            <img :src="post.photo" class="rounded shadow-sm img-fluid mr-2" alt="" srcset="">
                            <div class="media-body">
                                <router-link :to="post.path">
                                    <h3>{{post.title}}</h3>
                                </router-link>
                                <p>
                                    <span class="text-default">
                                        {{post.user.name}}
                                    </span>
                                    <span class="text-danger">
                                        {{post.added}}
                                    </span>
                                </p>
                                <p class="lead">{{post.body.substr(0,200)}}...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Categories from './Categories.vue';

    export default {
        data(){
            return{
                posts : {}
            }
        },
        components : {
            Categories
        },
        created () {
            this.getPosts();
        },
        methods: {
            getPosts(){
                axios.get(`/api/posts/category/${this.$route.params.slug}`)
                    .then(response => {
                        console.log(response.data);
                        this.posts = response.data;
                    })
                    .catch(err => console.log(err));
            }
        },
        watch: {
            '$route' : 'getPosts'
        },
    }
</script>
                                


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

بحث في الموقع


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