##目录结构 ``` 视图文件夹 ├── 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); } } ~~~