>[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也要在代码末尾添加以上代码！！！