>[info]HisiPHP的模塊控制器分為前臺控制器`application/test/home`和后臺控制器`application/test/admin`。 >[danger] 以下所有示例講解均在test模塊下面進行。 ## 創建后臺控制器 在上一章節我們創建了一個文章列表菜單`test/article/index`，現在我們根據這個菜單地址來創建對應的控制器和方法。 文件路徑：/application/test/admin/Article.php 控制器代碼： ``` <?php namespace app\test\admin; use app\system\admin\Admin; class Article extends Admin { protected $hisiModel = '';//模型名稱[通用添加、修改專用] protected $hisiTable = '';//表名稱[通用添加、修改專用] protected $hisiAddScene = '';//添加數據驗證場景名 protected $hisiEditScene = '';//更新數據驗證場景名 public function index() { if ($this->request->isAjax()) { $data['data'] = []; $data['count'] = 0; $data['code'] = 0; return json($data); } return $this->fetch(); } } ``` >[danger]后臺控制器必須繼承`app\system\admin\Admin` ## 創建后臺模板 HisiPHP后臺UI框架使用的是Layui(http://www.layui.com)，所以我們使用layui來創建示例模板。 模板文件路徑：/application/test/view/article/index.html ``` <div class="page-toolbar"> <div class="page-filter fr"> <form class="layui-form layui-form-pane" action="{:url()}" method="get" id="hisi-table-search"> <div class="layui-form-item"> <label class="layui-form-label">搜索</label> <div class="layui-input-inline"> <input type="text" name="keyword" lay-verify="required" placeholder="輸入關鍵詞，按回車搜索" class="layui-input"> </div> </div> </form> </div> <div class="layui-btn-group fl"> <a href="{:url('add')}" hisi-data="{width: '470px', height: '300px'}" class="layui-btn layui-btn-primary layui-icon layui-icon-add-circle-fine hisi-iframe" title="添加">&nbsp;添加</a> <a data-href="{:url('status?val=1')}" class="layui-btn layui-btn-primary hisi-table-ajax layui-icon layui-icon-play" data-table="dataTable">&nbsp;啟用</a> <a data-href="{:url('status?val=0')}" class="layui-btn layui-btn-primary hisi-table-ajax layui-icon layui-icon-pause" data-table="dataTable">&nbsp;禁用</a> <a data-href="{:url('del')}" class="layui-btn layui-btn-primary hisi-table-ajax confirm layui-icon layui-icon-close red">&nbsp;刪除</a> </div> </div> <table id="dataTable"></table> {include file="system@block/layui" /} <script type="text/html" id="statusTpl"> <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="正常|關閉" {{ d.status == 1 ? 'checked' : '' }} {{ d.system == 1 ? 'disabled' : '' }} data-href="{:url('status')}?id={{ d.id }}"> </script> <script type="text/html" title="操作按鈕模板" id="buttonTpl"> <a href="{:url('edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe" title="修改" hisi-data="{width: '470px', height: '300px'}">修改</a><a href="{:url('del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger hisi-tr-del">刪除</a> </script> <script type="text/javascript"> layui.use(['table'], function() { var table = layui.table; table.render({ elem: '#dataTable' ,url: '{:url()}' //數據接口 ,page: true //開啟分頁 ,skin: 'row' ,even: true ,limit: 20 ,text: { none : '暫無相關數據' } ,cols: [[ //表頭 {type:'checkbox'} ,{field: 'name', title: '標題'} ,{field: 'intro', title: '作者'} ,{field: 'status', title: '狀態', width: 100, templet: '#statusTpl'} ,{title: '操作', width: 120, templet: '#buttonTpl'} ]] }); }); </script> ``` 渲染后的效果如下：  >[danger]后臺模板必須在調用layui之前，加入如下代碼： >{include file="system@block/layui" /} >！！！如果你的模板沒有用到layui也要在代碼末尾添加以上代碼！！！