新增 bloglist 瀏覽

app/Http/Controllers/BlogController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Blog;
+use Illuminate\Http\Request;
+
+class BlogController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Models\Blog  $blog
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Blog $blog)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Models\Blog  $blog
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(Blog $blog)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\Blog  $blog
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Blog $blog)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Blog  $blog
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Blog $blog)
+    {
+        //
+    }
+}

app/Http/Controllers/CommentController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Comment;
+use Illuminate\Http\Request;
+
+class CommentController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Models\Comment  $comment
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Comment $comment)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Models\Comment  $comment
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(Comment $comment)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\Comment  $comment
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Comment $comment)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Comment  $comment
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Comment $comment)
+    {
+        //
+    }
+}

app/Models/Blog.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Blog extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'title',
+        'content',
+        'tags',
+        'writer',
+        'bookmarked',
+    ];
+}

app/Models/Comment.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Comment extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'writer',
+        'comment',
+        'blogId',
+    ];
+}

database/factories/BlogFactory.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use App\Models\User;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Blog>
+ */
+class BlogFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition()
+    {
+        return [
+            'title' => $this->faker->realText($maxNbChars = 20, $indexSize = 2),
+            'content' => $this->faker->realText($maxNbChars = 200, $indexSize = 2),
+            'tags' => json_encode(['Gaming', 'Video', 'Fashion', 'Test']),
+            'writer' => $this->faker->randomElement(User::query()->get('id')),
+            'bookmarked' => rand(0,10000),
+        ];
+    }
+}

database/factories/CommentFactory.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use App\Models\User;
+use App\Models\Blog;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Comment>
+ */
+class CommentFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition()
+    {
+        return [
+            'writer' => $this->faker->randomElement(User::query()->get('id')),
+            'comment' => $this->faker->realText($maxNbChars = 200, $indexSize = 2),
+            'blogId' => $this->faker->randomElement(Blog::query()->get('id')),
+        ];
+    }
+}

database/migrations/2022_12_14_051611_create_blogs_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('blogs', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->string('content');
+            $table->string('tags');
+            $table->string('writer');
+            $table->integer('bookmarked');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('blogs');
+    }
+};

database/migrations/2022_12_14_060941_create_comments_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('comments', function (Blueprint $table) {
+            $table->id();
+            $table->integer('writer');
+            $table->string('comment');
+            $table->integer('blogId');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('comments');
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -6,6 +6,8 @@ use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 use \App\Models\User;
 use \App\Models\Message;
+use \App\Models\Blog;
+use \App\Models\Comment;
 
 class DatabaseSeeder extends Seeder
 {
@@ -41,5 +43,7 @@ class DatabaseSeeder extends Seeder
             ]
         ]);
         Message::factory(50)->create();
+        Blog::factory(10)->create();
+        Comment::factory(100)->create();
     }
 }

resources/js/src/@core/auth/jwt/jwtService.js

@@ -116,8 +116,4 @@ export default class JwtService {
   getDataset(...args) {
     return this.axiosIns.post(this.jwtConfig.getDatasetEndpoint, ...args)
   }
-
-  getMessages(...args) {
-    return this.axiosIns.post('/api/get_messages', ...args)
-  }
 }

resources/js/src/views/CardAction.vue

@@ -168,7 +168,11 @@ export default {
 		},
 	},
 	created() {
-		useJwt.getMessages({ number: 2 })
+		useJwt.getDataset({
+			sql: `SELECT TOP (2) title, content, name, messages.updated_at  
+			FROM [laravel_kevin].[dbo].[messages] 
+			INNER JOIN [dbo].[users] ON [messages].[writer] = [users].[id]
+			ORDER BY updated_at desc` })
 			.then(res => {
 				this.messages = res.data
 			})

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

@@ -1,30 +1,15 @@
 <template>
-  <content-with-sidebar
-    v-if="Object.keys(blogDetail).length"
-    class="cws-container cws-sidebar-right blog-wrapper"
-  >
+  <content-with-sidebar v-if="Object.keys(blogDetail).length" class="cws-container cws-sidebar-right blog-wrapper">
 
     <!-- content -->
     <div class="blog-detail-wrapper">
       <b-row>
         <!-- blogs -->
         <b-col cols="12">
-          <b-card
-            :img-src="blogDetail.blog.img"
-            img-top
-            img-alt="Blog Detail Pic"
-            :title="blogDetail.blog.title"
-          >
+          <b-card :img-src="blogDetail.blog.img" 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="blogDetail.blog.avatar"
-                />
+              <b-media-aside vertical-align="center" class="mr-50">
+                <b-avatar href="javascript:void(0)" size="24" :src="blogDetail.blog.avatar" />
               </b-media-aside>
               <b-media-body>
                 <small class="text-muted mr-50">by</small>
@@ -36,36 +21,19 @@
               </b-media-body>
             </b-media>
             <div class="my-1 py-25">
-              <b-link
-                v-for="tag in blogDetail.blog.tags"
-                :key="tag"
-              >
-                <b-badge
-                  pill
-                  class="mr-75"
-                  :variant="tagsColor(tag)"
-                >
+              <b-link v-for="tag in blogDetail.blog.tags" :key="tag">
+                <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                   {{ tag }}
                 </b-badge>
               </b-link>
             </div>
             <!-- eslint-disable vue/no-v-html -->
-            <div
-              class="blog-content"
-              v-html="blogDetail.blog.content"
-            />
+            <div class="blog-content" v-html="blogDetail.blog.content" />
 
             <!-- user commnets -->
-            <b-media
-              v-for="user in blogDetail.blog.UserComment"
-              :key="user.avatar"
-              no-body
-            >
+            <b-media v-for="user in blogDetail.blog.UserComment" :key="user.avatar" no-body>
               <b-media-aside>
-                <b-avatar
-                  size="60"
-                  :src="user.avatar"
-                />
+                <b-avatar size="60" :src="user.avatar" />
               </b-media-aside>
               <b-media-body>
                 <h6 class="font-weight-bolder">
@@ -83,11 +51,7 @@
               <div class="d-flex align-items-center">
                 <div class="d-flex align-items-center mr-1">
                   <b-link class="mr-50">
-                    <feather-icon
-                      icon="MessageSquareIcon"
-                      size="21"
-                      class="text-body"
-                    />
+                    <feather-icon icon="MessageSquareIcon" size="21" class="text-body" />
                   </b-link>
                   <b-link>
                     <div class="text-body">
@@ -97,11 +61,7 @@
                 </div>
                 <div class="d-flex align-items-center">
                   <b-link class="mr-50">
-                    <feather-icon
-                      size="21"
-                      icon="BookmarkIcon"
-                      class="text-body"
-                    />
+                    <feather-icon size="21" icon="BookmarkIcon" class="text-body" />
                   </b-link>
                   <b-link>
                     <div class="text-body">
@@ -113,28 +73,12 @@
 
               <!-- dropdown -->
               <div class="blog-detail-share">
-                <b-dropdown
-                  variant="link"
-                  toggle-class="p-0"
-                  no-caret
-                  right
-                >
+                <b-dropdown variant="link" toggle-class="p-0" no-caret right>
                   <template #button-content>
-                    <feather-icon
-                      size="21"
-                      icon="Share2Icon"
-                      class="text-body"
-                    />
+                    <feather-icon size="21" icon="Share2Icon" class="text-body" />
                   </template>
-                  <b-dropdown-item
-                    v-for="icon in socialShareIcons"
-                    :key="icon"
-                    href="#"
-                  >
-                    <feather-icon
-                      :icon="icon"
-                      size="18"
-                    />
+                  <b-dropdown-item v-for="icon in socialShareIcons" :key="icon" href="#">
+                    <feather-icon :icon="icon" size="18" />
                   </b-dropdown-item>
                 </b-dropdown>
               </div>
@@ -145,24 +89,14 @@
         <!--/ blogs -->
 
         <!-- blog comment -->
-        <b-col
-          id="blogComment"
-          cols="12"
-          class="mt-2"
-        >
+        <b-col id="blogComment" cols="12" class="mt-2">
           <h6 class="section-label">
             Comment
           </h6>
-          <b-card
-            v-for="(comment,index) in blogDetail.comments"
-            :key="index"
-          >
+          <b-card v-for="(comment, index) in blogDetail.comments" :key="index">
             <b-media no-body>
               <b-media-aside class="mr-75">
-                <b-avatar
-                  :src="comment.avatar"
-                  size="38"
-                />
+                <b-avatar :src="comment.avatar" size="38" />
               </b-media-aside>
               <b-media-body>
                 <h6 class="font-weight-bolder mb-25">
@@ -174,11 +108,7 @@
                 </b-card-text>
                 <b-link>
                   <div class="d-inline-flex align-items-center">
-                    <feather-icon
-                      icon="CornerUpLeftIcon"
-                      size="18"
-                      class="mr-50"
-                    />
+                    <feather-icon icon="CornerUpLeftIcon" size="18" class="mr-50" />
                     <span>Reply</span>
                   </div>
                 </b-link>
@@ -189,10 +119,7 @@
         <!--/ blog comment -->
 
         <!-- Leave a Blog Comment -->
-        <b-col
-          cols="12"
-          class="mt-2"
-        >
+        <b-col cols="12" class="mt-2">
           <h6 class="section-label">
             Leave a Comment
           </h6>
@@ -201,53 +128,31 @@
               <b-row>
                 <b-col sm="6">
                   <b-form-group class="mb-2">
-                    <b-form-input
-                      name="name"
-                      placeholder="Name"
-                    />
+                    <b-form-input name="name" placeholder="Name" />
                   </b-form-group>
                 </b-col>
                 <b-col sm="6">
                   <b-form-group class="mb-2">
-                    <b-form-input
-                      name="email"
-                      type="email"
-                      placeholder="Email"
-                    />
+                    <b-form-input name="email" type="email" placeholder="Email" />
                   </b-form-group>
                 </b-col>
                 <b-col sm="6">
                   <b-form-group class="mb-2">
-                    <b-form-input
-                      name="website"
-                      placeholder="Website"
-                    />
+                    <b-form-input name="website" placeholder="Website" />
                   </b-form-group>
                 </b-col>
                 <b-col cols="12">
                   <b-form-group class="mb-2">
-                    <b-form-textarea
-                      name="textarea"
-                      rows="4"
-                      placeholder="Website"
-                    />
+                    <b-form-textarea name="textarea" rows="4" placeholder="Website" />
                   </b-form-group>
                 </b-col>
                 <b-col cols="12">
-                  <b-form-checkbox
-                    id="checkbox-1"
-                    v-model="commentCheckmark"
-                    name="checkbox-1"
-                    class="mb-2"
-                  >
+                  <b-form-checkbox id="checkbox-1" v-model="commentCheckmark" name="checkbox-1" class="mb-2">
                     Save my name, email, and website in this browser for the next time I comment.
                   </b-form-checkbox>
                 </b-col>
                 <b-col cols="12">
-                  <b-button
-                    v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-                    variant="primary"
-                  >
+                  <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary">
                     Post Comment
                   </b-button>
                 </b-col>
@@ -262,25 +167,13 @@
     <!--/ content -->
 
     <!-- sidebar -->
-    <div
-      slot="sidebar"
-      class="blog-sidebar py-2 py-lg-0"
-    >
+    <div slot="sidebar" class="blog-sidebar py-2 py-lg-0">
       <!-- input search -->
       <b-form-group class="blog-search">
         <b-input-group class="input-group-merge">
-          <b-form-input
-            id="search-input"
-            v-model="search_query"
-            placeholder="Search here"
-          />
-          <b-input-group-append
-            class="cursor-pointer"
-            is-text
-          >
-            <feather-icon
-              icon="SearchIcon"
-            />
+          <b-form-input id="search-input" v-model="search_query" placeholder="Search here" />
+          <b-input-group-append class="cursor-pointer" is-text>
+            <feather-icon icon="SearchIcon" />
           </b-input-group-append>
         </b-input-group>
       </b-form-group>
@@ -291,21 +184,11 @@
         <h6 class="section-label mb-75">
           Recent Posts
         </h6>
-        <b-media
-          v-for="(recentpost,index) in blogSidebar.recentPosts"
-          :key="recentpost.img"
-          no-body
-          :class="index? 'mt-2':''"
-        >
+        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="recentpost.img" no-body
+          :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link>
-              <b-img
-                :src="recentpost.img"
-                :alt="recentpost.img.slice(6)"
-                width="100"
-                rounded
-                height="70"
-              />
+              <b-img :src="recentpost.img" :alt="recentpost.img.slice(6)" width="100" rounded height="70" />
             </b-link>
           </b-media-aside>
           <b-media-body>
@@ -328,22 +211,11 @@
           Categories
         </h6>
 
-        <div
-          v-for="category in blogSidebar.categories"
-          :key="category.icon"
-          class="d-flex justify-content-start align-items-center mb-75"
-        >
+        <div v-for="category in blogSidebar.categories" :key="category.icon"
+          class="d-flex justify-content-start align-items-center mb-75">
           <b-link>
-            <b-avatar
-              rounded
-              size="32"
-              :variant="tagsColor(category.category)"
-              class="mr-75"
-            >
-              <feather-icon
-                :icon="category.icon"
-                size="16"
-              />
+            <b-avatar rounded size="32" :variant="tagsColor(category.category)" class="mr-75">
+              <feather-icon :icon="category.icon" size="16" />
             </b-avatar>
           </b-link>
           <b-link>
@@ -424,12 +296,30 @@ export default {
     }
   },
   created() {
-    this.$http.get('/blog/list/data/detail').then(res => {
-      this.blogDetail = res.data
-    })
-    this.$http.get('/blog/list/data/sidebar').then(res => {
-      this.blogSidebar = res.data
-    })
+    useJwt.getDataset({
+      sql: `SELECT blogs.id, title, content AS excerpt, tags, users.id AS userId, users.name AS userFullName, blogs.created_at AS blogPosted
+      FROM [laravel_kevin].[dbo].[blogs]
+      RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]` })
+      .then(res => {
+        var temp;
+        res.data.forEach(element => {
+          temp = element
+          temp.img = require('@/assets/images/banner/banner-27.jpg')
+          temp.tags = JSON.parse(temp.tags)
+          temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')
+          temp.comment = 2
+
+          this.blogList.push(temp)
+          this.blogSidebar.recentPosts.push({id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted})
+        });
+      })
+    
+    // this.$http.get('/blog/list/data/detail').then(res => {
+    //   this.blogDetail = res.data
+    // })
+    // this.$http.get('/blog/list/data/sidebar').then(res => {
+    //   this.blogSidebar = res.data
+    // })
   },
   methods: {
     kFormatter,

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

@@ -3,41 +3,21 @@
 
     <!-- blogs -->
     <b-row class="blog-list-wrapper">
-      <b-col
-        v-for="blog in blogList"
-        :key="blog.img"
-        md="6"
-      >
-        <b-card
-          tag="article"
-          no-body
-        >
+      <b-col v-for="blog in blogList" :key="blog.img" md="6">
+        <b-card tag="article" no-body>
           <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
-            <b-img
-              :src="blog.img"
-              :alt="blog.img.slice(5)"
-              class="card-img-top"
-            />
+            <b-img :src="blog.img" :alt="blog.img.slice(5)" class="card-img-top" />
           </b-link>
           <b-card-body>
             <b-card-title>
-              <b-link
-                :to="{ name: 'blog-detail', params: { id: blog.id } }"
-                class="blog-title-truncate text-body-heading"
-              >
+              <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }"
+                class="blog-title-truncate text-body-heading">
                 {{ blog.title }}
               </b-link>
             </b-card-title>
             <b-media no-body>
-              <b-media-aside
-                vertical-align="center"
-                class="mr-50"
-              >
-                <b-avatar
-                  href="javascript:void(0)"
-                  size="24"
-                  :src="blog.avatar"
-                />
+              <b-media-aside vertical-align="center" class="mr-50">
+                <b-avatar href="javascript:void(0)" size="24" :src="blog.avatar" />
               </b-media-aside>
               <b-media-body>
                 <small class="text-muted mr-50">by</small>
@@ -49,15 +29,8 @@
               </b-media-body>
             </b-media>
             <div class="my-1 py-25">
-              <b-link
-                v-for="(tag,index) in blog.tags"
-                :key="index"
-              >
-                <b-badge
-                  pill
-                  class="mr-75"
-                  :variant="tagsColor(tag)"
-                >
+              <b-link v-for="(tag, index) in blog.tags" :key="index">
+                <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                   {{ tag }}
                 </b-badge>
               </b-link>
@@ -67,19 +40,13 @@
             </b-card-text>
             <hr>
             <div class="d-flex justify-content-between align-items-center">
-              <b-link :to="{ path: `/pages/blog/${blog.id}#blogComment`}">
+              <b-link :to="{ path: `/pages/blog/${blog.id}#blogComment` }">
                 <div class="d-flex align-items-center text-body">
-                  <feather-icon
-                    icon="MessageSquareIcon"
-                    class="mr-50"
-                  />
+                  <feather-icon icon="MessageSquareIcon" class="mr-50" />
                   <span class="font-weight-bold">{{ kFormatter(blog.comment) }} Comments</span>
                 </div>
               </b-link>
-              <b-link
-                :to="{ name: 'blog-detail', params: { id: blog.id } }"
-                class="font-weight-bold"
-              >
+              <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }" class="font-weight-bold">
                 Read More
               </b-link>
             </div>
@@ -89,26 +56,13 @@
       <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"
-          >
+          <b-pagination v-model="currentPage" align="center" :total-rows="rows" first-number last-number
+            prev-class="prev-item" next-class="next-item">
             <template #prev-text>
-              <feather-icon
-                icon="ChevronLeftIcon"
-                size="18"
-              />
+              <feather-icon icon="ChevronLeftIcon" size="18" />
             </template>
             <template #next-text>
-              <feather-icon
-                icon="ChevronRightIcon"
-                size="18"
-              />
+              <feather-icon icon="ChevronRightIcon" size="18" />
             </template>
           </b-pagination>
         </div>
@@ -118,25 +72,13 @@
     <!--/ blogs -->
 
     <!-- sidebar -->
-    <div
-      slot="sidebar"
-      class="blog-sidebar py-2 py-lg-0"
-    >
+    <div slot="sidebar" class="blog-sidebar py-2 py-lg-0">
       <!-- input search -->
       <b-form-group class="blog-search">
         <b-input-group class="input-group-merge">
-          <b-form-input
-            id="search-input"
-            v-model="search_query"
-            placeholder="Search here"
-          />
-          <b-input-group-append
-            class="cursor-pointer"
-            is-text
-          >
-            <feather-icon
-              icon="SearchIcon"
-            />
+          <b-form-input id="search-input" v-model="search_query" placeholder="Search here" />
+          <b-input-group-append class="cursor-pointer" is-text>
+            <feather-icon icon="SearchIcon" />
           </b-input-group-append>
         </b-input-group>
       </b-form-group>
@@ -147,29 +89,16 @@
         <h6 class="section-label mb-75">
           Recent Posts
         </h6>
-        <b-media
-          v-for="(recentpost,index) in blogSidebar.recentPosts"
-          :key="recentpost.img"
-          no-body
-          :class="index? 'mt-2':''"
-        >
+        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="recentpost.img" no-body
+          :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
-            <b-link :to="{ name: 'blog-detail', params:{ id :recentpost.id } }">
-              <b-img
-                :src="recentpost.img"
-                :alt="recentpost.img.slice(6)"
-                width="100"
-                rounded
-                height="70"
-              />
+            <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }">
+              <b-img :src="recentpost.img" :alt="recentpost.img.slice(6)" width="100" rounded height="70" />
             </b-link>
           </b-media-aside>
           <b-media-body>
             <h6 class="blog-recent-post-title">
-              <b-link
-                :to="{ name: 'blog-detail', params:{ id :recentpost.id } }"
-                class="text-body-heading"
-              >
+              <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }" class="text-body-heading">
                 {{ recentpost.title }}
               </b-link>
             </h6>
@@ -187,22 +116,11 @@
           Categories
         </h6>
 
-        <div
-          v-for="category in blogSidebar.categories"
-          :key="category.icon"
-          class="d-flex justify-content-start align-items-center mb-75"
-        >
+        <div v-for="category in blogSidebar.categories" :key="category.icon"
+          class="d-flex justify-content-start align-items-center mb-75">
           <b-link>
-            <b-avatar
-              rounded
-              size="32"
-              :variant="tagsColor(category.category)"
-              class="mr-75"
-            >
-              <feather-icon
-                :icon="category.icon"
-                size="16"
-              />
+            <b-avatar rounded size="32" :variant="tagsColor(category.category)" class="mr-75">
+              <feather-icon :icon="category.icon" size="16" />
             </b-avatar>
           </b-link>
           <b-link>
@@ -241,6 +159,7 @@ import {
 } from 'bootstrap-vue'
 import { kFormatter } from '@core/utils/filter'
 import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
+import useJwt from '@/auth/jwt/useJwt'
 
 export default {
   components: {
@@ -275,12 +194,41 @@ export default {
     }
   },
   created() {
-    this.$http.get('/blog/list/data').then(res => {
-      this.blogList = res.data
-    })
-    this.$http.get('/blog/list/data/sidebar').then(res => {
-      this.blogSidebar = res.data
-    })
+    this.blogSidebar.recentPosts = [];
+
+    useJwt.getDataset({
+      sql: `SELECT blogs.id, title, content AS excerpt, tags, users.id AS userId, users.name AS userFullName, blogs.created_at AS blogPosted
+      FROM [laravel_kevin].[dbo].[blogs]
+      RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]` })
+      .then(res => {
+        var temp;
+        res.data.forEach(element => {
+          temp = element
+          temp.img = require('@/assets/images/banner/banner-27.jpg')
+          temp.tags = JSON.parse(temp.tags)
+          temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')
+          temp.comment = 2
+
+          this.blogList.push(temp)
+          this.blogSidebar.recentPosts.push({id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted})
+        });
+      })
+
+    this.blogSidebar.categories = [
+      { category: 'Fashion', icon: 'WatchIcon' },
+      { category: 'Food', icon: 'ShoppingCartIcon' },
+      { category: 'Gaming', icon: 'CommandIcon' },
+      { category: 'Quote', icon: 'HashIcon' },
+      { category: 'Video', icon: 'VideoIcon' },
+    ]
+
+
+    // this.$http.get('/blog/list/data').then(res => {
+    //   this.blogList = res.data
+    // })
+    // this.$http.get('/blog/list/data/sidebar').then(res => {
+    //   this.blogSidebar = res.data
+    // })
   },
   methods: {
     kFormatter,

routes/api.php

@@ -52,23 +52,9 @@ Route::middleware('auth:sanctum')->post('/logout', function (Request $request) {
 
 Route::middleware('auth:sanctum')->post('/get_dataset', function (Request $request) {
     $request->validate([
-        'table' => 'required',
-        'order' => 'required',
-        'number' => 'required',
+        'sql' => 'required',
     ]);
 
-    $dataset = DB::select("SELECT TOP ({$request->number}) *  FROM [laravel_kevin].[dbo].[{$request->table}] ORDER BY {$request->order} desc");
-    return $dataset;
-});
-
-Route::middleware('auth:sanctum')->post('/get_messages', function (Request $request) {
-    $request->validate([
-        'number' => 'required',
-    ]);
-
-    $dataset = DB::select("SELECT TOP ({$request->number}) title, content, name, messages.updated_at  
-        FROM [laravel_kevin].[dbo].[messages] 
-        INNER JOIN [dbo].[users] ON [messages].[writer]=[users].[id]
-        ORDER BY updated_at desc");
+    $dataset = DB::select($request->sql);
     return $dataset;
 });