Vuejs 3 Darija Blog App الجزء الثاني
فهاد الجزء الثاني من 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>