用户管理系统_【20201202】做个用户管理系统（16）——注册功能的实现（一）...

1. 介绍

1.1 介绍

今天福哥来带着大家完成第一个页面控制器——注册页面。

首先注册页面应该有验证码的，而验证码需要用到GD库，我们的TFPHP暂时没有处理图像的能力，所以这一版注册页面福哥暂时先不实现验证码的功能。

其次表单提交出现问题需要提示用户的，福哥在前面也没有设计错误提示显示方式，这次会使用一个旋风的黑色提示框来提示错误信息。

最后一个含有表单页面控制器都会伴随着有一个或者多个接口控制器，页面控制器展示表单界面，而表单的处理则交给接口控制器来完成。

2. 注册功能

2.1 路径

注册功能就是最基本功能，福哥把它放在了系统的根目录上面，取名就是register。

如果路径就是一个“register”有点不好看，给它增加一个扩展名吧！扩展名就用“htm”好了，有好看，还可以起到迷惑黑客的目的。

http://192.168.1.168:8070/register.htm

2.2 页面控制器

注册功能的页面控制器用来显示表单界面，既然是界面自然继承的是TFPHP\Controller\Page\TFController这个控制器基类了，注册页面控制器存放路径是在WEB-INF/Controller/register.inc.php这里。

2.2.1 代码

class PageController extends TFController{    protected function process(){    }}

2.3 视图模板

注册功能的视图模板是注册页面的界面，注册视图模板存放路径是在WEB-INF/View/Template/register.html这里。

2.3.1 代码

<%include file="header.htm"%>        <div class="row login-form">        <div class="col-sm-12">            <h3 class="text-center">注册h3>            <p>输入用户名注册用户管理系统，密码要输入两次以保证我们得到的密码是准确无误的p>            <form>                <div class="form-group">                    <label>用户名label>                    <input class="form-control" type="text" name="user" />                div>                <div class="form-group">                    <label>密码label>                    <input class="form-control" type="password" name="pass" />                div>                <div class="form-group">                    <label>确认密码label>                    <input class="form-control" type="password" name="pass" />                div>                <div class="form-group">                    <label>验证码label>                    <div>                        <input class="form-control form-vsn" type="text" name="vsn" />                        <img src="images/verifycode.png" />                    div>                div>                <div class="form-group">                    <button class="btn btn-primary btn-sm form-control">登录button>                div>            form>        div>    div>            <div class="row dlg-mask">    div>    <div id="agreement" class="row dlg-box">        <div class="col-sm-12">            <div class="row dlg-header">                <div class="col-sm-12 overflow-hidden">                    <div class="float-left dlg-title">                        服务与协议                    div>                    <div class="float-right dlg-tool-box">                        <i class="btn-close">Xi>                    div>                div>            div>            <div class="row dlg-content">                <div class="col-sm-12">                    <div class="overflow-auto" style="height: 300px;">                        <p>                            【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。                            如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。                        p>                        <p>                            【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。                            如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。                        p>                        <p>                            【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。                            如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。                        p>                        <p>                            【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。                            如您因系统服务与TFUMS发生争议的，适用《TFUMS系统服务协议》处理。如您在使用系统服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。                        p>                    div>                    <div class="text-center py-3">                        <button class="btn btn-danger btn-xs btn-agreement">同意协议button>                    div>                div>            div>        div>    div>    <%include file="footer.htm"%>

2.4 JS程序

在视图模板最下面增加JS程序，控制服务协议的对话框。点击“X”表示拒绝同意服务协议就跳转到首页去，点击“同意协议”就表示接受了服务协议则关闭对话框。

$(function(){    $('#agreement').find('.btn-close').click(function () {        document.location = 'server->BASE_URI %>';    });    $('#agreement').find('.btn-agreement').click(function () {        $('#agreement').remove();        $('.dlg-mask').remove();    });});

2.5 共享模板

视图模板页面的页头和页尾都是一样的，所以福哥将它们抽出来单独存放起来了。

2.5.1 页头模板代码

<html><head>    <title>title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <link rel="stylesheet" type="text/css" href="server->BASE_URI %>css/bootstrap.min.css">    <link rel="stylesheet" type="text/css" href="server->BASE_URI %>css/tfhtml.css">    <link rel="stylesheet" type="text/css" href="server->BASE_URI %>css/tfusermanager.css">    <script type="text/javascript" src="server->BASE_URI %>js/jquery.min.js">script>    <script type="text/javascript" src="server->BASE_URI %>js/bootstrap.min.js">script>    <script type="text/javascript" src="server->BASE_URI %>js/tfhtml.js">script>head><body><div class="wrapper">    <div class="wrapper-header">                <div class="row topbar">            <div class="navbar navbar-text">                TFUMS v1.0 - TONGFU.net            div>            <ul class="nav ml-md-auto">                <li class="nav-item"><a href="" class="nav-link">首页a>li>                <li class="nav-item"><a href="" class="nav-link">登录a>li>                <li class="nav-item"><a href="" class="nav-link">注册a>li>            ul>        div>            div>    <div class="wrapper-content">

2.5.2 页尾模板代码

    div>    <div class="wrapper-footer">    div>div>body>html>

3. 测试

打开浏览器，输入网址就可以看到下面的界面了。不过，这个注册页面还没有添加JS代码，无法和服务器端对接起来，暂时还不能操作。

这时候如果点击对话框的叉叉就会跳转到首页去了。如果点击“同意协议”则表示接受服务协议，继续注册操作。

4. 总结

今天福哥带着童鞋们开始做注册功能了，页面功能和模型不一样，需要的东西比较多，今天福哥也只做了一个页面控制器和视图模板，还没有做处理表单的接口控制器。

下一课福哥将带着大家完成注册的接口控制器，完成接口控制器之后，注册功能才算完全实现了。

---

【20201201】做个web框架(17)——Redis操作对象TFRedis的实现

【20201130】做个用户管理系统(14)——用户模块user之个人资料修改功能的实现

---

免费看文章，自己学技术

---

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。

---