PHP实现用户登录页面

PHP学习日常,放在上面记录一下咯
我用了bootstrap框架,这样的界面要好看一点
登录页面

必须用户名、密码、验证码都输入正确才能登录成功喔,否则出现下面提示

image.png


登陆成功之后,登录和注册选项切换为用户昵称和注销选项:

登陆成功之后:

登录成功之后


选择注销:

在这里插入图片描述

在这里插入图片描述


HTML代码:

<link href="http://www.likecs.com/css/bootstrap.css"> <style> li.toggle{ display: block; } li.toggle1{ display: none; } </style> <li><a data-toggle="modal" href="#loginer">登录</a></li> <li><a data-toggle="modal" href="#register">注册</a></li> <li><a href="##"></a></li> <li><a href="##">注销</a></li> //模态框 <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span aria-hidden="true">&times;</span><span>Close</span></button> <h4>请登录</h4> </div> <form> <div> <div> <label for="zh1">用户名:</label> <div> <input type="text" pattern="\w{6,10}" required> </div> </div> <div> <label for="pw1">密码:</label> <div> <input type="password" pattern="\w{6,10}" required> </div> </div> <div> <label for="yzm">验证码:</label> <div> <input type="text" pattern="\d{4}" required> </div> <div> <img src="http://www.likecs.com/php/idcode.php" alt=""> </div> </div> <div> <label></label> </div> </div> <div> <button type="submit">登录</button> <button type="button" data-dismiss="modal">关闭</button> </div> </form> </div> </div> </div>

JS代码:

<script src="http://www.likecs.com/js/jquery-2.1.3.js"></script> <script src="http://www.likecs.com/js/bootstrap.min.js"></script> <script> function toggle(){ $.getJSON("php/get.php",function (res) { if(res['flag']){ $('li.toggle').hide(); $('li.toggle1').show(); $('#nicheng').html(res['nc']) }else { $('li.toggle').show(); $('li.toggle1').hide(); } }); } toggle(); $('#form_login').submit(function (e) { e.preventDefault(); var data=$('#form_login').serialize(); $.getJSON('php/login.php',data,function (res) { if(res==3){ toggle(); $('#loginer').modal('hide'); }else if(res==2){ $('#info').html('用户名或密码有误') }else { $('#info').html('验证码有误') } }) }); $('#logout').click(function () { confirm('确定要注销?'); $.getJSON('php/logout.php',function (res) { if(res)toggle(); }) }) </script>

connect.php(连接数据库):

<?php $link=new PDO("mysql:host=localhost;port=3306;dbname=db","root",""); $link->query("set names utf8");

get.php(获取用户登录信息):

<?php include_once ("connect.php"); session_start();/*开启会话*/ if (isset($_SESSION['username'])){ /* 判断用户会话里用户名是否存在,即用户是否登录*/ $json['nc']=$_SESSION['nc'];/*把昵称存起来,一会返回给首页*/ $json['flag']=true;/*用户已经登录,标志flag为true*/ }else $json['flag']=false;/*用户已经登录,标志flag为true*/ echo json_encode($json);/*返回json*/

login.php(登录):

<?php include_once ("connect.php"); session_start();/*开启会话*/ $user=$_GET['username'];/*获取登录表单提交过来的数据*/ $pwd=$_GET['pwd']; $yzm=$_GET['yzm']; if($yzm==$_SESSION['vCode']){/*当用户输入的验证码和图片验证码相同时*/ $result=$link->query("select * from `user` where username='$user' and pwd='$pwd'"); $link = null; $row = $result->fetch();/*读取从数据库获取的数据*/ if ($row) {/*如果数据存在,即用户登录成功*/ $_SESSION['username'] = $row['username']; /*将用户名和昵称存在服务器,可以多个页面使用*/ $_SESSION['nc'] = $row['nc']; $flag=3; }else{/*用户名或密码错误*/ $flag=2; } }else{/*验证码输入错误*/ $flag=1; } echo $flag;

logout.php(注销):

<?php session_start(); unset($_SESSION['username']);//销毁用户名 unset($_SESSION['nc']);//销毁昵称 echo json_encode(true);//返回结果

上面登录页面的验证码在我的另一篇文里面,需要的小伙伴可以看一下:
https://www.jianshu.com/p/7473f5bdd9c0

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygyyd.html