##目錄結構 ``` 視圖文件夾 ├── edit.html // 添加 (add)、編輯 (edit) 公共模板文件 ├── form.html // 表單模板搜索，用于首頁 (index) 和回收站 (recycleBin) ├── index.html // 首頁 (index) 模板文件 ├── recyclebin.html // 回收站 (recycleBin) 模板文件，請注意文件名全部小心 ├── td.html // 首頁 (index) 和回收站 (recycleBin) 表格 tbody 部分單元 └── th.html // 首頁 (index) 和回收站 (recycleBin) 表格 thead 部分表頭 ``` ##公共基礎模板 為了便于管理，除首頁和登錄頁面外，其他頁面全部繼承的的公共模板 `(view/template/base.html)`，對相應部分設置區塊 ( block 標簽)，子模板對父模板中的區塊進行重寫就可以了，很多頁面也用到了 include 標簽，對文件進行引入，提高代碼利用率 ##主要區塊 * style 書寫 css 代碼和引入 css 文件 * title 網站標題，默認值為 `extra/site.php` 配置文件里的 title * nav 導航區域，主要設置面包屑導航和刷新按鈕，默認只有刷新按鈕 * content 主內容區，請參考 template 里的 index、edit 兩個模板文件的用法 * script javascript 腳本引入和書寫區塊 ##其他模板 * edit.html 編輯頁示例模板，添加和編輯操作都使用這個模板文件，在其他頁面直接拷貝此模板進行編輯、修改即可 * index.html 首頁示例模板，默認引入五項菜單 (add、forbid、resume、delete、recyclebin) * nav_left.html 管理后臺首頁左側懸浮查詢的下拉菜單，如果需要請到模板中注釋掉代碼 * nav_menu.html 管理后臺首頁導航菜單，根據權限進行顯示 * recyclebin.html 回收站模板 * recyclebin_menu.html 回收站菜單模板，包括還原 (recycle)、永久刪除 (deleteForever)、清空回收站 (clear)，在回收站頁使用 include 標簽引入，例如： ~~~ // 引入所有三個菜單 {include file="template/recyclebin_menu" /} // 只包含還原和永久刪除菜單，多個菜單以英文逗號隔開 {include file="template/recyclebin_menu" menu="recycle,deleteForever" /} ~~~ * table_menu 首頁菜單模板，包括添加(add)、禁用(forbid)、恢復(resume)、刪除(delete)、回收站(recyclebin)五個菜單，在首頁使用include標簽引入，例如： ~~~ // 引入所有五個菜單 {include file="template/table_menu" /} // 只包含添加、恢復、刪除菜單，多個菜單以英文逗號隔開 {include file="template/table_menu" menu="add,resume,delete" /} ~~~ ##變量 由于ThinkPHP5的報錯級別很高，在模板中未定義變量都會拋出致命錯誤，而本管理后臺添加和編輯方法共用一個模板，添加時會遇到變量未定義的錯誤，為了安全，頁面中所有的變量都推薦使用如下方式使用： ~~~ // 默認值設置空 {$vo.name ?? ''} // 等效于 {:isset($vo.name)?$vo.name:''} // 默認值設置為tianpian {$vo.name ?? 'tianpian'} // 等效于 {:isset($vo.name)?$vo.name:'tianpian'} ~~~ 對于下拉框和單選復選按鈕的選中狀態請使用js方法： ~~~ // 單選框 (radio) 賦值，name=status 的單選框，在有 $vo.status 值時將對應的單選框設置為選中，否則默認讓值為 1 的選中 $("[name='status'][value='{$vo.status ?? '1'}']").attr("checked",true); // 下拉框賦值，默認讓 option 值 value=1 的選項選中 $("[name='type']").find("[value='{$vo.type ?? '1'}']").attr("selected",true); // 復選框賦值 var checks = '{$checks ?? ""}'.split(","); if (checks.length > 0){ for (var i in checks){ $("[data-node='"+checks[i]+"']").attr("checked",true); } } ~~~