yii2项目实战-如何自定义后台的模版主题

还记得我们后台的模版主题是什么吗？还记得我们大量的crud模版文件是怎么生成的吗？你肯定记得！为了简洁快速开发，gii功不可没！

但是：我们觉得adminlte（我们当前的后台主题）是不错的，可能有些人又觉得H+的主题不错，又不乏有些人呢，看中了网上某些杂七杂八的主题，再或者我就看中了阿里云控制台列表页那个模版，如何将别的主题应用到我们现有的管理后台呢？有同学要说了，这还不简单，找前端写一个，也不用gii生成了，我每次ctrl+c,ctrl+v完事。当然这也不失为一种策略，非常笨拙的策略！来看看我们是怎么样解决这个问题的！

我们以上一章节中 modal 的使用为例，假设我们要让整个后台的操作都是基于modal弹窗进行操作的，来看看如何定制一套主题模版！前期定制一套模板麻烦，但是后面为我们整个平台提供了巨大的方便性。

首先我们先来配置gii,增加我们自定义的模版文件：

1、拷贝gii默认的模版文件 vendor\yiisoft\yii2-gii\generators\crud\default 到 backend\components\gii-custom\crud\default，注意这里的components以及其目录下的gii-custom都是我们自定义的

2、打开backend\config\main-local.php 按照下面的样子对gii进行配置

$config['modules']['gii'] = [
    'class' => 'yii\gii\Module',
    'allowedIPs' => ['127.0.0.1', '::1'], 
    'generators' => [ 
        'crud' => [ //生成器名称 
            'class' => 'yii\gii\generators\crud\Generator', 
            'templates' => [ //设置我们自己的模板 
                //模板名 => 模板路径 
                'myCrud' => '@app/components/gii-custom/crud/default', 
            ] 
        ] 
    ], 
];

如上，我们配置了一套新的模板，叫myCrud，模板文件位于@app/components/gii-custom/crud/default，下面我们就可以把模板文件修改为自己喜欢的任意风格啦。本文我们以modal风格为例。

提醒：修改模板有些麻烦，稍有不慎可能就会出现点问题，请认真对待。

1、打开 backend\components\gii-custom\crud\default\views\index.php ,在第 17行的位置，增加

1 2	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);
?>

index视图整理好之后，我们继续整理下表单页面

1、打开backend\components\gii-custom\crud\default\views_form.php ,在第21行的位置增加

1	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行处增加

1	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,
        ]);
    }
}

最后，就是校验我们模版效果的时候，我们创建一个测试表进行测试

CREATE TABLE `test` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

1、访问gii,先创建模型 /index.php?r=gii%2Fdefault%2Fview&id=model

2、接着创建crud的时候就要注意了，最后一项 Code Template，这里是下拉框效果，模版要选我们在gii中配置的模版，名字我们在上面配置的是：myCrud，所以，这里请选择myCrud。如果没有你的模板名，请检查gii的配置。

3、直接访问 /index.php?r=test/index 我们会发现，test系列的modal已经成功操作了，在配置好gii模版后我们没有修改过一行test有关的代码，是不是很happy?