新增 blog image 到資料庫

app/Http/Controllers/BlogImageController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\BlogImage;
+use Illuminate\Http\Request;
+
+class BlogImageController 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\BlogImage  $blogImage
+     * @return \Illuminate\Http\Response
+     */
+    public function show(BlogImage $blogImage)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Models\BlogImage  $blogImage
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(BlogImage $blogImage)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\BlogImage  $blogImage
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, BlogImage $blogImage)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\BlogImage  $blogImage
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(BlogImage $blogImage)
+    {
+        //
+    }
+}

app/Models/BlogImage.php

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

database/factories/BlogFactory.php

@@ -20,7 +20,7 @@ class BlogFactory extends Factory
         return [
             'title' => $this->faker->realText($maxNbChars = 20, $indexSize = 2),
             'content' => $this->faker->realText($maxNbChars = 200, $indexSize = 2),
-            'tags' => json_encode(['Gaming', 'Video', 'Fashion', 'Test']),
+            'tags' => json_encode(['Gaming', 'Video', 'Fashion']),
             'writer' => $this->faker->randomElement(User::query()->get('id')),
             'bookmarked' => rand(0,10000),
         ];

database/migrations/2022_12_19_151815_create_blog_images_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('blog_images', function (Blueprint $table) {
+            $table->id();
+            $table->integer('blogId');
+            $table->string('path');
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('blog_images');
+    }
+};

resources/js/src/navigation/vertical/index.js

@@ -40,6 +40,11 @@ export default [
         route: { name: 'blog-edit', params: { id: 1 } },
         group: 'visited',
       },
+      {
+        title: 'Publish',
+        route: { name: 'blog-publish' },
+        group: 'visited',
+      },
     ],
   },
   {

resources/js/src/router/index.js

@@ -66,14 +66,8 @@ const router = new VueRouter({
         pageTitle: 'Blog List',
         group: 'visited',
         breadcrumb: [
-          {
-            text: 'Pages',
-          },
           {
             text: 'Blog',
-          },
-          {
-            text: 'List',
             active: true,
           },
         ],
@@ -87,11 +81,9 @@ const router = new VueRouter({
         pageTitle: 'Blog Detail',
         group: 'visited',
         breadcrumb: [
-          {
-            text: 'Pages',
-          },
           {
             text: 'Blog',
+            to: '/blog/list',
           },
           {
             text: 'Detail',
@@ -109,13 +101,30 @@ const router = new VueRouter({
         group: 'visited',
         breadcrumb: [
           {
-            text: 'Pages',
+            text: 'Blog',
+            to: '/blog/list',
+          },
+          {
+            text: 'Edit',
+            active: true,
           },
+        ],
+      },
+    },
+    {
+      path: '/blog/publish',
+      name: 'blog-publish',
+      component: () => import('@/views/blog/BlogEdit.vue'),
+      meta: {
+        pageTitle: 'Blog Publish',
+        group: 'visited',
+        breadcrumb: [
           {
             text: 'Blog',
+            to: '/blog/list',
           },
           {
-            text: 'Edit',
+            text: 'Publish',
             active: true,
           },
         ],

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

@@ -6,7 +6,7 @@
       <b-row>
         <!-- blogs -->
         <b-col cols="12">
-          <b-card :img-src="defaultsImg(blogId)" img-top img-alt="Blog Detail Pic" :title="blogDetail.blog.title">
+          <b-card :img-src="getImg(blogDetail.blog.path)" 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)" />
@@ -21,7 +21,7 @@
               </b-media-body>
             </b-media>
             <div class="my-1 py-25">
-              <b-link v-for="tag in JSON.parse(blogDetail.blog.tags)" :key="tag">
+              <b-link v-for="tag in blogDetail.blog.tags" :key="tag">
                 <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                   {{ tag }}
                 </b-badge>
@@ -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(recentpost.id)" :alt="defaultsImg(recentpost.id).slice(6)" width="100" rounded height="70"/>
+              <b-img :src="getImg(recentpost.path)" :alt="getImg(recentpost.path).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(blogId) {
-      return require('@/assets/images/banner/banner-' + blogId + '.jpg')
+    getImg(imagePath) {
+      return require('@/assets/images/' + imagePath)
     },
     postComment() {
       useJwt.getPost('/api/comment/post', {

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

@@ -1,24 +1,15 @@
 <template>
-  <b-card
-    v-if="Object.keys(blogEdit).length"
-    class="blog-edit-wrapper"
-  >
+  <b-card v-if="Object.keys(blogEdit).length" class="blog-edit-wrapper">
     <!-- media -->
-    <b-media
-      no-body
-      vertical-align="center"
-    >
+    <b-media no-body vertical-align="center">
       <b-media-aside class="mr-75">
-        <b-avatar
-          size="38"
-          :src="blogEdit.avatar"
-        />
+        <b-avatar size="38" :src="getUserAvatar(blogEdit.userId)" />
       </b-media-aside>
       <b-media-body>
         <h6 class="mb-25">
           {{ blogEdit.userFullName }}
         </h6>
-        <b-card-text>{{ blogEdit.createdTime }}</b-card-text>
+        <b-card-text>{{ dateFormat(blogEdit.createdTime) }}</b-card-text>
       </b-media-body>
     </b-media>
     <!--/ media -->
@@ -27,92 +18,30 @@
     <b-form class="mt-2">
       <b-row>
         <b-col md="6">
-          <b-form-group
-            label="Title"
-            label-for="blog-edit-title"
-            class="mb-2"
-          >
-            <b-form-input
-              id="blog-edit-title"
-              v-model="blogEdit.blogTitle"
-            />
+          <b-form-group label="Title" label-for="blog-edit-title" class="mb-2">
+            <b-form-input id="blog-edit-title" v-model="blogEdit.blogTitle" />
           </b-form-group>
         </b-col>
         <b-col md="6">
-          <b-form-group
-            label="Category"
-            label-for="blog-edit-category"
-            class="mb-2"
-          >
-            <v-select
-              id="blog-edit-category"
-              v-model="blogEdit.blogCategories"
-              :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
-              multiple
-              :options="categoryOption"
-            />
-          </b-form-group>
-        </b-col>
-        <b-col md="6">
-          <b-form-group
-            label="Slug"
-            label-for="blog-edit-slug"
-            class="mb-2"
-          >
-            <b-form-input
-              id="blog-edit-slug"
-              v-model="blogEdit.slug"
-            />
-          </b-form-group>
-        </b-col>
-        <b-col md="6">
-          <b-form-group
-            label="Status"
-            label-for="blog-edit-category"
-            class="mb-2"
-          >
-            <v-select
-              id="blog-edit-category"
-              v-model="blogEdit.status"
-              :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
-              :options="statusOption"
-            />
+          <b-form-group label="Category" label-for="blog-edit-category" class="mb-2">
+            <v-select id="blog-edit-category" v-model="blogEdit.blogCategories"
+              :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'" multiple :options="categoryOption" />
           </b-form-group>
         </b-col>
         <b-col cols="12">
-          <b-form-group
-            label="Content"
-            label-for="blog-content"
-            class="mb-2"
-          >
-            <quill-editor
-              id="blog-content"
-              v-model="blogEdit.excerpt"
-              :options="snowOption"
-            />
+          <b-form-group label="Content" label-for="blog-content" class="mb-2">
+            <quill-editor id="blog-content" v-model="blogEdit.excerpt" :options="snowOption" />
           </b-form-group>
         </b-col>
-        <b-col
-          cols="12"
-          class="mb-2"
-        >
+        <b-col cols="12" class="mb-2">
           <div class="border rounded p-2">
             <h4 class="mb-1">
               Featured Image
             </h4>
-            <b-media
-              no-body
-              vertical-align="center"
-              class="flex-column flex-md-row"
-            >
+            <b-media no-body vertical-align="center" class="flex-column flex-md-row">
               <b-media-aside>
-                <b-img
-                  ref="refPreviewEl"
-                  :src="blogEdit.featuredImage"
-                  height="110"
-                  width="170"
-                  class="rounded mr-2 mb-1 mb-md-0"
-                />
+                <b-img ref="refPreviewEl" :src="blogEdit.featuredImage" height="110" width="170"
+                  class="rounded mr-2 mb-1 mb-md-0" />
               </b-media-aside>
               <b-media-body>
                 <small class="text-muted">Required image resolution 800x400, image size 10mb.</small>
@@ -122,35 +51,22 @@
                   </b-link>
                 </b-card-text>
                 <div class="d-inline-block">
-                  <b-form-file
-                    ref="refInputEl"
-                    v-model="blogFile"
-                    accept=".jpg, .png, .gif"
-                    placeholder="Choose file"
-                    @input="inputImageRenderer"
-                  />
+                  <b-form-file ref="refInputEl" v-model="blogFile" accept=".jpg, .png, .gif" placeholder="Choose file"
+                    @input="inputImageRenderer" />
                 </div>
               </b-media-body>
             </b-media>
           </div>
         </b-col>
-        <b-col
-          cols="12"
-          class="mt-50"
-        >
-          <b-button
-            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-            variant="primary"
-            class="mr-1"
-          >
+        <b-col cols="12" class="mt-50">
+          <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="mr-1" @click="saveChanges">
             Save Changes
           </b-button>
-          <b-button
-            v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-            variant="outline-secondary"
-          >
-            Cancel
-          </b-button>
+          <b-link :to="{ name: 'blog-detail', params: { id: blogId } }">
+            <b-button v-ripple.400="'rgba(186, 191, 199, 0.15)'" variant="outline-secondary">
+              Cancel
+            </b-button>
+          </b-link>
         </b-col>
       </b-row>
     </b-form>
@@ -181,6 +97,10 @@ import { quillEditor } from 'vue-quill-editor'
 import Ripple from 'vue-ripple-directive'
 import { useInputImageRenderer } from '@core/comp-functions/forms/form-utils'
 import { ref } from '@vue/composition-api'
+import { getUserData } from '@/auth/utils';
+import useJwt from '@/auth/jwt/useJwt'
+import { format } from 'date-fns'
+import { zhTW } from 'date-fns/locale'
 
 export default {
   components: {
@@ -207,6 +127,7 @@ export default {
   },
   data() {
     return {
+      blogId: this.$route.params.id,
       blogEdit: {},
       blogFile: null,
       categoryOption: ['Fashion', 'Food', 'Gaming', 'Quote', 'Video'],
@@ -214,10 +135,11 @@ export default {
       snowOption: {
         theme: 'snow',
       },
+      userData: getUserData(),
     }
   },
   created() {
-    this.$http.get('/blog/list/data/edit').then(res => {
+    useJwt.getPost('/api/get_blog/edit', { blogId: this.blogId }).then(res => {
       this.blogEdit = res.data
     })
   },
@@ -235,6 +157,17 @@ export default {
       inputImageRenderer,
     }
   },
+  methods: {
+    dateFormat(date) {
+      return format(new Date(date), 'yyyy-MM-dd hh:mm', { locale: zhTW })
+    },
+    getUserAvatar(userId) {
+      return require('@/assets/images/avatars/' + userId + '-small.png')
+    },
+    saveChanges() {
+      console.log(this.blogEdit.excerpt)
+    }
+  },
 }
 </script>
 

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(blog.id)" :alt="defaultsImg(blog.id).slice(5)" class="card-img-top" />
+              <b-img :src="getImg(blog.path)" :alt="getImg(blog.path).slice(5)" class="card-img-top" />
             </b-link>
             <b-card-body>
               <b-card-title>
@@ -30,7 +30,7 @@
                 </b-media-body>
               </b-media>
               <div class="my-1 py-25">
-                <b-link v-for="(tag, index) in JSON.parse(blog.tags)" :key="index">
+                <b-link v-for="(tag, index) in blog.tags" :key="index">
                   <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                     {{ tag }}
                   </b-badge>
@@ -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(blog.id)" :alt="defaultsImg(blog.id).slice(5)" class="card-img-top" />
+              <b-img :src="getImg(blog.path)" :alt="getImg(blog.path).slice(5)" class="card-img-top" />
             </b-link>
             <b-card-body>
               <b-card-title>
@@ -82,7 +82,7 @@
                 </b-media-body>
               </b-media>
               <div class="my-1 py-25">
-                <b-link v-for="(tag, index) in JSON.parse(blog.tags)" :key="index">
+                <b-link v-for="(tag, index) in blog.tags" :key="index">
                   <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                     {{ tag }}
                   </b-badge>
@@ -147,7 +147,7 @@
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }">
-              <b-img :src="defaultsImg(recentpost.id)" :alt="defaultsImg(recentpost.id).slice(6)" width="100" rounded
+              <b-img :src="getImg(recentpost.path)" :alt="getImg(recentpost.path).slice(6)" width="100" rounded
                 height="70" />
             </b-link>
           </b-media-aside>
@@ -279,11 +279,8 @@ export default {
     getUserAvatar(userId) {
       return require('@/assets/images/avatars/' + userId + '-small.png')
     },
-    defaultsImg(blogID) {
-      return require('@/assets/images/banner/banner-' + blogID + '.jpg')
-    },
-    showPage() {
-      console.log(this.currentPage);
+    getImg(imagePath) {
+      return require('@/assets/images/' + imagePath)
     },
     getBlogListPerpage() {
       useJwt.getPost('/api/get_blog/list/perpage', { offset: ((this.currentPage - 1) * this.perPage), rows: this.perPage }).then(res => {

routes/api.php

@@ -10,6 +10,7 @@ use App\Models\User;
 use App\Models\Message;
 use App\Models\Blog;
 use App\Models\Comment;
+use App\Models\BlogImage;
 
 /*
 |--------------------------------------------------------------------------
@@ -84,17 +85,23 @@ Route::middleware('auth:sanctum')->post('/get_blog/list', function (Request $req
             blogs.id, 
             title, 
             content AS excerpt, 
-            tags, users.id AS userId, 
+            tags, 
+            users.id AS userId, 
             users.name AS userFullName, 
             blogs.created_at AS blogPosted, 
-            t.total AS comment
+            t.total AS comment,
+            path
         FROM [laravel_kevin].[dbo].[blogs]
-        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT 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]
+        LEFT JOIN [dbo].[blog_images] ON [blogs].[id] = [blog_images].[blogId]
         ORDER BY blogs.id DESC");
+    foreach($blogList as $blog) {
+        $blog->tags = json_decode($blog->tags);
+    }
 
     return $blogList;
 });
@@ -108,19 +115,25 @@ Route::middleware('auth:sanctum')->post('/get_blog/list/perpage', function (Requ
             blogs.id, 
             title, 
             content AS excerpt, 
-            tags, users.id AS userId, 
+            tags, 
+            users.id AS userId, 
             users.name AS userFullName, 
             blogs.created_at AS blogPosted, 
-            t.total AS comment
+            t.total AS comment,
+            path
         FROM [laravel_kevin].[dbo].[blogs]
-        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT 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]
+        LEFT JOIN [dbo].[blog_images] ON [blogs].[id] = [blog_images].[blogId]
         ORDER BY blogs.id DESC
         OFFSET " . $request->offset . " ROW
         FETCH NEXT " . $request->rows . " ROWS ONLY");
+    foreach($blogList as $blog) {
+        $blog->tags = json_decode($blog->tags);
+    }
 
     return $blogList;
 });
@@ -144,14 +157,17 @@ Route::middleware('auth:sanctum')->post('/get_blog/detail', function (Request $r
             users.name AS userFullName, 
             blogs.created_at AS createdTime, 
             bookmarked, 
-            t.total AS comments
+            t.total AS comments,
+            path
         FROM [laravel_kevin].[dbo].[blogs]
-        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT 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]
+        LEFT JOIN [dbo].[blog_images] ON [blogs].[id] = [blog_images].[blogId]
         WHERE blogs.id=" . $request->blogId);
+    $blog[0]->tags = json_decode($blog[0]->tags);
 
     $comments = DB::select("SELECT comment AS commentText, comments.created_at AS commentedAt, users.id AS userId, users.name AS userFullName
         FROM [laravel_kevin].[dbo].[comments]
@@ -161,13 +177,19 @@ 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 TOP(4) blogs.id, title, blogs.created_at AS createdTime, t.total AS comments
+    $recentPosts = DB::select("SELECT TOP(4) 
+            blogs.id, 
+            title, 
+            blogs.created_at AS createdTime, 
+            t.total AS comments, 
+            path
         FROM [laravel_kevin].[dbo].[blogs]
-        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        LEFT 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]
+        LEFT JOIN [dbo].[blog_images] ON [blogs].[id] = [blog_images].[blogId]
         ORDER BY comments DESC");
 
     $categories = [
@@ -180,3 +202,50 @@ Route::middleware('auth:sanctum')->post('/get_blog/sidebar', function (Request $
 
     return ['recentPosts' => $recentPosts, 'categories' => $categories];
 });
+
+Route::middleware('auth:sanctum')->post('/get_blog/edit', function (Request $request) {
+    $request->validate([
+        'blogId' => 'required',
+    ]);
+    $data = DB::select("SELECT 
+            title AS blogTitle,
+            content AS excerpt,
+            tags AS blogCategories,
+            users.id AS userId,
+            users.name AS userFullName,
+            blogs.created_at AS createdTime
+        FROM [laravel_kevin].[dbo].[blogs]
+        RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+        WHERE blogs.id=" . $request->blogId);
+    $data[0]->blogCategories = json_decode($data[0]->blogCategories);
+
+    return $data[0];
+});
+
+Route::middleware('auth:sanctum')->post('/get_blog/image_insert', function (Request $request) {
+    $request->validate([
+        'blogId' => 'required',
+        'path' => 'required',
+        'name' => 'required',
+    ]);
+
+    BlogImage::insert([
+        'blogId' => $request->blogId,
+        'path' => $request->path,
+        'name' => $request->name,
+        'created_at' => now(),
+        'updated_at' => now(),
+    ]);
+
+    // for ( $i=$request->blogId ; $i<11 ; $i++ ) {
+    //     BlogImage::insert([
+    //         'blogId' => $i,
+    //         'path' => 'banner/banner-'.$i.'.jpg',
+    //         'name' => 'banner-'.$i,
+    //         'created_at' => now(),
+    //         'updated_at' => now(),
+    //     ]);
+    // }
+
+    return 'success';
+});