49. 个人中心页面

5.1

5.1

简介

在本章里我们将完成用户个人中心页面和编辑个人资料页面的开发。首先，在本节里我们完成个人中心页面的初步搭建。

需求分解

在本节里我们要完成的个人中心页面的初步搭建包括：

• 个人中心页面视图页面的开发；
• 在个人中心页面只需要显示出用户真实昵称信息，而用户头像、人个简介和注册时间等信息的显示我们将在后续章节完成，在本节里先显示一个静态值；
• 在顶部导航栏菜单添加到个人中心页面入口；

控制器

我们新建一个控制器专门处理个人中心业务：

$ php think make:controller index/User

首先，新建控制器也是继承于前面定义的Base控制器，另外我们只保留控制器里的 read、edit 和 update 三个控制方法，我们在 read 方法里实现个人资料的展示（即，也就是我们所说的个人中心页面）， edit 和 update 用于实现个人资料的编辑和保存。

因为，在本节里我们主要是介绍个人中心页面的开发，所以我们只完成 read 方法代码。

application/index/controller/User.php

<?php

namespace app\index\controller;

use think\Request;
use app\common\model\User as UserModel;

class User extends Base
{
    public function read($id)
    {
        $user = UserModel::find(intval($id));
        if(empty($user)){
            // 当查看的用户不存在时跳转到首页
            $this->redirect('[page.root]');
        }

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

    public function edit($id)
    {
        //
    }

    public function update(Request $request, $id)
    {
        //
    }
}

路由

在配置文件里定义个人中心页面访问路由规则：

route/route.php

<?php
.
.
.

// 个人中心
Route::get('user/<id>', 'user/read')->name('user.read');

视图页面

1. 创建用户个人中心页面视图页面并编写以下代码：

application/index/view/user/read.html

{extend name="layout/main" /}
{block name="content"}
<div class="row">
  <div class="col-lg-3 col-md-3 hidden-sm hidden-xs user-info">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <hr>
            <h5><strong>注册于</strong></h5>
            <p>三天前</p>
        </div>
    </div>
  </div>
  <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
    <div class="card ">
      <div class="card-body">
          <h1 class="mb-0" style="font-size:22px;">{$user->name}</h1>
      </div>
    </div>
    <hr>

    <!-- 用户发布的内容 -->
    <div class="card ">
      <div class="card-body">
        暂无数据 ~_~
      </div>
    </div>

  </div>
</div>
{/block}

代码说明：

• 因为我们目前还没有实现个人头像、个人简介和注册时间功能，所以暂时让显示一个固定值；
• 用户发布内容我们在下一节才开发，所以这块暂时也显示一个固定的提示语。

2. 在 layout/_header 文件里添加个人中心页面入口：

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="#">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            编辑资料
        </a>
    </li>
    ...
</ul>
.
.
.

效果预览

知识点

为什么在本教程里生成 URL 地址时，一在强制使用 路由标识** 并且一条条来定义路由标识，却不用『控制器+控制方法名』或『 资源路由 』？

下面我们通过一段示例代码给大家说明这个问题，方便大家快速理解两者的不同。

首先，我们在配置文件里声明一个不存在的资源路由。

route/route.php

<?php
.
.
.
// 测试Demo
Route::resource('book', 'index/book');

接下来，我们在 Demo 控制器里添加测试方法：

application/index/controller/Demo.php

<?php
.
.
.

提交代码

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

$ git add -A
$ git commit '个人中心页面的基本搭建'