BLOG ب LARAVEL & VUE JS الجزء التاسع
نظرة سريعة بالفيديو
1- إضافة ل component AddPost
//
<template>
<div
class="modal fade"
id="addPost"
tabindex="-1"
role="dialog"
aria-labelledby="addPost"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Ajouter un article</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form @submit="addPost" enctype="multipart/form-data">
<div class="form-group">
<label for>Catégorie</label>
<option value disabled selected>Veuillez choisir une catégorie</option>
<select v-model="category" class="form-control" name="category" required id>
<option
:value="category.id"
v-for="(category,index) in categories"
:key="index"
>{{category.name}}</option>
</select>
</div>
<div class="form-group">
<label for>Titre*</label>
<input
type="text"
name="title"
id
v-model="title"
class="form-control"
placeholder="Titre"
required
aria-describedby="helpId"
/>
</div>
<div class="form-group">
<label for></label>
<textarea
v-model="body"
class="form-control"
name="body"
id
rows="5"
placeholder="Description"
></textarea>
</div>
<div class="form-group">
<label for>Photo*</label>
<input
type="file"
required
v-on:change="onImageChange"
class="form-control-file"
name="image"
id="image"
placeholder
aria-describedby="fileHelpId"
/>
</div>
<button type="submit" class="btn btn-primary">Valider</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: "",
body: "",
category: "",
categories: [],
image: null
};
},
created() {
axios
.get("/api/categories")
.then(response => (this.categories = response.data.categories))
.catch(err => console.log(err));
},
methods: {
onImageChange(e) {
console.log(e.target.files[0]);
this.image = e.target.files[0];
},
addPost(e) {
e.preventDefault();
const config = {
headers: { "content-type": "multipart/form-data" }
};
let formData = new FormData();
formData.append("image", this.image);
formData.append("title", this.title);
formData.append("body", this.body);
formData.append("category_id", this.category);
formData.append("user_id", User.isLogged().id);
axios
.post("api/posts", formData, config)
.then(res => {
$("#addPost").modal("hide");
this.title = "";
this.body = "";
this.category = "";
this.image = null;
Swal.fire({
position: 'center',
icon: 'success',
title: 'Article ajouté',
showConfirmButton: false,
timer: 1500
});
this.$emit("added");
})
.catch(err => console.log(err));
}
}
};
</script>
2- تعديل ل component AdminPanel
//
<template>
<div class="container">
<div class="row mt-5 mb-3">
<div class="col-md-12">
<a
data-target="#addPost"
data-toggle="modal"
class="btn mt-5 btn-sm btn-success text-white mb-2"
>
<i class="fa fa-plus"></i>
</a>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Catégorie</th>
<th>Titre</th>
<th>Description</th>
<th>Image</th>
<th>Ajouté par</th>
<th>Le</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(post,index) in posts.data" :key="index">
<td>{{post.id}}</td>
<td>{{post.category.name}}</td>
<td>{{post.title}}</td>
<td>{{post.body.substr(0,100)}}...</td>
<td>
<img
:src="post.photo"
class="img-fluid mr-2 rounded shadow-sm"
alt
height="60"
width="60"
srcset
/>
</td>
<td>{{post.user.name}}</td>
<td>{{post.added}}</td>
<td class="d-flex flex-row justify-content-center align-items-center">
<router-link :to="post.path" class="btn mr-1 btn-sm btn-primary text-white">
<div class="fa fa-eye"></div>
</router-link>
</td>
</tr>
</tbody>
</table>
<div class="card-footer d-flex justify-content-center">
<pagination :data="posts" @pagination-change-page="getPosts"></pagination>
</div>
</div>
<AddPost @added="postAdded" />
</div>
</div>
</template>
<script>
import AddPost from "./AddPost";
export default {
data() {
return {
posts: {},
loading: true
};
},
components: { AddPost },
created() {
if (User.isLogged() && User.isAdmin()) {
this.getPosts();
} else {
this.$router.push({ name: "home" });
}
},
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));
},
postAdded() {
this.getPosts();
},
}
};
</script>
3- إضافة sweet alert ل projet
//
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>