Vuejs 3 Darija Blog App الجزء الثاني

منذ 9 أشهر imadbelasri Vuejs

فهاد الجزء الثاني من Vuejs 3 Darija Blog App غادي نكملوا ل projet ديالنا ونزيدو les routes من بعد غادي نزيدوا components باش نعرضوا ل posts مع عدد التعليقات والإعجابات.

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

1- إضافة Router

دائما ف src زيد dossier router فيه fichier index.js لي غادي يكونوا فيه les routes ديالنا.

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

عرض الكود

                                                    
                                                        //
import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../components/Home.vue'
import PostDetails from '../components/PostDetails.vue'


const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/post/:id',
            name: 'postDetails',
            component: PostDetails
        }
    ]
});

export default router

2- إضافة Header Component

ف dossier components زيد fichier سميه Header.vue ولي فيه هاد الكود :

عرض الكود

                                                        
                                                            //
<template>
    <nav class="navbar navbar-expand-lg rounded" style="background-color:rgb(238, 82, 83);">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link text-white" aria-current="page" to="/">
                            <i class="bi bi-house-door"></i> Home
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script setup>
</script>

<style>
</style>

3- إضافة Post Component

دائما ف dossier components زيد fichier سميه Post.vue ولي فيه هاد الكود :

عرض الكود

                                                        
                                                            //
<template>
    <div class="card mb-2">
        <div class="card-body">
           <router-link :to="`/post/${post.id}`" class="text-decoration-none text-secondary">
                {{ post.body }}
           </router-link>
        </div>
        <div class="card-footer bg-white d-flex justify-content-between align-items-center">
            <span>
                <i class="bi bi-person"></i> {{ post.username }}
            </span>
            <span @click="storeLike" style="cursor: pointer">
                <i class="bi bi-heart"></i> {{ getPostLikes(post.id) }}
            </span>
            <router-link :to="`/post/${post.id}`" class="text-decoration-none text-dark">
                <span>
                    <i class="bi bi-chat"></i> {{ getPostcomments(post.id).length }}
                </span>
           </router-link>
            <span>
                <i class="bi bi-alarm"></i> {{ post.time }}
            </span>
        </div>
    </div>
</template>

<script setup>
    import { useLikeStore } from '../stores/useLikeStore'
    import { useCommentStore } from '../stores/useCommentStore'
    import { v4 as uuidv4 } from 'uuid';

    //get store
    const { addLike, getPostLikes } = useLikeStore();
    //get comment store
    const { getPostcomments } = useCommentStore();

    //define props
    const props = defineProps({
        post: {
            type: Object,
            required: true
        }
    });

    //store like
    const storeLike = () => {
        const like = {
            id: uuidv4(),
            post_id: props.post.id
        }
        addLike(like);
    }
</script>

<style>
</style>

4- إضافة Posts Component

دائما ف dossier components زيد fichier سميه Posts.vue ولي فيه هاد الكود :

عرض الكود

                                                        
                                                            //
<template>
    <div class="row my-2">
        <div class="col-md-12">
            <Post 
                v-for="post in getPosts"
                :key="post.id"
                :post="post"
            />
        </div>
    </div>
</template>

<script setup>
    import { usePostStore } from '../stores/usePostStore'
    import Post from './Post.vue'

    //get store
    const { getPosts } = usePostStore();
</script>

<style>
</style>

5- إضافة Form Component

دائما ف dossier components زيد fichier سميه Form.vue ولي فيه هاد الكود :

عرض الكود

                                                        
                                                            //
<template>
  <div class="card mt-3">
      <div class="card-body">
            <form>
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input
                        v-model="data.post.username"
                        placeholder="Username" 
                        type="text" 
                        class="form-control" 
                        id="username">
                </div>
                <div class="mb-3">
                    <label for="body" class="form-label">Post</label>
                    <textarea 
                        v-model="data.post.body"
                        placeholder="Post" 
                        rows="3" 
                        cols="50" class="form-control" id="body"></textarea>
                </div>
                <button 
                    @click.prevent="storePost"
                    :disabled="!data.post.username || !data.post.body"
                    type="submit" class="btn btn-sm btn-primary">Submit</button>
            </form>
      </div>
  </div>
</template>

<script setup>
    import { reactive } from 'vue'
    import { usePostStore } from '../stores/usePostStore'
    import moment from 'moment';
    import { v4 as uuidv4 } from 'uuid';

    //get store
    const { addPost } = usePostStore();

    //set data
    const data = reactive({
      post: {
        username: '',
        body: ''
      }
    });

    //store post
    const storePost = () => {
        const post = data.post;
        post.id = uuidv4();
        post.time = moment().format('MMMM Do YYYY, h:mm:ss a');
        addPost(post);
        data.post = {
            username: '',
            body: ''
        };
    }
</script>

<style>
</style>