50. 编辑个人资料

5.1

5.1

简介

在本节里，我们首先完成用户昵称和个人简介信息的编辑和保存。

需求分解

• 每个用户只能修改自己的个人资料，不允许修改他人的个人资料；
• 编辑人个资料时，只允许修改昵称和个人简介;
• 在本节里我们暂时不考虑未登录页面访问编辑个人页面，这个问题我们在后续章节介绍。

验证器

我们在用户模型验证器里再添加一个验证场景（ update_profile ）来完成对编辑资料的验证。

application/common/validate/User.php

<?php
.
.
.
class User extends Validate
{
    protected $rule = [
        .
        .
        .
        'introduction' => 'max:100',
    ];

    protected $message = [
        .
        .
        .
        'introduction.max' => '请输入不超过100字的个人简介',
    ];

    protected $scene = [
        .
        .
        .
        'update_profile'  =>  ['name', 'introduction'],
    ];

}

数据模型

在 User 模型里添加编辑个人资料保存方法。

application/common/model/User.php

<?php
.
.
.

class User extends Model
{
    .
    .
    .
    /**
     * 更新个人资料
     * @Author   zhanghong(Laifuzi)
     * @DateTime 2019-06-17
     * @param    array              $data 更新数据
     * @return   boolean                  [description]
     */
    public function updateProfile($data)
    {
        $validate = new Validate;
        if(!$validate->batch(true)->scene('update_profile')->check($data)){
            $e = new ValidateException('更新个人信息失败');
            $e->setData($validate->getError());
            throw $e;
        }

        $is_save = $this->allowField(['name', 'introduction'])->save($data, ['id' => $this->id]);
        if(!$is_save){
            throw new \Exception('更新个人信息失败');
        }

        $user = $this->find($this->id);
        unset($user['password']);
        Session::set(self::CURRENT_KEY, $user);

        return true;
    }
}

代码解读

• 按照需求，只允许用户编辑自己的资料，所以我们声明的方法 updateProfile 是个实例方法；
• 另外，我们在 updateProfile 里调用 allowField 方法时限定只允许更新 'name' 和 'introduction' 属性。

控制器

接下来，我们完成控制器里的编辑功能代码。大家需要注意的是我们把 edit 和 update 方法的参数 $id 删除了，之所以删除参数 $id 是因为我们希望登录用户只能更新自己的个人资料。

application/index/controller/User.php

.
.
.
use app\common\exception\ValidateException;

class User extends Base
{
    .
    .
    .
    public function edit()
    {
        $currentUesr = UserModel::currentUser();
        $user = UserModel::find($currentUesr->id);
        if(empty($user)){
            $this->redirect('[page.root]');
        }

        $this->assign('user', $user);
        return $this->fetch('edit');
    }

    public function update(Request $request)
    {
        $currentUesr = UserModel::currentUser();
        if(!$request->isAjax()){
            $this->redirect('[user.read]', ['id' => $currentUesr->id]);
        }

        $data = $request->post();
        try{
            $currentUser->updateProfile($data);
        }catch (ValidateException $e){
            $this->error('验证失败', '', ['errors' => $e->getData()]);
        }catch (\Exception $e){
            $this->error($e->getMessage());
        }

        $message = '更新个人资料成功';
        Session::set('success', $message);
        $this->success($message, url('[user.read]', ['id' => $currentUesr->id]));
    }
}

路由

在路由定义文件里添加控制（ action ）方法访问规则，需要注意的是因为我们把 edit 和 update 方法的参数 $id 去掉了，所以我们定义的路由规则和 资源路由 规则不一样。

route/route.php

<?php
.
.
.
Route::get('user/edit', 'user/edit')->name('user.edit');
Route::put('user/update', 'user/update')->name('user.update');
Route::get('user/<id>', 'user/read')->name('user.read');

视图模板

1. 创建编辑个人资料页面：

application/index/view/user/edit.html

{extend name="layout/main" /}
{block name="content"}
<div class="container">
    <div class="col-md-8 offset-md-2">

        <div class="card">
            <div class="card-header">
                <h4>
                    <i class="glyphicon glyphicon-edit"></i> 编辑个人资料
                </h4>
            </div>

            <div class="card-body">

                <form id="model-form" class="needs-validation" novalidate action="{:url('[user.update]')}" method="POST" accept-charset="UTF-8">
                    <input type="hidden" name="_method" value="PUT">

                    <div class="form-group">
                        <label for="name-field">用户名</label>
                        <input class="form-control" type="text" name="name" id="name-field" value="{$user->name}" />
                    </div>
                    <div class="form-group">
                        <label for="introduction-field">个人简介</label>
                        <textarea name="introduction" id="introduction-field" class="form-control" rows="3">{$user->introduction|default=''}</textarea>
                    </div>
                    <div class="well well-sm">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
{js href="/static/assets/plugins/jquery-validate/jquery.validate.min.js" /}
<script type="text/javascript">
    jQuery(function($){
        validAndSubmitForm(
            "form#model-form",
            {
                "name":{
                    required: true,
                    rangelength: [6, 20]
                }, "introduction":{
                    maxlength: 100
                }
            }, {
                "name":{
                    required: "用户名不能为空",
                    rangelength: "用户名长度必须在2-20个字符之间"
                }, "introduction":{
                    maxlength: "个人介绍信息不能超过100个字符"
                }
            }
        );
    });
</script>
{/block}

代码解读

• 在上面页面里我们通过 <input type="hidden" name="_method" value="PUT"> 这行代码，把编辑表单的请求方式由 Post 请求改成了 Put 请求。

2. 在个人中心页面显示出个人简介：

application/index/view/user/read.html

.
.
.
<div class="card">
    <img class="card-img-top" src="https://iocaffcdn.phphub.org/uploads/images/201709/20/1/PtDKbASVcz.png?imageView2/1/w/600/h/600" width="200px" height="200px" alt="{{ $user->name }}">
    <div class="card-body">
        <h5><strong>个人简介</strong></h5>
        <p>{$user->introduction}</p>
        <hr>
        <h5><strong>注册于</strong></h5>
        <p>三天前</p>
    </div>
</div>
.
.
.

3. 在菜单里添加页面入口：

application/index/view/layout/_header.html

.
.
.
<ul class="dropdown-menu" role="menu">
    <li>
        <a href="{:url('[user.read]', ['id' => $current_user->id])}">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            个人中心
        </a>
    </li>
    <li>
        <a href="{:url('[user.edit]')}">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            编辑资料
        </a>
    </li>
    ...
</ul>
.
.
.

效果预览

提交代码

下面把代码纳入到版本管理。

$ git add -A
$ git commit '编辑昵称和个人简介信息'