iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

laravel+vue 學習系列 第 16

Day.16 網站後台建立之二 (新增 Model 分類管理)

  • 分享至 

  • xImage
  •  

一、新增 Model 分類

  1. 資料表: pj_datatype_folder
  2. 路由:
    https://ithelp.ithome.com.tw/upload/images/20220921/201281272pkDVnzugn.png
  3. 主要功能: 提供給 admin 選單顯示, 分類各 Model 位置
    • Model 模組內新增欄位 「路由路徑」提供給選單判斷
      https://ithelp.ithome.com.tw/upload/images/20220921/20128127Sbukk8Yg2U.png

    • Model 分類列表畫面
      https://ithelp.ithome.com.tw/upload/images/20220921/20128127Ohp4J1fKUo.png

    • 編輯畫面

      • 新增時 Models 會撈取尚未分類的
      • 修改時會撈取 Models 屬於該分類中的與未分類的
        https://ithelp.ithome.com.tw/upload/images/20220921/201281274jpFKod02d.png
      • 驗證名稱不能重複
          $input = $request->only(['name', 'datatype']);
          $rules = [
              'name' => [
                  'required', 
                  Rule::unique('pj_datatype_folder')->ignore($id), 
                  'max:255'
              ],
              'datatype' => 'required'
          ];
          $validator = Validator::make($input, $rules);
          if($validator->fails()){
              return back()->withErrors($validator)->withInput($input);
          }
      
    • 選單模板調整, 取得設定好的 Models 分類內容

      • 建立 middleware 提供模板 Models 資料
          class GenerateAdminMenu
          {
              public function handle(Request $request, Closure $next)
              {
                  $datatype = app(DataType::class);
                  // 查詢沒有設定為隱藏的 Model
                  // 依照分類 id 排序
                  $data = $datatype->select(['name', 'icon', 'folder_id', 'router_path'])
                          ->where('disabled', '=', '0')->orderByDesc('folder_id')->get();
                  // 整理 Model 按照分類 id 產生陣列
                  $admin_menus = [];
                  foreach($data as $k => $v) {
      
                      $admin_menus[ $v->folder_id ][] = $v;
                  }
      
                  // 將產生得陣列儲存到 admin_menus 給所有模板使用
                  View::share('admin_menus', $admin_menus);
                  return $next($request);
              }
          }
      
      • 設定 middleware 到路由內
          // app/Http/Kernel.php
          // 設定路由 middleware
          protected $routeMiddleware = [
              // ... 其他省略
              'admin.menu' => \App\Http\Middleware\GenerateAdminMenu::class
          ];
      
          // routes/web.php
          // 添加 middleware 到 group 中
          Route::group(['prefix' => 'adm', 'middleware' => ['admin.menu']], 
              function(){   
                  // ... 內容省略
          });
      
      • 調整 sidebar.blade.php 模板
          <ul class="menu-inner py-1">
              {{-- 執行分類陣列 --}}
              @foreach ( $admin_menus as $folder )
                  {{-- 執行分類下 Models 陣列 --}}
                  @foreach( $folder as $menu )
                      {{-- 當為陣列中第一個時顯示分類名稱 --}}
                      @if($loop->first)
                          <li class="menu-header small text-uppercase">
                              <span class="menu-header-text">
                              @if($menu->folder_id!='0')                             
                                  {{ $menu->folder->name }}
                              @else 
                                  未定義 
                              @endif
                              </span>
                          </li>
                      @endif
      
                      {{-- 顯示 Model 連結並判斷是否為當下路徑 --}}
                      <li class="menu-item 
                          {{ request()->is($menu->router_path.'/*') || 
                          request()->is($menu->router_path) ? 'active' : '' }}"
                      >
                          <a href="{{ url($menu->router_path) }}" class="menu-link">
                              <i class="menu-icon tf-icons bx {{ $menu->icon }}"></i>
                              <div data-i18n="Analytics">{{ $menu->name }}</div>
                          </a>
                      </li>
                  @endforeach
              @endforeach
         </ul>
      

      https://ithelp.ithome.com.tw/upload/images/20220921/20128127K5OrGXjzRu.png

    • 調整顯示: e.g. 隱藏商品 Model
      https://ithelp.ithome.com.tw/upload/images/20220921/20128127FXc1mNFWrv.png

github 進版
剩下的天繼續...


上一篇
Day.15 網站後台建立之一 (基本頁面、js 套件)
下一篇
Day.17 網站後台建立之三 (與儲存與取回 Storage)
系列文
laravel+vue 學習32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言