新增 文章換頁

resources/js/src/libs/acl/ability.js

@@ -1,4 +1,4 @@
-import { createMongoAbility, AbilityBuilder } from '@casl/ability'
+import { Ability, AbilityBuilder } from '@casl/ability'
 
 //  Read ability from localStorage
 // * Handles auto fetching previous abilities if already logged in user
@@ -12,7 +12,7 @@ const {
   cannot,
   build,
   rules,
-} = new AbilityBuilder(createMongoAbility)
+} = new AbilityBuilder(Ability)
 
 export function getExistingAbility(userAbility) {
   switch (userAbility) {

resources/js/src/views/blog/BlogDetail.vue

@@ -6,7 +6,7 @@
       <b-row>
         <!-- blogs -->
         <b-col cols="12">
-          <b-card :img-src="defaultsImg()" img-top img-alt="Blog Detail Pic" :title="blogDetail.blog.title">
+          <b-card :img-src="defaultsImg(blogId)" img-top img-alt="Blog Detail Pic" :title="blogDetail.blog.title">
             <b-media no-body>
               <b-media-aside vertical-align="center" class="mr-50">
                 <b-avatar href="javascript:void(0)" size="24" :src="getUserAvatar(blogDetail.blog.userId)" />
@@ -173,7 +173,7 @@
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }" @click="pageReload">
-              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(6)" width="100" rounded height="70"/>
+              <b-img :src="defaultsImg(recentpost.id)" :alt="defaultsImg(recentpost.id).slice(6)" width="100" rounded height="70"/>
             </b-link>
           </b-media-aside>
           <b-media-body>
@@ -311,8 +311,8 @@ export default {
     getUserAvatar(userId) {
       return require('@/assets/images/avatars/' + userId + '-small.png')
     },
-    defaultsImg() {
-      return require('@/assets/images/banner/banner-' + (Math.floor(Math.random() * 38) + 1) + '.jpg')
+    defaultsImg(blogId) {
+      return require('@/assets/images/banner/banner-' + blogId + '.jpg')
     },
     postComment() {
       useJwt.getPost('/api/comment/post', {

resources/js/src/views/blog/BlogList.vue

@@ -7,7 +7,7 @@
         <b-col v-for="(blog, index) in blogList.slice(0, Math.ceil(blogList.length / 2))" :key="index" md="12">
           <b-card tag="article" no-body>
             <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
-              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(5)" class="card-img-top" />
+              <b-img :src="defaultsImg(blog.id)" :alt="defaultsImg(blog.id).slice(5)" class="card-img-top" />
             </b-link>
             <b-card-body>
               <b-card-title>
@@ -59,7 +59,7 @@
         <b-col v-for="(blog, index) in blogList.slice(Math.ceil(blogList.length / 2))" :key="index" md="12">
           <b-card tag="article" no-body>
             <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
-              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(5)" class="card-img-top" />
+              <b-img :src="defaultsImg(blog.id)" :alt="defaultsImg(blog.id).slice(5)" class="card-img-top" />
             </b-link>
             <b-card-body>
               <b-card-title>
@@ -109,9 +109,9 @@
       </b-col>
       <b-col cols="12">
         <!-- pagination -->
-        <div class="my-2">
-          <b-pagination v-model="currentPage" align="center" :total-rows="rows" first-number last-number
-            prev-class="prev-item" next-class="next-item">
+        <div class="my-2" @click="getBlogListPerpage">
+          <b-pagination v-model="currentPage" align="center" :per-page="perPage" :total-rows="rows" first-number
+            last-number prev-class="prev-item" next-class="next-item">
             <template #prev-text>
               <feather-icon icon="ChevronLeftIcon" size="18" />
             </template>
@@ -147,7 +147,8 @@
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }">
-              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(6)" width="100" rounded height="70" />
+              <b-img :src="defaultsImg(recentpost.id)" :alt="defaultsImg(recentpost.id).slice(6)" width="100" rounded
+                height="70" />
             </b-link>
           </b-media-aside>
           <b-media-body>
@@ -245,12 +246,16 @@ export default {
       blogList: [],
       blogSidebar: {},
       currentPage: 1,
-      perPage: 1,
-      rows: 140,
+      perPage: 4,
+      rows: 4,
     }
   },
   created() {
-    useJwt.getPost('/api/get_blog/list').then(res => {
+    useJwt.getPost('/api/get_blog/list/total').then(res => {
+      this.rows = res.data
+    })
+
+    useJwt.getPost('/api/get_blog/list/perpage', { offset: 0, rows: this.perPage }).then(res => {
       this.blogList = res.data
     })
 
@@ -274,8 +279,16 @@ export default {
     getUserAvatar(userId) {
       return require('@/assets/images/avatars/' + userId + '-small.png')
     },
-    defaultsImg() {
-      return require('@/assets/images/banner/banner-' + (Math.floor(Math.random() * 38) + 1) + '.jpg')
+    defaultsImg(blogID) {
+      return require('@/assets/images/banner/banner-' + blogID + '.jpg')
+    },
+    showPage() {
+      console.log(this.currentPage);
+    },
+    getBlogListPerpage() {
+      useJwt.getPost('/api/get_blog/list/perpage', { offset: ((this.currentPage - 1) * this.perPage), rows: this.perPage }).then(res => {
+        this.blogList = res.data
+      })
     },
   },
 }

routes/api.php

@@ -93,11 +93,45 @@ Route::middleware('auth:sanctum')->post('/get_blog/list', function (Request $req
         LEFT JOIN (
             SELECT [blogId],COUNT(*) AS total
             FROM [laravel_kevin].[dbo].[comments]
-            GROUP BY [blogId]) as t ON [blogs].[id] = [t].[blogId]");
+            GROUP BY [blogId]) as t ON [blogs].[id] = [t].[blogId]
+        ORDER BY blogs.id DESC");
 
     return $blogList;
 });
 
+Route::middleware('auth:sanctum')->post('/get_blog/list/perpage', function (Request $request) {
+    $request->validate([
+        'offset' => 'required',
+        'rows' => 'required',
+    ]);
+    $blogList = DB::select("SELECT 
+            blogs.id, 
+            title, 
+            content AS excerpt, 
+            tags, users.id AS userId, 
+            users.name AS userFullName, 
+            blogs.created_at AS blogPosted, 
+            t.total AS comment
+        FROM [laravel_kevin].[dbo].[blogs]
+        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT JOIN (
+            SELECT [blogId],COUNT(*) AS total
+            FROM [laravel_kevin].[dbo].[comments]
+            GROUP BY [blogId]) as t ON [blogs].[id] = [t].[blogId]
+        ORDER BY blogs.id DESC
+        OFFSET " . $request->offset . " ROW
+        FETCH NEXT " . $request->rows . " ROWS ONLY");
+
+    return $blogList;
+});
+
+Route::middleware('auth:sanctum')->post('/get_blog/list/total', function (Request $request) {
+    $blogList = DB::select("SELECT COUNT(*) AS total
+        FROM [laravel_kevin].[dbo].[blogs]");
+
+    return $blogList[0]->total;
+});
+
 Route::middleware('auth:sanctum')->post('/get_blog/detail', function (Request $request) {
     $request->validate([
         'blogId' => 'required',
@@ -127,9 +161,14 @@ Route::middleware('auth:sanctum')->post('/get_blog/detail', function (Request $r
 });
 
 Route::middleware('auth:sanctum')->post('/get_blog/sidebar', function (Request $request) {
-    $recentPosts = DB::select("SELECT blogs.id, title, blogs.created_at AS createdTime
+    $recentPosts = DB::select("SELECT TOP(4) blogs.id, title, blogs.created_at AS createdTime, t.total AS comments
         FROM [laravel_kevin].[dbo].[blogs]
-        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]");
+        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT JOIN (
+            SELECT [blogId],COUNT(*) AS total
+            FROM [laravel_kevin].[dbo].[comments]
+            GROUP BY [blogId]) as t ON [blogs].[id] = [t].[blogId]
+        ORDER BY comments DESC");
 
     $categories = [
         ['category' => 'Fashion', 'icon' => 'WatchIcon'],