本文作者:心月

YII2高级版框架搭建完整博客系统教程——前台布局调整

心月IT博客 2019-03-12
YII2高级版框架搭建完整博客系统教程——前台布局调整摘要:现在前台的导航和注册如下图,常规的导航应该是在左边(我的博客右边一点),注册里面应该有一个重复密码以及验证码。​本文的主要内容就是解决这两个问题。

现在前台的导航和注册如下图,常规的导航应该是在左边(我的博客右边一点),注册里面应该有一个重复密码以及验证码。本文的主要内容就是解决这两个问题。

1.jpg

1、导航栏调整,将菜单栏移到左边,修改位置:frontend/views/layouts/mian.php修改如下:

前台导航栏布局调整

上图是修改前的代码截图,下图是修改后的代码截图,修改的地方已用红色框框标注

前台导航栏调整

导航栏修改后的效果图。

导航栏效果图

2、添加登录头像

同时,还有一个地方需要修改,通常登录后会显示登录头像,而这只有用户名,所以再次修改,修改的文件,frontend/views/layouts/mian.php,修改前的代码截图:

导航栏登录修改

修改后的代码截图:

添加头像

效果图:

前台登录头像样式

3、添加font-awesome字体样式

将在font-awesome官网下载的样式包放入frontend/web/statics 静态资源文件夹内,statics是我新建的用来存放js、css、images等静态资源的文件夹。

然后引入font-awesome字体样式包,引入方法如下:

在frontend/assets/AppAsset.php 中加入下图右侧红色框框标注的内容

截图中有一处与你的文件可能不一样,statics/css/site.css ,这是因为我把web下的css文件夹移入了statics文件夹内,主要是为了方便静态资源统一管理。

font-awesome字体样式引入

引入font-awesome字体样式后就可以直接使用了,使用方法如下:(修改的文件,frontend/views/layouts/mian.php)

font-awesome字体样式使用

效果图:

font-awesome字体使用效果

4、前台注册信息完善

前台注册表单SignupFormp表单增加重复密码校验和验证码,右侧红色框框内容为新增规则:

#rules 方法的完整内容
public function rules()
{
    return [
        ['username', 'trim'],
        ['username', 'required'],
        ['username', 'unique', 'targetClass' => 'commonmodelsUserModel', 'message' => Yii::t('common', 'This username has already been taken.')],
        ['username', 'string', 'min' => 2, 'max' => 255],

        ['email', 'trim'],
        ['email', 'required'],
        ['email', 'email'],
        ['email', 'string', 'max' => 255],
        ['email', 'unique', 'targetClass' => 'commonmodelsUserModel', 'message' => Yii::t('common', 'This email address has already been taken.')],

        ['password', 'required'],
        ['password', 'string', 'min' => 6],

        [['password','rePassword'], 'required'],
        [['password','rePassword'], 'string', 'min' => 6],
        ['verifyCode','captcha'],
        ['rePassword','compare','compareAttribute'=>'password','message'=>Yii::t('common','Two times input password is not consistent')]
    ];
}


注册表单校验规则

此外,注册表单类中还要新增两个属性,重复密码和验证码

20190312_1552378593841943.jpg

接下来还要修改前台表单显示文件(frontend/views/site/signup.php 右侧红色框框能的内容都是需要添加的,右上方引入的是验证码组件):

前台注册显示表单

修改后的注册效果图:

前台注册效果图

#附 注册字段英文变中文:
#修改文件 frontend/models/SignupFrom.php 添加 attributeLabels 方法,该方法会自动将表单字段映射成你希望表达的意思,只对该表单有效
//语言包映射
public function attributeLabels()
{
    return [
        'username' => Yii::t('common','username'),
        'email' => Yii::t('common','email'),
        'password' => Yii::t('common','password'),
        'rePassword' => Yii::t('common','rePassword'),
        'verifyCode' => Yii::t('common','verifyCode'),
        'Signup' => Yii::t('common','Signup'),
    ];
}

前台导航结构和注册信息完善到这里就完成了,看十遍不如动手做一遍,赶紧动手试试吧。

文章版权及转载声明:

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

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

验证码

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