Thinkphp -- 利用MVC模式完成注册登录功能

Posted 2021-11-26 yi2105

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thinkphp -- 利用MVC模式完成注册登录功能相关的知识，希望对你有一定的参考价值。

这是一篇记录向，记录我后台的学习过程。

如有不正确的地方，请多多指教。

基础知识：

MVC即 Model View Controller

Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。

技术图片

（图源https://www.runoob.com/design-pattern/mvc-pattern.html）

当我们浏览一个网页的时候首先会访问到View（视图层）

技术图片

在我们输入用户名密码之后，会将输入的数据传到Controller（控制器）中，再通过Model（模型）将数据写/读数据库记录列表。

Model（模型）层操作完毕之后，数据更新返回Controller（控制器）。

再次返回View（视图层）。

数据库结构：

技术图片

id：主键

username：用户名

password：密码

nickname：昵称

email：注册邮箱

status：用户状态（0表示禁用，1表示可用）

super：是否为超级管理员（0表示否，1表示是）//可无

create_time：创建时间

update_time：更新时间

delete_time：软删除时间

Controller层：

//注册
    public function register()
    {
        if (request()->isAjax()) {//判断是否存在ajax请求
            $data = [
                //传入View视图层中用户输入的数据
                ‘username‘ => input(‘post.username‘),
                ‘password‘ => input(‘post.password‘),
                ‘conpass‘ => input(‘post.conpass‘),//确认密码
                ‘nickname‘ => input(‘post.nickname‘),
                ‘email‘ => input(‘post.email‘)
            ];
            $result = model(‘Admin‘)->register($data);//将数据传到Model中处理
            if ($result == 1) {
                //注册成功，跳转至登录界面
                $this->success(‘注册成功‘, ‘http://quantabei.cn/index.php/index/index/login‘);//如果注册成功，自动跳转至登录界面
            } else {
                $this->error($result);
            }
        }
        return view();//返回View视图层
    }

//登录
    public function login()
    {
        if (request()->isAjax()) {
            $date = [
                "username" => input(‘post.username‘),
                "password" => input(‘post.password‘)
            ];//传入数据，需要什么就接收什么，达到过滤

            //将数据传入名为Admin的Model下login方法中
            $result = model("Admin")->login($date);
            if ($result == 1) {
                $this->success(‘登录成功!‘, ‘http://quantabei.cn/index.php/index/home/index.html‘);//跳转到首页
            } else {
                $this->error($result);
            }
        }
        return view();
    }

Model层：

//注册账户
    public function register($data)
    {
        //这里是一个验证器
        $validate = new\\app\\common\\validate\\Admin();
        if(!$validate->scene(‘register‘)->check($data)){
            return $validate->getError();
        }
        $result = $this ->allowField(true)->save($data);//allowField:只允许插入数据库中有的字段
        if($result){
            mailto($data[‘email‘],‘注册管理员账户成功！‘,‘注册管理员账户成功！‘);
            return 1;//注册成功
        }else{
            return "注册失败！";
        }
    }

//登陆校验
    public function login($data)
    {
        $validate = new\\app\\common\\validate\\Admin();
        if(!$validate->scene(‘login‘)->check($data)){
            return $validate->getError();
        }
        $result =Db::table(‘qt_admin‘)-> where($data)->find();
        if($result){
            //判断用户是否可用
            if($result[‘status‘]!=1){
                return "此用户被禁用！";
            }
            //1表示用户名和密码正确
            $sessionData = [
                ‘id‘ =>$result[‘id‘],
                ‘nickname‘=>$result[‘nickname‘],
                ‘is_super‘=>$result[‘is_super‘]
            ];
            session(‘admin‘,$sessionData);
            return 1;

        }else{
            return ‘用户名或密码错误!‘;
        }

    }

class Admin extends Validate
{
    protected $rule = [
        ‘username|管理员账户‘ => ‘require‘,
        ‘password|密码‘ => ‘require‘,
        ‘conpass|确认密码‘ => ‘require|confirm:password‘,//conpass要和password相等
        ‘nickname|昵称‘ => ‘require‘,
        ‘email|邮箱‘ => ‘require|email|unique:admin‘//unique:admin验证邮箱唯一性，验证不了？
    ];

    //登陆验证场景
    public function sceneLogin()
    {
        return $this->only([‘username‘,‘password‘]);
    }

    //注册验证场景
    public function sceneRegister()
    {
        return $this->only([‘username‘,‘password‘,‘conpass‘,‘nickname‘,‘email‘])
        ->append(‘username‘,‘unique:admin‘);
    }
}

验证器

View视图层（html）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="/logo.jpg" type="image/x-icon">
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/admin/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/admin/css/weather-icons.min.css" rel="stylesheet" />
    <link id="beyond-link" href="/static/admin/css/beyond.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-container">
    <form>
        <div class="loginbox bg-white">
            <div class="loginbox-title">登录</div>

            <div class="loginbox-or">
                <div class="or-line"></div>
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" name="username" placeholder="用户名" />
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" name="password" placeholder="密码" />
            </div>
            <div class="loginbox-forgot">
                <a href="http://quantabei.cn/index.php/index/index/forget">忘记密码?</a>
            </div>
            <div class="loginbox-submit">
                <input type="submit" class="btn btn-primary btn-block" id=‘login‘ value="登录">
            </div>
            <div class="loginbox-signup">
                <a href="http://quantabei.cn/index.php/index/index/register">注册账户</a>
            </div>
        </div>
    </form>

</div>

<script src="/static/admin/js/skins.min.js"></script>
<!--Basic Scripts-->
<script src="/static/admin/js/jquery.min.js"></script>
<script src="/static/admin/js/bootstrap.min.js"></script>
<script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script>
<!--Beyond Scripts-->
<script src="/static/admin /js/beyond.js"></script>
<script src="/static/lib/layer/layer.js"></script>
<script>
    $(window).bind("load", function () {

        /*Sets Themed Colors Based on Themes*/
        themeprimary = getThemeColorFromCss(‘themeprimary‘);
        themesecondary = getThemeColorFromCss(‘themesecondary‘);
        themethirdcolor = getThemeColorFromCss(‘themethirdcolor‘);
        themefourthcolor = getThemeColorFromCss(‘themefourthcolor‘);
        themefifthcolor = getThemeColorFromCss(‘themefifthcolor‘);

    });

    $(function(){
        $(‘#login‘).click(function () {
            $.ajax({
                url :"{:url(‘index.php/index/index/login‘)}",
                type : "post",
                data : $(‘form‘).serialize(),
                dataType : "json",
                success : function (data) {
                    if(data.code == 1){
                        layer.msg(data.msg,{
                            icon:6,//显示笑脸图标
                            time:2000//2s后自动关闭并且跳转
                        },function () {
                            location.href = data.url;
                        })
                    }else{
                        layer.open({
                            title :"登录失败",
                            content :data.msg,
                            icon:5,
                            anim:6
                        })
                    }
                }
            });
            return false;
        });
    });


</script>
</body>
<!--  /Body -->
</html>

登录界面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/admin/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/admin/css/weather-icons.min.css" rel="stylesheet" />
    <link id="beyond-link" href="/static/admin/css/beyond.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-container">
    <form>
        <div class="loginbox bg-white">
            <div class="loginbox-title">注册</div>

            <div class="loginbox-or">
                <div class="or-line"></div>
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" name="username" placeholder="用户名" />
            </div>
            <div class="loginbox-textbox">
                <input type="password" class="form-control" name="password" placeholder="填写密码" />
            </div>
            <div class="loginbox-textbox">
                <input type="password" class="form-control" name="conpass" placeholder="确认密码" />
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" name="nickname" placeholder="填写昵称" />
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" name="email" placeholder="填写邮箱" />
            </div>
            <div class="loginbox-submit">
                <input type="submit" class="btn btn-primary btn-block" id=‘register‘ value="注册">
            </div>
            <div class="loginbox-signup">
                <a href="http://quantabei.cn/index.php/index/index/login">返回登录</a>
            </div>
        </div>
    </form>

</div>

<script src="/static/admin/js/skins.min.js"></script>
<!--Basic Scripts-->
<script src="/static/admin/js/jquery.min.js"></script>
<script src="/static/admin/js/bootstrap.min.js"></script>
<script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script>
<!--Beyond Scripts-->
<script src="/static/admin /js/beyond.js"></script>
<script src="/static/lib/layer/layer.js"></script>
<script>
    $(window).bind("load", function () {

        /*Sets Themed Colors Based on Themes*/
        themeprimary = getThemeColorFromCss(‘themeprimary‘);
        themesecondary = getThemeColorFromCss(‘themesecondary‘);
        themethirdcolor = getThemeColorFromCss(‘themethirdcolor‘);
        themefourthcolor = getThemeColorFromCss(‘themefourthcolor‘);
        themefifthcolor = getThemeColorFromCss(‘themefifthcolor‘);

    });

    $(function(){
        $(‘#register‘).click(function () {
            $.ajax({
                url :"{:url(‘index.php/index/index/register‘)}",
                type : "post",
                data : $(‘form‘).serialize(),
                dataType : ‘json‘,
                success : function (data) {
                    if(data.code == 1){
                        layer.msg(data.msg,{
                            icon:6,//显示笑脸图标
                            time:2000//2s后自动关闭并且跳转
                        },function () {
                            location.href = data.url;
                        })
                    }else{
                        layer.open({
                            title :"注册失败",
                            content :data.msg,
                            icon:5,
                            anim:6
                        })
                    }
                }
            });
            return false;
        });
    });


</script>
</body>
<!--  /Body -->
</html>

注册界面

运行结果：

技术图片

数据库：

技术图片

哈哈哈哈哈哈嗝

以上是关于Thinkphp -- 利用MVC模式完成注册登录功能的主要内容，如果未能解决你的问题，请参考以下文章

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

ThinkPHP登陆注册

Thinkphp相关总结

Thinkphp框架表单自动验证登录注册 ajax自动验证登录注册

ThinkPHP项目笔记之登录，注册，安全退出篇