Vuejs 3 Darija Blog App الجزء الثالت
فهاد الجزء الثالت من Vuejs 3 Darija Blog App غادي نكملوا ل projet ديالنا ونزيدو الإمكانية ديال إضافة تعليق وعرض التعليقات الخاصة بكل post.
نظرة سريعة بالفيديو
1- إضافة AddComment Component
دائما ف dossier components زيد fichier سميه AddComment.vue ولي فيه هاد الكود :
//
<template>
<div class="card mt-3">
<div class="card-body">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input
v-model="data.comment.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.comment.body"
placeholder="Post"
rows="3"
cols="50" class="form-control" id="body"></textarea>
</div>
<div class="mb-3">
<button
@click.prevent="storeComment"
:disabled="!data.comment.username || !data.comment.body"
type="submit" class="btn btn-sm btn-primary">Submit</button>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
//set data
const data = reactive({
comment: {
username: '',
body: ''
}
});
//emit events
const emit = defineEmits(['commentAdded']);
//store comment
const storeComment = () => {
const comment = data.comment;
comment.id = uuidv4();
comment.time = moment().format('MMMM Do YYYY, h:mm:ss a');
emit('commentAdded',comment);
data.comment = {
username: '',
body: ''
};
};
</script>
<style>
</style>
2- إضافة Comments Component
دائما ف dossier components زيد fichier سميه Comments.vue ولي فيه هاد الكود :
//
<template>
<div class="card bg-dark text-white my-2">
<div class="card-body d-flex flex-column p-2">
<span>
<i class="bi bi-person"></i> {{ comment.username }}
</span>
<span>
<i class="bi bi-alarm"></i> {{ comment.time }}
</span>
<p class="lead">
{{ comment.body }}
</p>
</div>
</div>
</template>
<script setup>
//define props
const props = defineProps({
comment: {
type: Object,
required: true
}
});
</script>
<style>
</style>
3- إضافة PostDetails Component
دائما ف dossier components زيد fichier سميه PostDetails.vue ولي فيه هاد الكود :
//
<template>
<div>
<div class="card mb-2">
<div class="card-body">
{{ post.body }}
</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>
<span>
<i class="bi bi-chat"></i> {{ getPostcomments(post.id).length }}
</span>
<span>
<i class="bi bi-alarm"></i> {{ post.time }}
</span>
</div>
</div>
<Comments
v-for="comment in getPostcomments(post.id)"
:key="comment.id"
:comment="comment"
/>
<AddComment @commentAdded="commentAdded"/>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { useLikeStore } from '../stores/useLikeStore'
import { usePostStore } from '../stores/usePostStore'
import { useCommentStore } from '../stores/useCommentStore'
import { v4 as uuidv4 } from 'uuid';
import AddComment from './AddComment.vue'
import Comments from './Comments.vue'
//get like store
const { addLike, getPostLikes } = useLikeStore();
//get post store
const { getPost } = usePostStore();
//get comment store
const { addComment, getPostcomments } = useCommentStore();
//get route params
const { params } = useRoute();
//store like
const storeLike = () => {
const like = {
id: uuidv4(),
post_id: params.id
}
addLike(like);
}
//get post
const post = getPost(params.id);
//add comment
const commentAdded = (comment) => {
comment.post_id = post.id;
addComment(comment);
}
</script>
<style>
</style>
4- إضافة Home Component
دائما ف dossier components زيد fichier سميه Home.vue ولي فيه هاد الكود :
//
<template>
<div class="row">
<div class="col-md-8 mx-auto">
<Form></Form>
<Posts></Posts>
</div>
</div>
</template>
<script setup>
import Form from './Form.vue'
import Posts from './Posts.vue'
</script>
5- تعديل ل App Component
منبعد غادي نديرو تعديل على ل App component ودير npm run dev باش ت démarrer serveur.
الكود ديال الملف هو :
//
<template>
<div class="container">
<div class="row my-3">
<div class="col-md-10 mx-auto">
<Header></Header>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script setup>
import Header from './components/Header.vue'
</script>
<style>
</style>