BLOG ب LARAVEL & VUE JS الجزء التاسع

imadbelasri Vuejs
VS

فهاد الجزء التاسع من blog ب laravel & vue js غادي نزيدو ل component الخاص بإضافة post جديد فقاعدة البيانات وغادي نشوفوا أيضا كيفاش نزيدو sweet alert باش نعرضوا رسائل تأكيد الإضافة التعديل والحذف.


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


1- إضافة ل component AddPost

غادي نمشي ل dossier components فيه غادي نزيد fichier جديد سميه AddPost.vue فيه غادي يكون فيه كود الإضافة ديال post جديد.

الفورم غادي تكون عبارة عن modal فاش غادي نضغط على زر الإضافة فالصفحة الرئيسية ديال الأدمن غادي تعرض ال modal.

أول حاجة عندي الفورم لي فيها les champs لي مربوطين مع des variables فل objet data وبالنسبة للحقل الخاص بالصورة فهو مربوط مع fonction سميتها onImageChange لي فاش كنختار الصورة كتاخذ هي ال fichier وتعطيه ل variable image لي ف data.

أيضا فاش كتشارجا la page كنسترجع les catégories لي كياخذهم select و فاش كندير submit للفورم كتنفذ ل fonction addPost لي كترسل المعلومات لقاعدة البيانات.

وفاش كيتزادو كنصيفطوا event سميناه added ل component AdminPanel باش كيعرف بلي ل post تزاد.

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

                                                    
                                                        //
<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">&times;</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

منبعد غادي نزيدو ل modal ديال الإضافة فل AdminPanel أول حاجة غادي نزيدو الرابط ديال الإضافة منبعد غادي نسترجعوا ل component AddPost ونزيدوه.

أيضا كنستقبل ل event added ولي كيعني ل post تزاد وفاش كيتزاد كنفذ ل fonction postAdded لي كتعرض les posts من جديد باش يبان ال post لي تزاد جديد معاهم.

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

                                                        
                                                            //
<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

باش نزيدو sweet alert ل projet ديالنا غادي تمشي ل fichier welcome.blade.php وفيه غادي تزيد cdn ديال sweet alert :

                                                        
                                                            //
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...