46. 提示消息
简介
在本节里,我们完成当用户注册成功跳转到首页时在页面顶端显示一条提示消息告诉用户注册成功。
需求分解
通常当用户进行的一些重要操作执行成功或失败时会在页面顶端显示一个警告框或提示栏之类的组件,以提示用户操作结果。而这些操作提示按照类型可分为:成功、失败、提示和警告等。在本项目时我们也按这种提示分类给页面添加上提示栏,这样当用户注册成功时我们使用该组件提示用户注册成功。
因为这种操作提示通常是跳转到下一个页面(如注册成功跳转到首页)进行提示,所以我们必须在页面跳转前记录住要提示的消息类型和内容,在这里我们使用 Session 来记录提示消息类型和内容。
项目的后台模块也是按照以上分析结果给页面添加警告框,所以下面,我们参照后台模块功能给前台模块添加上警告框。
控制器
首页,我们在注册成功返回前在 Session 里记录提示信息。
application/index/controller/Register.php
<?php
.
.
.
use think\facade\Session;
class Register extends Base
{
.
.
.
public function save(Request $request)
{
if(!$request->isAjax()){
$this->redirect('[page.signup]');
}else if(!$request->isPost()){
$this->error('访问页面不存在');
}
$param = $request->post();
try{
$user = User::register($param);
}catch (ValidateException $e){
$this->error('验证失败', '', ['errors' => $e->getData()]);
}catch (\Exception $e){
$this->error($e->getMessage());
}
$message = '注册成功';
// 在调用 success 返回前把提示消息写入 session 里
Session::flash('success', $message);
$this->success($message, url('[page.root]'));
}
}
在记录提示消息时,我们把消息类型做的 Session 的存储主键,而且主键名和 Bootstrap Alerts 样式名称操持一致(如下),这样方便我们在页面渲染时使用 Bootstrap 样式名。
- success: 操作成功
- info: 操作提示
- warning: 操作警告
- danger: 操作失败
读取Session里记录的提示消息
接下来,我们在注册成功跳转到的控制器方法里添加读取 Session 里记录的提示消息。不过因为这个读取提示消息有共用性,所以我们把提示消息读取添加到基础控制器里。
application/index/controller/Base.php
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\facade\Session;
use app\common\model\Config as ConfigModel;
class Base extends Controller
{
protected function initialize()
{
if(!request()->isAjax()){
$site = ConfigModel::siteSetting();
$this->assign('site', $site);
$flash = [];
$flash_names = ['success', 'info', 'warning', 'danger'];
foreach ($flash_names as $key => $name) {
if(Session::has($name)){
$flash[$name] = Session::get($name);
}
}
$this->assign('flash', $flash);
}
}
}
视图模板
我们把提示栏内容写在 widget/_message
这个局部模板里,另外因为我们之前已经在模板文件里包含了该文件,所以不需要修改 layout/main
。
application/index/view/widget/_message.html
{foreach $flash as $name=>$message }
{notempty name="message"}
<div class="flash-message">
<p class="alert alert-{$name}">
{$message}
</p>
</div>
{/notempty}
{/foreach}
效果预览
提交代码
下面把代码纳入到版本管理。
$ git add -A
$ git commit '提示消息'
推荐文章: