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

迈不过友情╰ 2023-10-01 20:53 26阅读 0赞

## 系列文章目录 ##

[第一章 ThinkPhp5开发实战1：搭建环境配置TP5框架(持续更新收藏关注)][ThinkPhp5_1_TP5]

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、选取合适的前端模板
 *  二、资源引用渲染前端
 *   *  1.导入框架引入资源文件
     *  2.渲染前端登陆界面
 *  三、构造数据库登陆表字段
 *   *  1.设计数据库登录表
 *  四、配置数据库连接、添加登录控制器
 *   *  1.TP5连接数据库
     *  2.添加验证码
     *  3.登录控制器check
 *  五、登录演示
 *  总结

--------------------

## 前言 ##

![在这里插入图片描述][8e8f33632d324e238b0c8e0fe1396486.gif_pic_center]

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

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

--------------------

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

## 一、选取合适的前端模板 ##

![示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。][pandas _NumPy]  
**首先运行你的站点看看是否可以正常运行！  
没问题我们继续，下载自己喜欢的登录模板**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_14_color_FFFFFF_t_70_g_se_x_16]

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

选择下载即可！

## 二、资源引用渲染前端 ##

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

1、打开根目录在\\application\\index下创建view文件夹存放视图模板（与控制器同级）  
![在这里插入图片描述][581018e4b9da4f6181499e1ada328727.png]

2、将下载好的资源文件中的html拖入进去  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]  
3、在view里面创建一个User文件夹，将index.html存入到User文件夹里面去，重命名为login.html  
![在这里插入图片描述][fac60e67ad0847da979766be74fdc64a.png]  
3、将下载好的资源样式文件样式拖入到\\public\\static里面去  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
4、修改资源引用，打开html文件将里面的资源引用路径改为\_\_STATIC\_\_开头  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
最后修改结果：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
login.html代码

<!DOCTYPE html>
    <html lang="zxx">
        <head>
        <title>管理后台登录</title>
    
        
        <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>
            
            <div class="container">
                
                <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>
                
            </div>
            
            
            <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>
            
        </div>
    
    
    </body>
    </html>

### 2.渲染前端登陆界面 ###

接下来，完成渲染页面！

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

User.php
    Base.php

如图：

![在这里插入图片描述][f4f57cc02bda4430ad2bb5ef667520c9.png]  
对于创建这个名字命名问题，请参考 本系列[第一章][ThinkPhp5_1_TP5]

**接下来打开编辑器**  
  
对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，取消写访问日志**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
将伪静态设置为：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_19_color_FFFFFF_t_70_g_se_x_16]**好！配置完成了，尝试访问一下！**

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

访问结果如图：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
没问题继续下一步！

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

### 1.设计数据库登录表 ###

满足登录设计，最低要求两个字段，账号和密码Username 、password  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 6]**创建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`);

插入账号密码  
![在这里插入图片描述][20e7512903cc4865989d44423a628a5d.png]

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

### 1.TP5连接数据库 ###

我的数据库账号密码为：

youxi	youxi	qwer123456

连接路径为：application/里面的 database.php  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
将账号密码输入进去  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_10_color_FFFFFF_t_70_g_se_x_16]

### 2.添加验证码 ###

添加输入框

### 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 表单请求

## 五、登录演示 ##

登录成功！  
![在这里插入图片描述][e361dda3db334dbd9320113986f4abbe.gif_pic_center]

## 总结 ##

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

[ThinkPhp5_1_TP5]: https://blog.csdn.net/qq_35230125/article/details/122667793
[8e8f33632d324e238b0c8e0fe1396486.gif_pic_center]: https://img-blog.csdnimg.cn/8e8f33632d324e238b0c8e0fe1396486.gif#pic_center
[pandas _NumPy]: https://img-blog.csdnimg.cn/2da4a21a5d0e4736a07c86f8e55cf94f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f61ac31fa284469dbfc3470d566dcbac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_14,color_FFFFFF,t_70,g_se,x_16
[Link 1]: http://www.mobanwang.com/mb/202101/18091.html
[581018e4b9da4f6181499e1ada328727.png]: https://img-blog.csdnimg.cn/581018e4b9da4f6181499e1ada328727.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f7da3cd22c974b368393eb7035987af5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[fac60e67ad0847da979766be74fdc64a.png]: https://img-blog.csdnimg.cn/fac60e67ad0847da979766be74fdc64a.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7a06caeb39464b27a7002e5d86c90f0f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/04b3bf8a66c4450595b33576cd5cbba9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/8a5261395cbe45f081e83979735f4afa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[f4f57cc02bda4430ad2bb5ef667520c9.png]: https://img-blog.csdnimg.cn/f4f57cc02bda4430ad2bb5ef667520c9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/56c8564ba5d04bf8a68520713c046797.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/59b752b11a3645efa9e4ce68765ca390.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/35484d3b97ff43b592e8ed34a26561a3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/48c75f45473f42b0af0f79d68a3998d5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[20e7512903cc4865989d44423a628a5d.png]: https://img-blog.csdnimg.cn/20e7512903cc4865989d44423a628a5d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/9cd20b285dd3414481d4a53787b05a0a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6df70e1b422b417e84ffaf0068b3392b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_10,color_FFFFFF,t_70,g_se,x_16
[e361dda3db334dbd9320113986f4abbe.gif_pic_center]: https://img-blog.csdnimg.cn/e361dda3db334dbd9320113986f4abbe.gif#pic_center