這個是永康社大的作品,也歡迎大家來上課或購買
https://laihao.vaserver.com/admin/good_design
這是含有前端+資料庫+後端
當然也有 route的地方
因為怕大家動到CRUD 所以只有解釋 截圖畫面的部分,就是沒有連結
這個也有另一個列表樣式,
因為怕大家動到CRUD所以先反灰,
不過大家還是可以看到原始的按鈕的樣子
https://laihao.vaserver.com/admin/products
基本結構與命名空間
使用 namespace App\Http\Controllers\Admin; 表示這是後台管理相關的控制器。
引入必要的類別:Request、Product 模型、Controller 基底類別、通知類別 ProductDelivery、Excel 匯入類別 ProductsImport 等。
index:傳統分頁產品列表
計算總產品數 $productCount = Product::count();。
設定每頁顯示 10 筆,並手動計算總頁數與當前頁數。
使用 offset/limit 做手動分頁查詢:
Product::orderBy('created_at','desc')->offset(...)->limit(...)->get();。
回傳視圖 admin.products.index,帶入 $products、總數與總頁數。
注意:這裡沒有使用 Laravel 內建的 paginate(),而是手動分頁,較不推薦(容易出錯且缺少分頁連結輔助)。
uploadImage:上傳產品圖片
驗證請求:
product_id 必須存在且為整數。
product_image 必須是圖片且最大 2MB。
找到對應產品:Product::findOrFail($request->product_id);。
將上傳的圖片存到 storage/app/public/images(store('images', 'public'))。
建立新的 Image 模型記錄(關聯到產品),而不是直接更新 products 表:
$product->images()->create([...]);。
重導回上一頁並顯示成功訊息「圖片上傳成功」。
這表示系統採用「產品 → 多張圖片」的關聯設計(images 資料表透過 attachable_type / attachable_id 做多態關聯)。
import:Excel 匯入產品
取得上傳的 Excel 檔案 $request->file('excel')。
使用 Maatwebsite\Excel 套件執行匯入:Excel::import(new ProductsImport, $file);。
匯入完成後重導回上一頁。
實際欄位對應與邏輯在 ProductsImport 類別中定義。
indexCard:卡片式產品列表(後台)
使用 Laravel 內建分頁:paginate(12),每頁 12 筆。
預先載入圖片關聯:with('images') 避免 N+1 查詢。
回傳視圖 admin.products.index-card,並帶入 readonly => false 表示可編輯。
edit / update:編輯產品
edit($id)
找到產品並載入圖片:Product::with('images')->findOrFail($id);。
回傳編輯表單視圖 admin.products.edit。
update(Request $request, $id)
驗證欄位:
title 必填、最多 255 字。
content 可選。
price 必填、數字、≥0。
quantity 必填、整數、≥0。
自訂錯誤訊息(中文):例如「標題為必填」、「價格必須為數字」等。
更新產品資料:$product->update([...]);。
更新成功後重導到卡片列表路由 admin.products.card,並帶入成功訊息。
deleteImage:刪除產品圖片(AJAX)
找到圖片記錄:\App\Models\Image::findOrFail($id);。
刪除實體檔案:
組合路徑 storage_path('app/public/' . $image->path)。
若檔案存在則 unlink($filePath);。
刪除資料庫記錄:$image->delete();。
回傳 JSON:['success' => true],方便前端用 AJAX 呼叫。
create / store:新增產品
create()
直接回傳新增表單視圖 admin.products.create。
store(Request $request)
驗證規則與 update 幾乎相同(標題、價格、數量等)。
建立新產品:Product::create([...]);。
建立成功後重導到卡片列表並顯示「產品新增成功!」。
goodDesign:唯讀展示頁
與 indexCard 類似,使用 paginate(12) 並載入圖片。
回傳同樣的視圖 admin.products.index-card,但帶入 readonly => true。
用途:提供一個只讀的產品展示頁面(例如給特定角色或特定用途的展示)。
整體架構特點
採用典型的 Laravel MVC 結構:控制器 → 模型 → 視圖。
產品與圖片為一對多(或多態)關聯,圖片獨立存在 images 表。
支援:
列表(傳統分頁 + 卡片式分頁)
新增 / 編輯 / 更新
圖片上傳與刪除
Excel 批量匯入
唯讀展示頁
多處使用中文錯誤訊息與成功訊息,符合繁體中文介面需求。
明天就是CRUD的截圖說明~