创新实训——《基于人脸情绪识别的教学环境中的情感感知系统》——工作汇报(二)

一、阶段性总结

创新实训已经去了四周,目前正在进行前端管理员系统功能的实现,不过还是要现总结一下上一阶段的工作成果:

(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工程师!!

猜你喜欢

转载自blog.csdn.net/qq_38530808/article/details/80138505