一、使用版型

後台版型網址 https://www.npmjs.com/package/sneat-bootstrap-html-admin-template-free

二、目標

• 先處理靜態頁面
• 上方 header 和側邊 sidebar 共用區域
• 首頁資訊區塊
• 商品列表、編輯頁面
• 文章列表、編輯頁面

三、預先處理版型 JS 與 CSS

• 下載後先用前端打包工具產生 js、css 相關檔案
• Laravel 專案下, 建立 admin/assets 目錄將相關檔案放到此目錄
  
• 使用 mix 複製檔案

    // mix 將 resource 目錄複製到 pbulic
    mix.copyDirectory('resources/admin', 'public/admin').version();

• 使用 version() 後產生 mix-mainifest.json, 可在模板中使用 mix() 方法引用資源
  

四、後台首頁

• 後台首頁
  • 路由 : /adm
  • HTTP Mehtod : GET
  • Contorller : APP\Http\Controllers\AdminController@index

    Route::get(
        '/', 
        ['App\Http\Controllers\AdminController', 'index']
    )->name('admin.index');

五、專案目前的路由表

六、商品列表與編輯

• 商品列表頁

  • 路由 : /adm/product
  • HTTP Mehtod : GET
  • Contorller : APP\Http\Controllers\ProductController@index
    

• 商品編輯頁

  • 路由 : /adm/product/create
  • HTTP Mehtod : GET
  • Contorller : APP\Http\Controllers\ProductController@create
    

七、文章列表與編輯

• 文章列表頁

  • 路由 : /adm/article
  • HTTP Mehtod : GET
  • Contorller : APP\Http\Controllers\ArticleController@index
    

• 文章編輯頁

  • 路由 : /adm/create
  • HTTP Mehtod : GET
  • Contorller : APP\Http\Controllers\ArticleController@create
    

GitHub 進版