Blog ب laravel & vue js الجزء الخامس


فهاد الجزء الخامس من blog ب laravel & vue js غادي نزيدو ل component الخاص بعرض تفاصيل post وخاصية إضافة التعليقات ومنبعد غادي نزيدو systéme ديال connexion و déconnexion.

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

1- إضافة ل component PostDetails

دائما ف dossier components غادي نزيد fichier جديد سميه PostDetails.vue فيه غادي نعرض تفاصيل post منبعد مغادي نسترجعوه ب slug ديالو.

منبعد غادي نعرض التعليقات الخاصة بل post لي اختاريت وأيضا عندي الفورم الخاصة بإضافة تعليق ولي كتعرض فقط يلا كان المستخدم connecté مكانش كنعرض رابط لي كيديه للصفحة الخاصة بتسجيل الدخول.

وبالنسبة ل méthodes عندي addComment لي كتمكن من إضافة تعليق ولي كيتزاد مع التعليقات المعروضة وكن incrémenter عدد التعليقات بواحد.

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

                                //PostDetails.vue

<template>
    <div class="container">
        <div class="row my-4">
            <div class="col-md-8 mx-auto mt-5">
                <div class="card">
                    <h2 class="card-header">{{post.title}}</h2>
                    <p class="p-2">
                        <span class="badge badge-danger">
                            {{post.user}}
                        </span>
                        <span class="badge badge-info">
                            {{post.created_at}}
                        </span>
                        <span class="badge badge-success">
                            {{post.category}}
                        </span>
                    </p>
                    <div class="card-img-top">
                        <img style="width:100%;height:400px" :src="post.photo" class="rounded shadow-sm img-fluid mr-2" alt="" srcset="">
                    </div>
                    <div class="card-body">
                        <div class="media">
                            <div class="media-body">
                                <p class="lead">{{post.body.substr(0,300)}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row my-3">
                    <div class="col-md-12">
                        <div class="media shadow my-4 p-4" v-if="logged">
                            <div class="media-body">
                                <h3 class="my-3 text-dark">Ajouter un commentaire</h3>
                                <div class="form-group">
                                  <label for="">Commentaire</label>
                                  <textarea
                                    class="form-control"
                                    col="30" rows="3"
                                    v-model="comment"
                                    ></textarea>
                                </div>
                                <button
                                    type="button"
                                    name="" id="" class="btn btn-primary"
                                    @click="addComment(post.id)"
                                    >Valider</button>
                            </div>
                        </div>
                        <div class="media my-4 shadow p-4" v-else>
                            <div class="media-body">
                                <router-link to="/login">Connectez vous pour commenter</router-link>
                            </div>
                        </div>
                        <h3 class="text-info mb-3">
                            Commentaires <span class="badge badge-dark p-2">
                                {{post.comments_count}}
                            </span>
                        </h3>
                        <div class="media my-4 p-4 shadow"
                            v-for="(comment,index) in post.comments"
                            :key="index"
                        >
                            <div class="media-body">
                                <span class="text-danger">
                                    {{comment.user}} | {{comment.created_at}}
                                </span>
                                <p class="lead">
                                    {{comment.body.substr(0,100)}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data () {
        return {
            post : '',
            comment : '',
            logged : User.isLogged().logged,
        }
    },
    methods: {
        addComment(id){
            axios.post('/api/comments',{
                post_id : id,
                body : this.comment,
                user_id : User.isLogged().id
            }).then(response => {
                console.log(response.data);
                this.post.comments_count +=1;
                this.post.comments.unshift(response.data);
                this.comment = null;
            }).catch(err => console.log(err));
        }
    },
    created () {
        axios.get(`/api/posts/${this.$route.params.slug}`)
            .then(response => {
                console.log(response.data);
                this.post = response.data;
            }).catch(err => console.log(err));
    }
}
</script>
                            

2- إضافة ل component Signup

دائما ف dossier components غادي نزيد fichier جديد سميه Signup.vue فيه غادي تكون عندي الفورم ديال التسجيل وعندي ل méthode register لي كتمكن من تسجيل مستخدم جديد ومنبعد كتزاد المعلومات ديالو ف localStorage ومنتما كيتكونيكطا.

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

                                //Signup.vue

<template>
    <div class="container">
        <div class="col-md-6 mx-auto py-5 mt-5">
            <div class="card my-5">
                <div class="card-header">
                    Inscription
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <input type="text" placeholder="Nom & Prénom"
                            v-model="name"
                            class="form-control"
                        >
                    </div>
                    <div class="form-group">
                        <input type="email" required placeholder="Email"
                            v-model="email"
                            class="form-control"
                        >
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Mot de passe"
                            v-model="password"
                            class="form-control"
                        >
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" @click="register">
                            Valider
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            name : '',
            email : '',
            password : ''
        }
    },
    created () {
        if(User.isLogged()){
            this.$router.push({name : 'home'});
        }
    },
    methods: {
        register(){
            axios.post('/api/users/register',{
                name : this.name,
                email : this.email,
                password : this.password
            }).then(response => {
                console.log(response.data);
                User.storeUser(JSON.stringify(response.data));
                this.$router.go();
            }).catch(err => console.log(err));
        }
    },
}
</script>
                            

3- إضافة ل component Login

دائما ف dossier components غادي نزيد fichier جديد سميه Login.vue فيه غادي تكون عندي الفورم ديال ل connexion وعندي ل méthode login لي كتمكن من تسجيل دخول مستخدم بالإمايل وكلمة المرور ومنبعد كتزاد المعلومات ديالو ف localStorage ومنتما كيتكونيكطا.

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

                                //Login.vue

<template>
    <div class="container">
        <div class="col-md-6 mx-auto py-5 mt-5">
            <div class="card my-5">
                <div class="card-header">
                    Connexion
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <input type="email" required placeholder="Email"
                            v-model="email"
                            class="form-control"
                        >
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Mot de passe"
                            v-model="password"
                            class="form-control"
                        >
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" @click="login">
                            Valider
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            email : '',
            password : ''
        }
    },
    created () {
        if(User.isLogged()){
            this.$router.push({name : 'home'});
        }
    },
    methods: {
        login(){
            axios.post('/api/users/login',{
                email : this.email,
                password : this.password
            }).then(response => {
                console.log(response.data);
                User.storeUser(JSON.stringify(response.data));
                this.$router.go();
            }).catch(err => console.log(err));
        }
    },
}
</script>
                            

4- إضافة ل component الرئيسي للصفحة الرئيسية

غادي نمشي للملف welcome.blade.php لي هو الصفحة الرئيسية ديالنا فيها غادي نزيد روابط لملفات css و javascript أيضا غادي نزيد div لي غادي نعطيها ل id app ولي داخلها كنزيد ل component app-home لي سبق وزدنا.

الكود ديال الملف بعد التعديل هو :

                                    //welcome.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">

        <title>Laravel Vue Blog</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
        <!-- Styles -->
    </head>
    <body>
        <div id="app">
            <app-home></app-home>
        </div>
    </body>
    <script  src="{{asset('js/app.js')}}"></script>
</html>
                                


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

بحث في الموقع


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