一、阶段性总结
创新实训已经去了四周，目前正在进行前端管理员系统功能的实现，不过还是要现总结一下上一阶段的工作成果：
（1）自学了TP5.0，JQuery, Bootstrap 等框架
（2）完成了后台数据库的搭建
（3）基本实现了注册登陆界面的全部功能
二、具体工作内容
1.数据库搭建
数据库的设计和代码由其他组员实现：见https://blog.youkuaiyun.com/where_is_horse/article/details/79849209
数据库 shixun:
teacher:
manager:
2.前端登陆界面功能实现
view:
功能实现：
（1)验证码的实现（验证码的实现会单独发文章说明）
使用了TP5.0提供的think-captcha包，之后会详细说明。
（2）TP5.0下实现登陆验证
账号：123456@qq.com(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" οnclick="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" οnchange='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工程师！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
