ThinkPHP5.1后台搭建项⽬2---后台登录（验证码）⽂章⽬录
1、数据库字段
CREATE TABLE`cms_admin`(
`admin_id`mediumint(6)unsigned NOT NULL AUTO_INCREMENT,
`username`varchar(20)NOT NULL DEFAULT'',
`password`varchar(32)NOT NULL DEFAULT'',
`lastloginip`varchar(15)DEFAULT'0',
`lastlogintime`int(10)unsigned DEFAULT'0',
`email`varchar(40)DEFAULT'',
`realname`varchar(50)NOT NULL DEFAULT'',
`status`tinyint(1)NOT NULL DEFAULT'1',
PRIMARY KEY(`admin_id`),
KEY`username`(`username`)
)ENGINE=MyISAM AUTO_INCREMENT=9DEFAULT CHARSET=utf8;
2、layui框架
利⽤现成的layui框架可以简单的搭建后台的页⾯。
去layui的官⽹下载layui代码，放在public下，直接在html的<head>部分导⼊：
<link rel="stylesheet"href="/layui/css/layui.css">
3、dialog弹窗
⾃定义封装四类弹窗，写⼊/public/dialog.js中，也可以在实际使⽤中直接使⽤layer。
var dialog ={
// 错误弹出层
error:function(message){
layer.open({
content:message,
icon:2,
title :'错误提⽰',
});
},
//成功弹出层
success :function(message,url){ layer.open({
content : message,
icon :1,
yes :function(){
location.href=url;
},
});
},
// 确认弹出层
confirm :function(message, url){ layer.open({
content : message,
icon:3,
btn :['是','否'],
yes :function(){
location.href=url;
},
});
},
//⽆需跳转到指定页⾯的确认弹出层 toconfirm :function(message){
layer.open({
content : message,
icon:3,
btn :['确定'],
});
},
}
4、登录界⾯的前端实现（1）界⾯渲染
在application/admin/view/login/index.html中的<body>中添加：
<div class="beg-login-box">
<header>
<h1>后台登录</h1>
</header>
<div class="beg-login-main">
<form action=""class="layui-form">
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="text"name="username"lay-verify="username"autocomplete="off"placeholder="这⾥输⼊登录名"class="layui-input username"> </div>
php项目搭建<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="password"name="password"lay-verify="password"autocomplete="off"placeholder="这⾥输⼊密码"class="layui-input">
</div>
<div class="layui-form-item">
<div class="beg-pull-left" >
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input type="text"name="captcha"lay-verify="captcha"autocomplete="off"placeholder="输⼊验证码"class="layui-input">
</div>
<div class="beg-pull-right">
<img src="/back/captcha"onclick="javascript:this.src='/back/captcha?tm='+Math.random()"title="单击刷新验证码"id="img_rand_code"alt="" st yle="cursor: pointer;"><!--src的来源在验证码功能实现块讲解-->
</div>
</div>
<div class="layui-form-item">
<div class="beg-pull-left beg-login-remember">
<label>记住帐号？</label>
<input type="checkbox"name="rememberMe"value="true"lay-skin="switch"checked title="记住帐号">
</div>
<div class="beg-pull-right">
<button class="layui-btn layui-btn-primary"lay-submit lay-filter="login">
<i class="layui-icon"></i>登录
</button>
</div>
<div class="beg-clear"></div>
</div>
</form>
<footer>
<p> © 陆洋⼭芋</p>
</footer>
</div>
</div>
界⾯有样式login.css就不贴了，可以⾃⼰写⼀个最简单的实现相关功能就⾏。
（2）验证判断
继续在application/admin/view/login/index.html中的<body>中添加
<script src="/layui/layui.js"></script><!--导⼊layui.js-->
<script src="/dialog.js"></script><!--导⼊刚刚写的dialog.js-->
<script>
layui.use(['form','layer'],function(){
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;
//根据<input>标签中lay-verify="name"中的name进⾏输⼊格式的验证
form.verify({
username:function(value){
if(value.length ===0|| $.trim(value).length ===0){
return"登录名不能为空";
}
},
password:[/(.+){6,12}$/,'密码必须6到12位']
});
/*----------------------
----数据与后端交互部分-----
----具体可见（3）---------
----------------------*/
});
</script>
（3）数据与后端的交互
<script src="/static/js/md5.js"></script><!--导⼊md5.js进⾏加密，该⽂件可以⽹上下载-->
<script>
layui.use(['form','layer'],function(){
/*-------------------------
----验证判断部分（见上）------
-------------------------*/
//监听表单
//按钮标签需要添加lay-submit，名字为login，data为获得的表单数据
<('submit(login)',function(data){
var dataTemp ={
username: data.field.username,
password:hex_md5(data.field.password +'sing_cms'),//对表单传进来的密码进⾏加密，数据库中存储的为加密后的密码，需要在后端进⾏判断 rememberMe:berMe,
captcha:data.field.captcha
};
var index;
//ajax传递数据到后端
$.ajax({
type:'post',
url:'/index.php/admin/login/check',//传递到该⽅法
data: dataTemp,
dataType:'json',
beforeSend:function(){
//数据传递前会出现旋转的圈圈
index = layer.load(1,{
shade:[0.1,'#fff']//0.1透明度的⽩⾊背景
});
},
success:function(data){
//后端返回的数据在data中
//返回的data具体格式在后端处理时会写到
layer.close(index);
if(data.status ==1){
dialog.ssage,'/admin/index/index')//dialog的success弹窗，输出信息并跳转到特定的⽅法，这⾥是登录后的界⾯}
if(data.status ==0){
<(ssage);
}
return false;
}
});
return false;
});
});
</script>
（4）验证码部分
a、安装拓展包
切换到项⽬的根⽬录下，在终端执⾏：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论