本文作者:心月

YII2高级版框架搭建完整博客系统教程——后台登录功能优化

心月IT博客 2019-03-20
YII2高级版框架搭建完整博客系统教程——后台登录功能优化摘要:YII2框架自带的后台登录界面比较丑,今天就教教大家如何把后台登录界面换成我们想要的样式。

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文件夹。

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

LoginAsset.php静态资源配置文件

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 -->

后台登录界面代码

修改后的后台登录界面效果图

后台登录界面效果图


文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-03-20
若转载请注明原文及出处:https://www.xinyueseo.com/yii/203.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论