一、阶段性总结
创新实训已经去了四周,目前正在进行前端管理员系统功能的实现,不过还是要现总结一下上一阶段的工作成果:
(1)自学了TP5.0,JQuery, Bootstrap 等框架
(2)完成了后台数据库的搭建
(3)基本实现了注册登陆界面的全部功能
二、具体工作内容
1.数据库搭建
数据库的设计和代码由其他组员实现:见https://blog.csdn.net/where_is_horse/article/details/79849209
数据库 shixun:
teacher:
manager:
2.前端登陆界面功能实现
view:
功能实现:
(1)验证码的实现(验证码的实现会单独发文章说明)
使用了TP5.0提供的think-captcha包,之后会详细说明。
(2)TP5.0下实现登陆验证
账号:[email protected](id:1 phone:17864151234)
密码:123456
用户名错误:(优先判断用户名,密码验证码不考虑)
密码错误:
验证码错误:
登陆成功:
(3)选择登陆方式:
管理员身份登陆:(刚才的用户账号提示不存在)
代码实现:
在Login控制器下写check()方法实现登陆验证,通过对单选框进行一个简单的判断来实现不同身份的登陆验证。
(4)防止用户未登录就进入系统界面
利用session,在用户试图访问用户系统界面时,判断用户当前是否为登陆状态,否,则阻止本次访问,跳转页面到登陆页面,时,则允许用户访问。
3.注册页面的实现
(1)注册验证:Validate
通过下载并导入JQuery.Validate包实现了基于js的注册验证功能
(2)注册判定
成功注册:
三、代码
login.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>login</title> <!-- CSS --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> <link rel="stylesheet" href="__STATIC__/index/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="__STATIC__/index/font-awesome/css/font-awesome.min.css"> <!-- <link rel="stylesheet" href="__STATIC__/index/css/form-elements.css"> --> <link rel="stylesheet" href="__STATIC__/index/css/login.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicon and touch icons --> <link rel="shortcut icon" href="__STATIC__/index/ico/favicon.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="__STATIC__/index/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="__STATIC__/index/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="__STATIC__/index/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="__STATIC__/index/ico/apple-touch-icon-57-precomposed.png"> </head> <body background="__STATIC__/index/img/backgrounds/b4.png" style="padding: 0;"> <!-- 导航条 --> <div class="container" style="padding: 0;"> <div class="row"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">LOGO</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">首页</a></li> <li><a href="#">哈哈</a></li> <li><a href="#">咨询</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 菜单 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="divider"></li> <li><a href="#">4</a></li> <li class="divider"></li> <li><a href="#">5</a></li> </ul> </li> </ul> </div> </div> </nav> </div> <!-- 登陆 --> <div class="row" id="main-container" style="padding: 0;" > <div class="col-md-6"> <div class="log-text"> <p>人脸识别</p> <h3>识别人脸啊阿道夫阿三发视</h3> <h3>新的技术啊发啊啊啊啊</h3> </div> </div> <div class="col-md-6"> <div class=" form-box "> <div class="form-top"> <div class="form-top-left"> <h3>Login to our site</h3> <p>输入用户名和密码:</p> </div> <!-- <div class="form-top-right"> <i class="fa fa-key"></i> </div> --> </div> <div class="form-bottom"> <form role="form" action="{:url('check')}" method="post" class="login-form"> <div class="form-group"> <label class="sr-only" for="form-username">Username</label> <input type="text" name="name" placeholder="用户名/邮箱/手机号" class="form-control" id="form-username"> <div class="loginerror" style="display: none;">用户名不存在</div> </div> <div class="form-group"> <label class="sr-only" for="form-password">Password</label> <input type="password" name="pass" placeholder="密码" class="form-password form-control" id="form-password"> </div> <div class="form-group"> <label class="sr-only" for="form-password">Code</label> <input type="text" name="code" placeholder="验证码" class="form-password form-control" id="form-code"> <img src="{:captcha_src()}" alt="captcha" onclick="this.src=this.src+'?'+Math.random()" style="margin: 5px;height: 50px;width: 200px;"/> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" name="r" id="r1" value="option1" checked> 用户 </label> <label class="radio-inline"> <input type="radio" name="r" id="r2" value="option2"> 管理员 </label> </div> <!-- <div> <label class="radio-inline"> <input type="radio" name="user" id="r1" value="user" checked>用户 </label> <label class="radio-inline"> <input type="radio" name="manager" id="r2" value="manager">管理员 </label> </div> --> <button type="submit" class="btn">登陆</button> <div> <p id="form-p"><a href="#">忘了密码?</a> | <a href="../register/register.html">注册账号</a> | <a href="../register/test.html">意见反馈</a></p> </div> </form> </div> </div> <!-- <div class="log-container" > <form action="" class="form-horizontal"> <div class="form-group has-success"> <label for="" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入邮箱"> </div> </div> <div class="form-group"> <label for="">密码</label> <input type="password" class="form-control" placeholder="请输入密码"> </div> <div class="input-group"> <div class="input-group-addon">$</div> <input type="password" class="form-control" placeholder="请输入密码"> </div> </form> </div> --> </div> </div> </div> <!-- 底部 --> <footer id="footer" class="text-muted"> <div class="container"> <p>企业培训 | 合作事宜 | 版权投诉</p> <p>苏ICP备 12345678. 2018-2018 山东大学</p> </div> </footer> </body> </html> <script src="__STATIC__/index/bootstrap/js/jquery.min.js"></script> <script type="text/javascript" src="__STATIC__/index/bootstrap/js/bootstrap.min.js"></script>
login.php:
<?php namespace app\index\controller; //系统数据库类 use think\Db; //系统控制器类 use think\Controller; class Login extends Controller { public function login() { return view(); } public function check() { if(input('post.r')=='option1'){ if($this->checkUsername()){ if($this->checkPassword()){ $this->checkCode(); } } } else{ if($this->checkMUsername()){ if($this->checkMPassword()){ $this->checkCode(); } } } } public function checkCode(){ $code=input('post.code'); //验证码判断 if(captcha_check($code)){ //echo"验证码正确"; //echo"<hr>"; echo "<script>alert('登陆成功!!!!!!!!!!');</script>"; return true; } else{ echo "<script>alert('验证码错误');history.go(-1);</script>"; return false; } } public function checkUsername() { $data=Db::table('teacher')->where('teacher_id',input('post.name'))->select(); $data1=Db::table('teacher')->where('email',input('post.name'))->select(); $data2=Db::table('teacher')->where('phone_number',input('post.name'))->select(); if(!($data||$data1||$data2)){ echo "<script>alert('用户名不存在');history.go(-1);</script>"; // // echo"<script>$('#loginerror').css("display","inline");</script>"; // echo" <script> document.getElementById('loginerror').style.display = 'inline';</script>"; //echo"用户名不存在"; //echo"<hr>"; return false; } else{ return true; } } public function checkPassword() { $data=Db::table('teacher')->where('teacher_id',input('post.name'))->select(); $data1=Db::table('teacher')->where('email',input('post.name'))->select(); $data2=Db::table('teacher')->where('phone_number',input('post.name'))->select(); if(!($data||$data1||$data2)){ return false; } else if(!($data1||$data2)){ if(input('post.pass')==$data[0]['teacher_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } else if(!($data||$data2)){ if(input('post.pass')==$data1[0]['teacher_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } else if(!($data||$data1)){ if(input('post.pass')==$data2[0]['teacher_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } } public function checkMUsername() { $data=Db::table('manager')->where('manager_id',input('post.name'))->select(); $data1=Db::table('manager')->where('email',input('post.name'))->select(); $data2=Db::table('manager')->where('phone_number',input('post.name'))->select(); if(!($data||$data1||$data2)){ echo "<script>alert('用户名不存在');history.go(-1);</script>"; // // echo"<script>$('#loginerror').css("display","inline");</script>"; // echo" <script> document.getElementById('loginerror').style.display = 'inline';</script>"; //echo"用户名不存在"; //echo"<hr>"; return false; } else{ return true; } } public function checkMPassword() { $data=Db::table('manager')->where('manager_id',input('post.name'))->select(); $data1=Db::table('manager')->where('email',input('post.name'))->select(); $data2=Db::table('manager')->where('phone_number',input('post.name'))->select(); if(!($data||$data1||$data2)){ return false; } else if(!($data1||$data2)){ if(input('post.pass')==$data[0]['manager_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } else if(!($data||$data2)){ if(input('post.pass')==$data1[0]['manager_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } else if(!($data||$data1)){ if(input('post.pass')==$data2[0]['manager_key']) { //echo"密码正确"; //echo"<hr>"; return true; } else{ echo "<script>alert('密码错误');history.go(-1);</script>"; return false; } } } }
register.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>register</title> <!-- CSS --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> <link rel="stylesheet" href="__STATIC__/index/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="__STATIC__/index/font-awesome/css/font-awesome.min.css"> <!-- <link rel="stylesheet" href="__STATIC__/index/css/form-elements.css"> --> <link rel="stylesheet" href="__STATIC__/index/css/register.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicon and touch icons --> <link rel="shortcut icon" href="__STATIC__/index/ico/favicon.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="__STATIC__/index/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="__STATIC__/index/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="__STATIC__/index/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="__STATIC__/index/ico/apple-touch-icon-57-precomposed.png"> </head> <body > <!-- 注册 --> <div class="container" > <div class="col-md-6 col-md-offset-3" style="text-align: center;margin-top: 50px;"> <div class="row"> <div class="form-top"> <h1>注册账号</h1> <h3>注册的账号可用邮箱或手机号登陆</h3> </div> </div> <div class="row"> <div class="form-bottom"> <form role="form" action="{:url('check')}" method="post" class="register-form" id="myform"> <div class="form-group"> <label class="sr-only" for="form-username">Username</label> <input name="id" placeholder="用户名" class="form-control" id="id"> </div> <div class="form-group"> <label class="sr-only" for="form-username">Username</label> <input name="e-mail" placeholder="邮箱" class="form-control required email" id="e-mail"> </div> <div class="form-group"> <label class="sr-only" for="form-username">Username</label> <input type="text" name="phone" placeholder="手机号" class="form-control " id="phone"> </div> <div class="form-group" > <label class="sr-only" for="form-password">Password</label> <input type="password" name="pass" placeholder="密码" class="form-password form-control " id="pass"> </div> <div class="form-group"> <label class="sr-only" for="form-password">Password</label> <input type="password" name="rpass" placeholder="确认密码" class="form-password form-control " id="rpass"> </div> <div class="form-group"> <label >注册类型</label> <select class="form-control" id="select1" onchange='sChange();'> <option value="1" class="active">普通用户</option> <option value="2">管理员</option> </select> </div class="form-group"> <div class="form-group" id="float" style="display: none;"> <label class="sr-only" for="form-username">Username</label> <input type="text" name="icode" placeholder="推荐码" class="form-control" id="icode"> </div> <button type="submit" class="btn">登陆</button> </form> </div> </div> </div> </div> <!-- 底部 --> <footer id="footer" class="text-muted"> <div class="container"> <p>企业培训 | 合作事宜 | 版权投诉</p> <p>苏ICP备 12345678. 2018-2018 山东大学</p> </div> </footer> </body> </html> <script src="__STATIC__/index/bootstrap/js/jquery.min.js"></script> <script src="__STATIC__/index/bootstrap/js/jquery.validate.js"></script> <script src="__STATIC__/index/bootstrap/js/messages_zh.js"></script> <script type="text/javascript" src="__STATIC__/index/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="__STATIC__/index/js/register.js"></script> <script type="text/javascript"> $(function(){ $("#myform").validate({ rules:{ id:{ required:true, rangelength:[1,20] }, phone:{ required:true, digits:true, rangelength:[11,11] }, pass:{ required:true, rangelength:[6,20] }, rpass:{ required:true, equalTo:'#pass' }, icode:{ required:true }, }, messages:{ id:{ required:"请输入用户名", rangelength:"用户名长度不超过20" }, phone:{ required:"请输入手机号", digits:"请输入正确的手机号", rangelength:"请输入正确的手机号" }, pass:{ required:"请输入密码", rangelength:"密码长度为6到20位" }, rpass:{ required:"请再次输入密码", equalTo:"两次密码不相同" }, icode:{ required:"请输入推荐码" }, } }); }); </script> <script> $(document).ready(function(){ var obj = document.getElementById("select1"); if(obj.value=="2"){ document.getElementById('float').style.display = 'inline'; //显示推荐码 } else{ document.getElementById('float').style.display = 'none'; } }) </script> <!-- <script> $(document).ready(function(){ $("#e-mail").blur(function(){ if($("#e-mail").val().replace(/(^\s*)|(\s*$)/g, "")==""){ $("#e-mail").addClass("error"); $('#1').css("display","inline"); } else{ $("#e-mail").removeClass("error"); $('#1').css("display","none"); } }); $("#phone").blur(function(){ if($("#phone").val().replace(/(^\s*)|(\s*$)/g, "")==""){ $("#phone").addClass("error"); $('#2').css("display","inline"); } else{ $("#phone").removeClass("error"); $('#2').css("display","none"); } }); $("#pass").blur(function(){ if($("#pass").val().replace(/(^\s*)|(\s*$)/g, "")==""){ $("#pass").addClass("error"); $('#3').css("display","inline"); } else{ $("#pass").removeClass("error"); $('#3').css("display","none"); } }); $("#rpass").blur(function(){ if($("#rpass").val().replace(/(^\s*)|(\s*$)/g, "")==""){ $("#rpass").addClass("error"); $('#4').css("display","inline"); } else{ $("#rpass").removeClass("error"); $('#4').css("display","none"); } }); $("#icode").blur(function(){ if($("#icode").val().replace(/(^\s*)|(\s*$)/g, "")==""){ $("#icode").addClass("error"); $('#5').css("display","inline"); } else{ $("#icode").removeClass("error"); $('#5').css("display","none"); } }); }); </script> -->
register.php:
<?php namespace app\index\controller; //系统数据库类 use think\Db; //系统控制器类 use think\Controller; class Register extends Controller { public function register() { return view(); } public function check() { if(input('post.icode')!=""){ $this->checkM(); } else{ $this->checkT(); } } public function checkT(){ $data=Db::table('teacher')->where('teacher_id',input('post.id'))->select(); $data1=Db::table('teacher')->where('email',input('post.id'))->select(); $data2=Db::table('teacher')->where('phone_number',input('post.id'))->select(); if(!($data||$data1||$data2)){ $email=Db::table('teacher')->where('email',input('post.e-mail'))->select(); if(!$email){ $phone=Db::table('teacher')->where('phone_number',input('post.phone'))->select(); if(!$phone){ $d=[ "teacher_id"=>input('post.id'), // "teacher_name"=>"null", "teacher_key"=>input('post.pass'), "email"=>input('post.e-mail'), "phone_number"=>input('post.phone'), // "age"=>"null", // "gender"=>"null", // "school_id"=>"null", ]; Db::table('teacher')->insert($d); } else{ echo"<script>alert('手机号已被使用');history.go(-1);</script>"; } } else{ echo"<script>alert('邮箱已被使用');history.go(-1);</script>"; } } else{ echo"<script>alert('用户名已存在');history.go(-1);</script>"; } } public function checkM(){ if(input('post.icode')=="asd123"){ $data=Db::table('manager')->where('email',input('post.e-mail'))->select(); if(!$data){ $data1=Db::table('manager')->where('phone_number',input('post.phone'))->select(); if(!$data1){ $data2=[ "manager_id"=>input('post.id'), "email"=>input('post.e-mail'), "phone_number"=>input('post.phone'), "manager_key"=>input('post.pass'), ]; Db::table('manager')->insert($data2); } else{ echo"<script>alert('手机号已被使用');history.go(-1);</script>"; } } else{ echo"<script>alert('邮箱已被使用');history.go(-1);</script>"; } } else{ echo"<script>alert('推荐码错误');history.go(-1);</script>"; } } }
四、感悟与收获
到目前为止,我真的学到了很多很多以前根本不会去接触的东西,像底层的html,css,js,php,以及对应的框架bootstrap,jquery,tp5.0 ,这些语言与框架的存在让我不再惧怕前端网站成千上万条代码,毕竟语法在那摆着,不存在看不懂的东西,在今后的学习生活中,我还会进一步学习这些工具,争取精通这些前端语言,成为一个web工程师!!