Yii2項目實戰-如何自定義後臺的模版主題
首先增加我們自定義的 gii 模版文件：
1、拷貝gii默認的模版文件 vendor\yiisoft\yii2-gii\generators\crud\default 到 backend\components\crud(advance 版) / components\crud(basic 版)，注意這裏的 components 都是我們自定義的
2、打開backend\config\main-local.php(advance 版) / config\web.php(basic 版) 按照下面的樣子對gii進行配置
$config['modules']['gii'] = [
'class' => 'yii\gii\Module',
'allowedIPs' => ['127.0.0.1', '::1'],
'generators' => [
'crud' => [
'class' => 'yii\gii\generators\crud\Generator',
'templates' => [
'crud' => '@app/components/crud/default',
]
]
],
];
如上，我們配置了一套新的模板，叫 crud， 下面我們就可以把模板文件修改爲自己喜歡的任意風格啦。
修改模板文件
advance 版
修改 index 文件
兩種版本演示使用不用的模板,advance 版本使用 modal, basic 版本基於 layui
1、打開components\crud\default\views\index.php 在第 17行的位置，增加
use yii\bootstrap\Modal;
use yii\helpers\Url;
2、修改create按鈕爲
<p>
<?= "<?= " ?>Html::a(<?= $generator->generateString('Create ' . Inflector::camel2words(StringHelper::basename($generator->modelClass))) ?>, ['create'], [
'class' => 'btn btn-success',
'id' => 'create',
'data-toggle' => 'modal',
'data-target' => '#operate-modal',
]) ?>
</p>
3、修改gridview的操作按鈕爲，72行的位置改掉
[
'class' => 'yii\grid\ActionColumn',
'template' => '{update} {delete}',
'header' => '操作',
'buttons' => [
'update' => function ($url, $model, $key) {
return Html::a("編輯", $url, [
'title' => '欄目信息',
// btn-update 目標class
'class' => 'btn btn-default btn-update',
'data-toggle' => 'modal',
'data-target' => '#operate-modal',
]);
},
'delete' => function ($url, $model, $key) {
return Html::a('刪除', $url, [
'title' => '刪除',
'class' => 'btn btn-default',
'data' => [
'confirm' => '確定要刪除該信息嗎?',
'method' => 'post',
],
]);
},
],
],
4、選擇在頁面底部，增加modal以及create和update的操作
<?= "<?php" ?>
// 創建modal
Modal::begin([
'id' => 'operate-modal',
'header' => '<h4 class="modal-title"></h4>',
]);
Modal::end();
// 創建
$requestCreateUrl = Url::toRoute('create');
// 更新
$requestUpdateUrl = Url::toRoute('update');
$js = <<<JS
// 創建操作
$('#create').on('click', function () {
$('.modal-title').html('創建');
$.get('{$requestCreateUrl}',
function (data) {
$('.modal-body').html(data);
}
);
});
// 更新操作
$('.btn-update').on('click', function () {
$('.modal-title').html('編輯');
$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
function (data) {
$('.modal-body').html(data);
}
);
});
JS;
$this->registerJs($js);
?>
修改表單文件
1、打開backend\components\crud\default\views_form.php ,在第21行的位置增加
use yii\helpers\Url;
2、ActiveForm::begin處修改爲
<?= "<?php " ?>$form = ActiveForm::begin([
'id' => '<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>-id',
'enableAjaxValidation' => true,
'validationUrl' => Url::toRoute(['validate-form']),
]); ?>
修改控制器文件
打開backend\components\gii-custom\crud\default\controller.php文件
1、在42行處增加
use yii\helpers\Url;
2、對create、update方法修改如下：
/**
* Creates a new <?= $modelClass ?> model.
* If creation is successful, the browser will be redirected to the 'view' page.
* @return mixed
*/
public function actionCreate()
{
$model = new <?= $modelClass ?>();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(['index']);
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
/**
* 異步校驗表單模型
*/
public function actionValidateForm()
{
$model = new <?= $modelClass ?>();
$model->load(Yii::$app->request->post());
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return \yii\widgets\ActiveForm::validate($model);
}
/**
* Updates an existing <?= $modelClass ?> model.
* If update is successful, the browser will be redirected to the 'view' page.
* <?= implode("\n * ", $actionParamComments) . "\n" ?>
* @return mixed
*/
public function actionUpdate(<?= $actionParams ?>)
{
$model = $this->findModel(<?= $actionParams ?>);
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(Url::toRoute('index'));
} else {
return $this->renderAjax('update', [
'model' => $model,
]);
}
}
basic 版
修改 index 文件
<?php
use yii\helpers\Inflector;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
$urlParams = $generator->generateUrlParams();
$nameAttribute = $generator->getNameAttribute();
$modelClass = strtolower(StringHelper::basename($generator->modelClass));
echo "<?php\n";
?>
/**
* Created by Joker.
* Date: <?=date("Y/m/d"),"\n"?>
* Time: <?=date("H:i:s"),"\n"?>
*/<?="\n"?>
echo \Yii::$app->view->renderFile('@app/views/admin/base.php');
?>
<div class="layui-card">
<div class="layui-card-header layuiadmin-card-header-auto">
<form id="search-form" class="layui-form" method="post">
<!-- 其他的代碼 -->
<div class="layui-inline">
<input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="請輸入關鍵字" style="width: 360px">
<i class="layui-icon layui-icon-search" id="searchBtn" lay-submit type="submit" lay-filter="i" style="height: 36px;margin-top:-18px;cursor:pointer;font-size: 36px;margin-right:-14px;"></i>
</div>
<div class="layui-btn-group">
<button type="reset" class="layui-btn layui-btn-normal" id="reset">重新設定</button>
</div>
<div class="layui-btn-group">
<?= "<?php if(can('admin.$modelClass.create')){?>","\n";?>
<a class="layui-btn" href='<?= "<?=route('admin.$modelClass.create');?>" ?>'>新增</a>
<?= "<?php }?>","\n" ?>
</div>
</form>
</div>
<div class="layui-card-body">
<table id="dataTable" lay-filter="dataTable"></table>
</div>
</div>
<script type="text/html" id="options">
<div class="layui-btn-group">
<?= "<?php if(can('admin.$modelClass.update')){?>","\n";?>
<a class="layui-btn layui-btn-sm" lay-event="edit">編輯</a>
<?= '<?php }?>',"\n" ?>
</div>
</script>
<script>
layui.use(['layer','table','form'],function () {
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
//用戶表格初始化
var dataTable = table.render({
elem: '#dataTable'
,url: "<?= "<?= route('admin.$modelClass.index')?>" ?>" //數據接口
,page: true //開啓分頁
,cols: [[ //表頭
{checkbox: true,fixed: true},
{field: 'id', title: '名稱',align:'center'},
{field: 'name', title: '分類名稱',align:'center'},
{fixed: 'right', width: 120, align:'center', toolbar: '#options',title: '操作'}
]]
});
var field = {};
form.on('submit(i)', function (data) {
field = data.field;
dataTable.reload({
where: field,
page: {curr: 1}
});
return false; // 阻止表單跳轉
});
//監聽工具條
table.on('tool(dataTable)', function(obj){ //注：tool是工具條事件名，dataTable是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data //獲得當前行數據
,layEvent = obj.event; //獲得 lay-event 對應的值
if(layEvent === 'del'){
} else if(layEvent === 'edit'){
}
});
});
</script>
修改 _form 文件
<?php
echo "<?php\n";
?>
/**
* Created by Joker.
* Date: <?= date("Y/m/d"),"\n"?>
* Time: <?= date("H:i:s"),"\n"?>
*/
?>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="*" id="submit">確 認</button>
<a href="<?= "<?=route('admin.test.index')?>"; ?>" class="layui-btn" >返 回</a>
</div>
</div>
<script>
</script>
修改 _js 文件
<?php
echo "<?php\n";
?>
/**
* Created by Joker.
* Date: <?= date("Y/m/d"),"\n"?>
* Time: <?= date("H:i:s"),"\n"?>
*/
?>
<script>
</script>
修改 create 文件
<?php
use yii\helpers\Inflector;
use yii\helpers\StringHelper;
$modelClass = strtolower(StringHelper::basename($generator->modelClass));
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
echo "<?php\n";
?>
/**
* Created by Joker.
* Date: <?= date("Y/m/d"),"\n"?>
* Time: <?= date("H:i:s"),"\n"?>
*/
<?php
echo "echo \Yii::\$app->view->renderFile('@app/views/admin/base.php');
?>
<div class=\"layui-card\">
<div class=\"layui-card-header layuiadmin-card-header-auto\">
<h2>基本設定</h2>
</div>
<div class=\"layui-card-body\">
<form class=\"layui-form\" method=\"post\" action=\"<?=route('admin.test.create')?>\" enctype=\"multipart/form-data\">
<?php echo \Yii::\$app->view->renderFile('@app/views/admin/$modelClass/_form.php',['model'=>\$model]);?>
</form>
</div>
</div>
<?php echo \Yii::\$app->view->renderFile('@app/views/admin/$modelClass/_js.php');?>
";
修改 update 文件
<?php
use yii\helpers\Inflector;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
$urlParams = $generator->generateUrlParams();
$modelClass = strtolower(StringHelper::basename($generator->modelClass));
$modelClassName = Inflector::camel2words(StringHelper::basename($generator->modelClass));
$nameAttributeTemplate = '$model->' . $generator->getNameAttribute();
$titleTemplate = $generator->generateString('Update ' . $modelClassName . ': {name}', ['name' => '{nameAttribute}']);
if ($generator->enableI18N) {
$title = strtr($titleTemplate, ['\'{nameAttribute}\'' => $nameAttributeTemplate]);
} else {
$title = strtr($titleTemplate, ['{nameAttribute}\'' => '\' . ' . $nameAttributeTemplate]);
}
echo "<?php\n";
?>
/**
* Created by Joker.
* Date: <?= date("Y/m/d"),"\n"?>
* Time: <?= date("H:i:s"),"\n"?>
*/
?>
echo \Yii::\$app->view->renderFile('@app/views/admin/base.php');
?>
<?php
echo "<div class=\"layui-card\">
<div class=\"layui-card-header layuiadmin-card-header-auto\">
<h2>基本設定</h2>
</div>
<div class=\"layui-card-body\">
<form class=\"layui-form\" method=\"post\" action=\"<?=route('admin.test.update')?>\" enctype=\"multipart/form-data\">
<input type=\"hidden\" name=\"id\" value=\"<?= \$id;?>\">
<?php echo \Yii::\$app->view->renderFile('@app/views/admin/$modelClass/_form.php',['model'=>\$model]);?>
</form>
</div>
</div>
<?php echo \Yii::\$app->view->renderFile('@app/views/admin/$modelClass/_js.php');?>
";
修改 controller 文件
<?php
/**
* This is the template for generating a CRUD controller class file.
*/
use yii\db\ActiveRecordInterface;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
$controllerClass = StringHelper::basename($generator->controllerClass);
$modelClass = StringHelper::basename($generator->modelClass);
$searchModelClass = StringHelper::basename($generator->searchModelClass);
if ($modelClass === $searchModelClass) {
$searchModelAlias = $searchModelClass . 'Search';
}
/* @var $class ActiveRecordInterface */
$class = $generator->modelClass;
$pks = $class::primaryKey();
$urlParams = $generator->generateUrlParams();
$actionParams = $generator->generateActionParams();
$actionParamComments = $generator->generateActionParamComments();
echo "<?php\n";
?>
namespace <?= StringHelper::dirname(ltrim($generator->controllerClass, '\\')) ?>;
use <?= ltrim($generator->modelClass, '\\') ?>;
/**
* <?= $controllerClass ?> implements the CRUD actions for <?= $modelClass ?> model.
*/
class <?= $controllerClass ?> extends AdminBaseController
{
/**
* Desc: 列表
* Created by
* Date: <?=date("Y/m/d"),"\n"?>
* Time: <?=date("H:i:s"),"\n"?>
*/
public function actionIndex()
{
if($this->request->isAjax){
$list = <?= $modelClass ?>::find()->where([]);// todo
$count = $list->count();
$list = $list
->offset(($this->request->get('page',1) - 1) * $this->request->get('limit',10))
->limit($this->request->get('limit',10))
->asArray()
->orderBy(['id'=> SORT_DESC])// todo
->all();
$data = [
'code' => 0,
'msg' => '正在請求中...',
'count' => $count,
'data' => precaution_xss($list),
];
return json_encode($data);
}else{
return $this->render('index');
}
}
/**
* Desc: 新建
* Created by
* Date: <?=date("Y/m/d"),"\n"?>
* Time: <?=date("H:i:s"),"\n"?>
*/
public function actionCreate()
{
$model = new <?= $modelClass ?>();
if($this->request->isPost){
$flag = true;
// 判斷參數合法 // todo
if (empty($data['url'])){
$flag = false;
$this->withErrors('錯誤信息!');
}
// 添加數據
$model->created_at = date('Y-m-d H:i:s');
$model->updated_at = date('Y-m-d H:i:s');
if($flag){
$res = $model->insert();
if ($res) {
// AddLogController::addSysLog('',AddLogController::<?= strtolower($modelClass) ?>,AddLogController::add,'');// todo
return $this->withSuccess('新增成功!')->redirect(route('admin.<?= strtolower($modelClass) ?>.index'));// todo
} else {
$this->withErrors('系統錯誤!');
}
}
}
return $this->render('create',['model'=>$model]);
}
/**
* Desc: 編輯
* Created by
* Date: <?=date("Y/m/d"),"\n"?>
* Time: <?=date("H:i:s"),"\n"?>
*/
public function actionUpdate()
{
$id = $_REQUEST['id'];// todo
$model = <?= $modelClass ?>::findOne($id);
if($this->request->isPost){
$flag = true;
// 判斷參數合法 // todo
if (empty($data['url'])){
$flag = false;
$this->withErrors('錯誤信息!');
}
// 添加數據 todo
$model->created_at = date('Y-m-d H:i:s');
$model->updated_at = date('Y-m-d H:i:s');
if($flag){
$res = $model->insert();
if ($res) {
// AddLogController::addSysLog('',AddLogController::<?= strtolower($modelClass) ?>,AddLogController::delete,'');// todo
return $this->withSuccess('修改成功!')->redirect(route('admin.<?= strtolower($modelClass) ?>.index'));// todo
} else {
$this->withErrors('系統錯誤!');
}
}
}
return $this->render('update',['model'=>$model]);
}
/**
* Desc: 刪除
* Created by
* Date: <?=date("Y/m/d"),"\n"?>
* Time: <?=date("H:i:s"),"\n"?>
*/
public function actionDelete()
{
if($this->request->isAjax){
$id = $_REQUEST['id'];// todo
$model = <?= $modelClass ?>::findOne($id);
$res = <?= $modelClass ?>::deleteAll('id = ' . $id);
if($res!==false){
// AddLogController::addSysLog('',AddLogController::<?= strtolower($modelClass) ?>,AddLogController::delete,'');// todo
return $this->resultInfo(['retCode'=>1000,'retMsg'=>'刪除成功,影響'.$res.'行數據!']);
}else{
return $this->resultInfo(['retCode'=>1001,'retMsg'=>'刪除失敗!']);
}
}else{
exit("滾犢子");
}
}
}
測試
CREATE TABLE `test` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
advance 版
1、訪問gii,先創建模型
2、接着創建crud
最後一項 Code Template，這裏是下拉框效果，模版要選我們在gii中配置的模版，名字我們在上面配置的是：crud，所以，這裏請選擇 crud。如果沒有你的模板名，請檢查gii的配置。
basic 版
3、訪問 test/index
項目存放地址
basic 版本 – 這不是一個公開的倉庫,如果想要可以私信我