>[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="添加"> 添加</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"> 啟用</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"> 禁用</a>
<a data-href="{:url('del')}" class="layui-btn layui-btn-primary hisi-table-ajax confirm layui-icon layui-icon-close red"> 刪除</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也要在代碼末尾添加以上代碼!!!
- 序言
- 環境配置
- 下載及安裝
- 目錄結構
- 系統配置
- 多語言
- 命令行(pro版)
- 自動生成模塊或插件(build)
- 生成模塊
- 生成插件
- 自動生成增刪改查(crud)
- 第一步:創建數據表
- 第二步:使用crud指令生成
- 自動生成類庫文件(make)
- 生成控制器文件(make:controller)
- 生成模型文件(make:model)
- 生成邏輯文件(make:logic)
- 生成服務文件(make:service)
- 生成驗證器文件(make:validate)
- 構建器(pro版)
- 表單構建器(form)
- 表單屬性設置
- 添加表單項
- 文本框(text)
- 隱藏域(hidden)
- 密碼框(password)
- 文本域(textarea)
- 單文件(file)
- 多文件(files)
- 單圖(image)
- 多圖(images)
- 開關(switch)
- 單選(radio)
- 多選(checkbox)
- 下拉框(select)
- 標簽(tag)
- 日期時間(datetime)
- 顏色選擇器(color)
- 富文本編輯器(editor)
- 滑塊(slider)
- 評分(rate)
- 穿梭框(transfer)
- 進度條(progress)
- 樹形(tree)
- 聯動(linkage)
- 自定義html(html)
- 分隔線(line)
- 文字(txt)
- 下拉框增強版(select+)
- 數據表格(table)
- 添加表單分組(group)
- 柵格布局(grid)
- 觸發器(trigger)
- 通用上傳方法
- 表格構建器(table)
- 表格基礎配置
- 添加表頭工具欄
- 添加表格篩選
- 頁面提示(pageTips)
- 引入 JS 文件
- 引入 CSS 文件
- 渲染額外 JS 代碼
- 渲染額外 CSS 代碼
- 模塊開發
- 1.生成模塊
- 2.創建菜單
- 3.創建控制器
- 后臺通用方法
- 插件開發
- 1.新建插件
- 2.插件配置
- 3.插件控制器
- 4.插件模板
- 5.插件鉤子
- 模板替換變量
- 公共函數庫
- 后臺通用JS方法
- 常見問題
- 官方模塊
- CMS內容管理模塊
- 目錄結構
- 模板標簽
- API接口
- 欄目頁/內容頁
- 小程序發布
- 官方插件
- 第三方登錄
- excel插件
- 萬能采集
- 采集規則
- 采集內容