BLOG ب LARAVEL & VUE JS الجزء الثامن


فهاد الجزء الثامن من blog ب laravel & vuejs غادي نزيدو la page admin لي غادي نعرضوا فيها les posts ديالنا ومنبعد عاد غادي نزيدو ل component لي غادي يمكنا باش نزيدو post فقاعدة البيانات.

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


1- إضافة ل component AdminPanel


غادي تمشي ل dossier components غادي تزيد fichier جديد سميه AdminPanel فيه غادي تكون table لي كنعرض فيها les posts ديالي مع رابط المشاهدة ديال كل post.

الكود هو نفسو لي سبق وزدنا من قبل حتى حاجة ما جديدة الكود لي غادي تزيد فل fichier AdminPanel  هو :

                                    
                                        //
<template>
  <div class="container">
    <div class="row mt-5 mb-3">
      <div class="col-md-12">
        <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>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: {},
      loading: true
    };
  },
  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));
    },
  }
};
</script>
                                    
                                

2- إضافة route admin


باش نزيدو ل admin route غادي نمشيو ل fichier routes.js فل array routes غادي نزيد الكود لي كيديني ل AdminPanel.


أول حاجة كنسترجع ل component AdminPanel زيد هاد السطر ف top :

;'import AdminPanel from '../components/AdminPanel.vue


من بعد كنزيد هاد الكود فل array routes :

                                    
                                        //

,
    {
        path: '/admin',
        component: AdminPanel,
        name: 'admin'
    }
                                    
                                

3- التحقق من أن المستخدم الحالي هو admin


يلا بغيت نتأكد واش لمستخدم لي connecté هو أدمين غادي نمشي ل class User وغادي نزيد fonction جديدة لي سميتها isAdmin ولي فقط كتحقق واش ل le champ admin كيساوي واحد كان كترجعنا 1مكانش كترجعنا 0.

الكود لي غادي تزيد ف User.js هو :

                                      
                                        //

    isAdmin() {
        return this.isLogged().admin ? true : false;
    }
                                      
                                    

4- إضافة ل admin ل menu


منبعد غادي نمشي ل component Navbar.vue لي فيه ل menu ولي كنزيد فيه property ف data object سميتها أدمين ولي كتاخذ القيمة ديال ل fonction isAdmin لي سبق وزدنا.

وفل menu كنزيد الرابط ل admin panel لي كيبان فقط يلا كان المستخدم connecté & admin.

دبا يلا تكونيكطيتي بالحساب ديال الأدمن غادي تلقى ل admin panel فل menu يلا مشيتيلها غادي تلقى les posts ديالك معروضين ف table. 

الكود ديال Navbar.vue بعد التعديل هو :

                                        
                                            <template>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <router-link class="navbar-brand" :to="home">Blog</router-link>
            <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                aria-expanded="false" aria-label="Toggle navigation">
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <router-link class="nav-link" :to="home">Accueil</router-link>
                </li>
                <li class="nav-item">
                  <router-link class="nav-link" :to="signup" v-if="!logged">Inscription</router-link>
                </li>
                <li class="nav-item">
                  <router-link class="nav-link" :to="login" v-if="!logged">Connexion</router-link>
                </li>
                <li class="nav-item">
                    <a class="nav-link" @click="userlogout" style="cursor:pointer" v-if="logged">
                        <span class="font-weight-bold">{{name.toUpperCase()}}</span> Déconnexion
                    </a>
                </li>
                <li class="nav-item">
                  <router-link class="nav-link" :to="adminPanel" v-if="logged && admin">Admin Panel</router-link>
                </li>
              </ul>
            </div>
        </nav>
    </div>
</template>

<script>
export default {
    data(){
        return{
            home : '/',
            login : '/login',
            signup : '/signup',
            logout : '/logout',
            logged : User.isLogged().logged,
            admin : User.isAdmin(),
            name : User.isLogged().name,
            adminPanel : '/admin'
        }
    },
    methods: {
        userlogout(){
            User.logout();
            this.logged = false;
            this.$router.go();
        }
    },
}
</script>
                                        
                                    

كلمات مفاتيح :