参考网页:
设想
用户点击朋友圈,可以选择更改头像。弹出对话框,选择头像。为简便,不增加剪切等功能,只提供在线更换,不提供上传功能。这个就是用于修改头像的。
一、安装
$ php composer.phar require bupy7/yii2-gridify-view "dev-master"
$ php composer.phar require kartik-v/yii2-dialog "*"
其中,第二项,可能需要安装附加插件。在开发网站的时候,很多插件已经安装上了,遇到不能解决的问题,欢迎在下面留言。
二、使用
对于照片显示,需要一个能够访问的地址,为了访问这些照片,把这些照片作为公开的,不加权限的,可以任意访问。本文页面采用的 AdminLTE,所以在这个基础上继续本教程,如有不能继续,请等待页面设计博客的出现,致歉。
1、选择好头像放置在一个公共文件夹
假设你已经安装 https://github.com/dmstr/yii2-adminlte-asset 的 AdminLTE。本文的照片均放在 ./vendor/almasaeed2010/adminlte/dist/img/ 里。
分为 MVC 三部分来说。先说 C Controller。假设用的是 UserController
2、设计动作
代码见于 ./frontend/controllers/UserController.php
/**
* change avatar for current user.
* @param string $avatar
* @return mixed
*/
public function actionChangeAvatar($avatar = null)
{
if ($avatar != null) {
$me = Yii::$app->user->identity;
$me->avatar = $avatar;
if ($me->save()) {
Yii::$app->session->setFlash('success', '您成功设置这张图片为头像!');
} else {
Yii::$app->session->setFlash('error', '您头像设置失败!');
}
return $this->render('_avatar', [
'model' => $avatar,
]);
}
$id = Yii::$app->user->id;
$dir = "@vendor/almasaeed2010/adminlte/dist/img/";
$files = scandir(BaseYii::getAlias($dir));
$dataProvider = new ArrayDataProvider([
'allModels' => $files,
]);
if (Yii::$app->request->isAjax) {
return $this->renderPartial('_changeavatar', [
'dataProvider' => $dataProvider,
'onlyItems' => true,
]);
}
return $this->render('changeavatar', [
'dataProvider' => $dataProvider,
'model' => $this->findModel($id),
]);
}
解释:
if (Yii::$app->request->isAjax) {
是为了自动加载的。- 整个代码仿照 https://github.com/bupy7/yii2-gridify-view 示例做的。
- 有两个views 页面,分别
changeavatar
,_changeavatar
,_avatar
3、views 会有三部分
该V views 页面位于 ./frontend/views/user/ 下,
//changeavatar.php
<?php
use yii\helpers\Html;
/* @var $this yii\web\View */
/* @var $model common\models\User */
$this->title = $model->username;
$this->params['breadcrumbs'][] = ['label' => '朋友圈', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
echo $this->render('_changeavatar', [
'dataProvider' => $dataProvider,
]);
另外一个代码为
//_changeavatar.php
<?php
use bupy7\gridifyview\GridifyView;
echo GridifyView::widget([
'dataProvider' => $dataProvider,
'itemView' => '_avatar',
'onlyItems' => isset($onlyItems) ? $onlyItems : false,
'pluginOptions' => [
'url' => ['change-avatar'],
'srcNode' => '> div',
'resizable' => true,
'width' => '250px',
'maxWidth' => '350px',
'margin' => '20px',
],
]);
其中还有一个小页面 _avatar.php
//_avatar.php
<?php
use kartik\dialog\Dialog;
use yii\helpers\Url;
if ($model == '.' or $model == '..') {
return;
}
$directoryAsset = Yii::$app->assetManager->getPublishedUrl('@vendor/almasaeed2010/adminlte/dist/');
$url = Url::to(['change-avatar', 'avatar' => $model]);
$btns = <<< HTML
<a type="button" href=$url>
<img src="$directoryAsset/img/$model" alt="没有头像"/>
</a>
HTML;
echo $btns;
解释:
$model
是string
类型,这是由 Controller 里ArrayDataProvider
和$files
决定的。$directoryAsset
是照片公开的文件夹。
4、Model 的实现
本文采用的 common/models/User.php
,为之添加一个 avatar
属性,char
类型,用于保存照片名字。
三、小结
该功能实现的思路,主要是照着示例做,中间的难点是没有考虑到 _avatar.php
中 $modle
是 string
。在 Controller 里为了区分不同的页面,使用 $avatar=null
来判断,不是很严格。