系列文章目录
第一章 ThinkPhp5开发实战1：搭建环境配置TP5框架(持续更新收藏关注)
文章目录
前言
本文主讲：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__开头
最后修改结果：
login.html代码
<!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进行编辑：
<?phpnamespaceapp\index\controller;usethink\Controller;classBaseextendsController{}
对User.php进行编辑：
<?phpnamespaceapp\index\controller;useapp\index\controller\Base;usethink\Db;usethink\Session;classUserextendsBase{publicfunctionlogin(){//渲染return$this->view->fetch('User/login');}}
由于这篇文章没能及时写完，现在把环境用在服务器上了，前面一样的配置，这里我讲一下服务器以宝塔为例的搭建方法：将网站目录的运行目录指定到public，取消写访问日志
将伪静态设置为：
好！配置完成了，尝试访问一下！
http://域名/index/User/login
访问结果如图：
没问题继续下一步！
三、构造数据库登陆表字段
1.设计数据库登录表
满足登录设计，最低要求两个字段，账号和密码Username 、password
创建SQL语句
ALTERTABLE`admin`ADD`id`INTNOTNULLAUTO_INCREMENTAFTER`password2`,ADD`username`VARCHAR(20)NOTNULLAFTER`id`,ADD`password`VARCHAR(20)NOTNULLAFTER`username`,ADDPRIMARYKEY(`id`);
插入账号密码
四、配置数据库连接、添加登录控制器
1.TP5连接数据库
我的数据库账号密码为：
youxi youxi qwer123456
连接路径为：application/里面的 database.php
将账号密码输入进去
2.添加验证码
<imgwidth="80%"class="left15"height="50"alt="验证码"src="{:captcha_src()}"class="verify"onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()">
添加输入框
<inputtype="text"name="verify"value=""id="user"size="40"class="admin_input_style"placeholder="验证码"style="width:70%"required/>
3.登录控制器check
新建check方法，对接收的参数进行处理
// 处理登录逻辑publicfunctioncheck(){$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进行检查完成登录！这一节我们下次在讲！**
版权归原作者 德宏大魔王 所有， 如有侵权，请联系我们删除。