YII2框架自带的后台登录界面比较丑，今天就教教大家如何把后台登录界面换成我们想要的样式。
1、后台登录布局
新建一个登录布局文件login.php，然后把后台自带的布局文件（backend/views/layouts/main.php）中的代码内容全部复制到新建的布局文件login.php中，然后把一些不需要用到的内容删掉，修改后的布局文件代码如下：
<?php /* @var $this \yii\web\View */ /* @var $content string */ use yii\helpers\Html; use yii\bootstrap\Nav; use yii\bootstrap\NavBar; use yii\widgets\Breadcrumbs; use common\widgets\Alert; use backend\assets\LoginAsset; //LoginAsset 在后面的步骤中会创建 LoginAsset::register($this); ?> <?php $this->beginPage() ?> <!DOCTYPE html> <html lang="<?= Yii::$app->language ?>"> <head> <meta charset="<?= Yii::$app->charset ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?= Html::csrfMetaTags() ?> <title><?= Html::encode($this->title) ?></title> <?php $this->head() ?> </head> <body class="signwrapper"> <?php $this->beginBody() ?> <?= $content ?> <?php $this->endBody() ?> </body> </html> <?php $this->endPage() ?>
2、在后台登录控制器中重新定义登录布局文件
由于原先的登录布局文件不用了改用上面新的布局文件，因此需要在控制器中重新定义。
/**
* 后台登录控制器
* Login action.
* @return string
*/
public function actionLogin()
{
$this->layout = 'login.php';
if (!Yii::$app->user->isGuest) {
return $this->goHome();
}
$model = new LoginForm();
if ($model->load(Yii::$app->request->post()) && $model->login()) {
return $this->goBack();
} else {
$model->password = '';
return $this->render('login', [
'model' => $model,
]);
}
}
3、引入后台布局文件样式
由于后台登录界面后后台其他页面不样式布局一样，因此单独给他配置样式。
统计静态资源管理
在backend/web/下新建一个statics文件夹把下面提供的资源包中statics中的所有文件都放到前面新建的statics文件夹下，或者直接把下载资源包里的statics文件夹放到backend/web/下面。
样式资源包
链接：https://pan.baidu.com/s/1kGkVOzT7Nde51tzfLoqw1w
提取码：7fwf
把backend/web/css/site.css 样式文件放到 backend/web/statics/css/下，然后删掉backend/web/下的css文件夹。
修改静态资源配置文件
在backend/assets中新建后台登录界面配置文件LoginAsset.php，文件内容如下：
<?php
namespace backend\assets;
use yii\web\AssetBundle;
/**
* Main backend application asset bundle.
*/
class LoginAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'statics/css/font-awesome/css/font-awesome.min.css',
'statics/css/layout.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
4、后台路由优化
把backend/config/main.php文件中 urlManager的注释去掉
把frontend/web/.htaccess文件复制一份到backend/web 下（伪静态化配置）
5、登录界面调整优化
backend/views/site/login.php优化调整后的代码
<?php
/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model \common\models\LoginForm */
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
$this->title = '登录';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="sign-overlay"></div>
<div class="signpanel"></div>
<div class="panel signin">
<div class="panel-heading">
<h4 class="panel-title">欢迎登陆博客系统</h4>
</div>
<div class="panel-body">
<button class="btn btn-primary btn-quirk btn-fb btn-block">联系我们</button>
<div class="or">or</div>
<?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
<?= $form->field($model, 'username',[
'inputOptions'=>[
'placeholder'=>'请输入登录账号',
],
'inputTemplate'=>'<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>{input}
</div>',
])->textInput(['autofocus' => true])->label(false) ?>
<?= $form->field($model, 'password',[
'inputOptions'=>[
'placeholder'=>'请输入登录密码',
],
'inputTemplate'=>
'<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>{input}
</div>',
])->passwordInput()->label(false) ?>
<div><a href="#" class="forgot">忘记密码</a></div>
<div class="form-group">
<?= Html::submitButton('登录', ['class' => 'btn btn-primary btn-success btn-block', 'name' => 'login-button']) ?>
</div>
<?php ActiveForm::end(); ?>
<hr class="invisible">
<div class="form-group">
<a href="#" class="btn btn-default btn-quirk btn-stroke btr-stroke-thin btn-block"></a>
</div>
</div>
</div><!-- panel -->
修改后的后台登录界面效果图
