本书未发布

38. 注册表单提交

未匹配的标注

简介

在本节里,我们完成用户注册表单提交数据的基本保存。

需求分解

在本节里,我们只需要完成把用户在注册表单填写的数据保存到数据库表里,而对于用户填写的手机号码是否有效、密码长度限制等问题我们将在接下来几节里一一完善。

数据模型

首先,我们在共用模块内创建注册用户数据模型类:

$ php think make:model common/User

在本节里,我们只需要执行以上命令生成数据模型类即可,不需要修改该类的代码(如下):

application/common/model/User.php

<?php

namespace app\common\model;

use think\Model;

class User extends Model
{
    //
}

控制器

执行下行命令创建用户注册控制器。

php think make:controller index/Register

代码解读

命令行为我们生成的控制器( Register )默认包含七个操作方法,之所以默认生成这七个操作方法是为了方便我们在项目中创建 RESTFul 资源控制器。由于 RESTFul 内容太多限于篇幅关系我们在本书里不过多的介绍,不清楚该内容的同学请自行 baidu 或 google 一下。

按照 RESTFul 规范实现用户注册功能我们需要一个注册页面和注册数据保存方法,所以我们只保留该控制器里的 createsave 这两个方法,并在方法里完成相应的代码,完整代码如下:

application/index/controller/Register.php

<?php

namespace app\index\controller;

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

class Register extends Base
{
    public function create()
    {
        return $this->fetch('create');
    }

    public function save(Request $request)
    {
        // 实例化一个User对象
        $user = new User;
        // 保存表单提交数据
        $user->save($request->post());
        $message = '注册成功';
        // 注册成功后跳转到注册表单页面
        $this->success($message, url('create'));
    }
}

注意: Register 控制器继承于 Base 控制器。

视图模板

在控制器方法里,只有 create 方法需要渲染视图模板输出,所以接下来我们完成 create 方法的视图页面。

因为 ThinkPHP 命令行没有创建视图页面的命令,所以我们手动来创建注册表单页面。需要注意的是视图文件夹和文件名命名默认是 「Snake Case」规范。

$ mkdir application/index/view/register
$ touch application/index/view/register/create.html

上面,我们演示了使用 Linux 命令行创建文件夹和文件方法,在本教程以后的章节里我们将直接给出每个需要修改的文件代码,请大家自行创建『命令行』无法创建的文件夹或文件。

create 页面的代码如下:

application/index/view/register/create.html

{extend name="layout/main" /}
{block name="content"}
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">用户注册</div>

                <div class="panel-body">
                    <form id="model-form" class="needs-validation" novalidate method="POST" action="{:url('save')}">
                        <div class="form-group">
                            <label for="name" class="col-md-4 control-label">用户名</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" name="name" value="" required autofocus>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="mobile" class="col-md-4 control-label">手机号码</label>

                            <div class="col-md-6">
                                <input id="mobile" type="mobile" class="form-control" name="mobile" value="" required autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password" class="col-md-4 control-label">登录密码</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password-confirm" class="col-md-4 control-label">重复密码</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    注册 <i class="glyphicon glyphicon-arrow-right"></i>
                                </button>
                                <a class="btn btn-link" href="#">
                                    账号登录
                                </a>
                                <a class="btn btn-link" href="#">
                                    忘记密码
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

修改顶部导航里 注册 菜单链接地址:

application/index/view/layout/_header.html

.
.
.
<ul class="navbar-nav navbar-right">
    <li class="nav-item"><a class="nav-link" href="{:url('register/create')}">注册</a></li>
    <li class="nav-item"><a class="nav-link" href="#">注册</a></li>
</ul>
.
.
.

代码解读

  • 和之前完成的 index/index.html 页面一样,我们让 register/create.html 页面也继承 layout/main 这个布局模板,之后我们创建的所有视图模板页面全都继承 layout/main;
  • 我们在这里使用助手函数 url 生成表单的保存方法路径。

美化样式

css

效果预览

到这里我们已经完成了注册表单的初步创建和保存方法,点击顶部导航里 注册 菜单测试一下我们完成的功能,效果如下图所示:

然后,使用数据库管理工具打开 user 表看一下数据记录是否保存成功:

到这里,我们现在已经完成本节要开发的功能,但在本节结束之前我们整理一下已完成的注册功能的不足地方,我们将在接下来几节里一一解决这些问题:

  • 表单不填写任何内容点击保存按钮时报错;
  • 没有对表单提交的内容(用户名、手机号码等)进行长度和有效性验证;
  • 使用同一个手机号码进行注册再次注册时报错;
  • 没用发送短信验证码来验证用户填写的手机号码是否正确及有效;
  • 用户填写的登录密码在数据库里明文保存,这样很不安全;
  • 用户两次输入的登录密码不一致可以保存成功;
  • 用户注册成功后不要出现 ThinkPHP 自带的跳转页面,因为这个页面很不美观影响用户体验。

Git提交代码

让我们先保存本节完成的功能,然后再开始后面的开发吧:

$ git add -A
$ git commit -m '注册表单提交'

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~