ThinkPhp5开发实战2:后台管理登录设计

园游会永不打烊

发布于 2023-08-08 13:30:56

1.4K0

文章被收录于专栏：cloud stdiocloud stdio

前言

本文主讲：ThinkPhp5开发实战系列续集：设计登录界面，完成登录操作 对于没有配置开发环境或者TP5框架的同学，请参考文章 [第一章 ThinkPhp5开发实战1：搭建环境配置TP5框架(持续更新收藏关注)]

文章会持续更新，期待你的关注收藏！是我前进的动力！本系列文章将会把TP5框架的开发流程说清楚，用最朴实无华的文字描述，适合小白、新手入门 博主也正在学习中，如果你有更好的见解，欢迎评论交流！！

提示：以下是本篇文章正文内容

一、选取合适的前端模板

首先运行你的站点看看是否可以正常运行！ 没问题我们继续，下载自己喜欢的登录模板

推荐这个如果不想用也可以换其他的

选择下载即可！

二、资源引用渲染前端

1.导入框架引入资源文件

1、打开根目录在\application\index下创建view文件夹存放视图模板（与控制器同级）

2、将下载好的资源文件中的html拖入进去

3、在view里面创建一个User文件夹，将index.html存入到User文件夹里面去，重命名为login.html

3、将下载好的资源样式文件样式拖入到\public\static里面去

4、修改资源引用，打开html文件将里面的资源引用路径改为__STATIC__开头

最后修改结果：

<!DOCTYPE html>
<html lang="zxx">
    <head>
    <title>管理后台登录</title>

    <!-- Meta tags -->
    <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="stylesheet" href="__STATIC__/css/login.css" type="text/css" media="all">


</head>

<body>
    <div class="signinform">
        <h1>管理后台登录</h1>
        <!-- container -->
        <div class="container">
            <!-- main content -->
            <div class="w3l-form-info">
                <div class="w3l_form">
                    <div class="left_grid_info">
                        <img src="__STATIC__/images/image.svg" alt="">
                    </div>
                </div>
                <div class="w3_info">
                    <h2>登录</h2>
                    <form action="{:url('User/check')}" method="post">
                        <div class="input-group">
                            <span><i class="fas fa-user" aria-hidden="true"></i></span>
                            <input type="text" placeholder="账号" required="" name="username">
                        </div>
                        <div class="input-group">
                            <span><i class="fas fa-key" aria-hidden="true"></i></span>
                            <input type="Password" placeholder="密码" required="" name="password">
                        </div>
                                    
                       

                       
                        <button class="btn btn-primary btn-block" type="submit">登录</button>
                    </form>
                    <p class="continue"><span>---</span></p>
                    
                    
                </div>
            </div>
            <!-- //main content -->
        </div>
        <!-- //container -->
        <!-- footer -->
        <div class="footer">
            <p>© 2020 Play Sign In form. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="blank">W3layouts</a></p>
        </div>
        <!-- footer -->
    </div>


</body>
</html>

2.渲染前端登陆界面

接下来，完成渲染页面！

在application\index\controller创建2个php文件

User.php
Base.php

如图：

对于创建这个名字命名问题，请参考本系列第一章

接下来打开编辑器 对base.php进行编辑：

<?php
namespace app\index\controller;
use think\Controller;
class Base extends Controller
{

}

对User.php进行编辑：

<?php
namespace app\index\controller;
use app\index\controller\Base;
use think\Db;
use think\Session;
class User extends Base
{
      public function login()
    {
         //渲染
         
        return $this->view->fetch('User/login');
    }
   
}

由于这篇文章没能及时写完，现在把环境用在服务器上了，前面一样的配置，这里我讲一下服务器以宝塔为例的搭建方法：将网站目录的运行目录指定到public，取消写访问日志

将伪静态设置为：

好！配置完成了，尝试访问一下！

http://域名/index/User/login

访问结果如图：

没问题继续下一步！

三、构造数据库登陆表字段

1.设计数据库登录表

满足登录设计，最低要求两个字段，账号和密码Username 、password

创建SQL语句

ALTER TABLE `admin` ADD `id` INT NOT NULL AUTO_INCREMENT AFTER `password2`, ADD `username` VARCHAR(20) NOT NULL AFTER `id`, ADD `password` VARCHAR(20) NOT NULL AFTER `username`, ADD PRIMARY KEY (`id`);

插入账号密码

四、配置数据库连接、添加登录控制器

1.TP5连接数据库

我的数据库账号密码为：

youxi	youxi	qwer123456

连接路径为：application/里面的 database.php

将账号密码输入进去

2.添加验证码

<img width="80%" class="left15" height="50" alt="验证码" src="{:captcha_src()}" class="verify" onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()">

添加输入框

<input type="text" name="verify" value="" id="user" size="40" class="admin_input_style"  placeholder="验证码" style="width:70%" required/>

3.登录控制器check

新建check方法，对接收的参数进行处理

 // 处理登录逻辑
    public function check()
    {
        $param = input('post.');
        if(empty($param['username'])){
            
            $this->error('用户名不能为空');
        }
        
        if(empty($param['password'])){
            
            $this->error('密码不能为空');
        }
        //验证码
                // $captcha=input("captcha");
                $captcha=$param['verify'];
 //验证
                if (!captcha_check($captcha)){
                    $this->error("验证码错误");
                    // exit(json_encode(array('status'=>0,'msg'=>'验证码错误')));
                }



        //验证码
        // 验证用户名
        $has = Db::table('admin')->where('username',$param['username'])->find();
        // dump($has);
        if(empty($has)){
            
            $this->error('用户名密码错误');
        }
        
        // 验证密码
        if($has['password'] != $param['password']){
            
            $this->error('用户名密码错误');
        }
         // return $has['password'];
        //记录信息
        Session::set("admin",$param['username']);
       
        // 
        $this->success("登陆成功");
        // 路径+控制器 +方法
    }

前端login.html 表单请求

 <form action="{:url('User/check')}" method="post">
                        <div class="input-group">
                            <span><i class="fas fa-user" aria-hidden="true"></i></span>
                            <input type="text" placeholder="账号" required="" name="username">
                        </div>
                        <div class="input-group">
                            <span><i class="fas fa-key" aria-hidden="true"></i></span>
                            <input type="Password" placeholder="密码" required="" name="password">
                        </div>
                                    
                       
<img width="80%" class="left15" height="50" alt="验证码" src="{:captcha_src()}" class="verify" onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()">
                        <input type="text" name="verify" value="" id="user" size="40" class="admin_input_style"  placeholder="验证码" style="width:70%" required/>
                        <button class="btn btn-primary btn-block" type="submit">登录</button>
                    </form>

五、登录演示

登录成功！

总结

以上就是今天要讲的内容，将下载来的模板对静态资源做优化，采用MVC模式开发，实现前后端分离，调用tp框架的验证码，验证器实现快速安全对接，最后构造的登录方法，将前端表单通过form提交到该方法里面！对数据进行验证！验证通过后使用Session记录跳转到主页面，主页面通过对该Session进行检查完成登录！这一节我们下次在讲！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-02，如有侵权请联系 cloudcommunity@tencent.com 删除