接着上文 [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统一 连载
      上文给大家展示了实现的效果，本篇文章将详细给大家讲一下如何实现用户登陆及登陆成功提醒页面
           注意，以下例子也你下载后无法正常运行属于正常，因为部分CSS文件和js文件还没有上传，我承诺一定会在该实例连载的最后一篇文章中上传本例所有的源代码~请大家支持我的原创论坛[3gput.com/3G开发者联盟]。
      首先，实现用户的登陆很简单，我以前做过讲解，主要是用户登陆的时候将用户名和用户id放入到session中
具体代码如下：
       用户登陆页面：

      

Code:
  1. <html>   
  2. <head>   
  3. <title>未标题-1</title>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5. <style type="text/css">   
  6. <!--   
  7. body, p,td{   
  8.     background-image: url(../images/Ml_BG.gif);   
  9.     font-size: 9pt;   
  10.     line-height: 16px;           
  11. }   
  12. a:link {   
  13.     color: #ffffff;   
  14.     text-decoration: none;   
  15. }   
  16. a:visited {   
  17.     color: #f5f5f5;   
  18.     text-decoration: none;   
  19. }   
  20. a:hover {   
  21.     color: #ffffff;   
  22.     text-decoration: none;   
  23. }   
  24.   
  25. r:{color: #d20404;}   
  26. .r:a:link {   
  27.     color: #d20404;   
  28.     text-decoration: underline;   
  29. }   
  30. .r:a:visited {   
  31.     color: #f5f5f5;   
  32.     text-decoration: none;   
  33. }   
  34. .r:a:hover {   
  35.     color: #d20404;   
  36.     text-decoration: none;   
  37. }   
  38. .input-border{   
  39.     border:1px solid #b8b8b8;   
  40.     width:100px;   
  41.     line-height:23px;   
  42.     font-size:14px;   
  43.     height:24px;   
  44.     padding-left: 2px;   
  45. }   
  46. .input-border1{   
  47.     border:1px solid #b8b8b8;   
  48.     width:173px;   
  49.     line-height:23px;   
  50.     font-size:14px;   
  51.     height:24px;   
  52.     padding-left: 2px;   
  53. }   
  54. w:{color: #507ea4;}   
  55. .w:a:link {   
  56.     color: #507ea4;   
  57.     text-decoration: underline;   
  58. }   
  59. .w:a:visited {   
  60.     color: #044275;   
  61.     text-decoration: none;   
  62. }   
  63. .w:a:hover {   
  64.     color: #507ea4;   
  65.     text-decoration: none;   
  66. }   
  67. .login-b, .login-b2, .login-b3{   
  68.     background-image: url(../images/b2.gif);   
  69.     background-position: 0px 0px;   
  70.     float: left;   
  71.     height: 32px;   
  72.     width: 82px;   
  73.     display: block;   
  74.     border:0;   
  75.     margin-top: 7px;   
  76.     *margin-top: 9px;   
  77.     background-repeat: no-repeat;   
  78.     margin-left: 23px;   
  79.     cursor:pointer!important;   
  80.     cursor:hand;   
  81. }   
  82. .login-b2{   
  83.     background-image: url(../images/b2.gif);   
  84.     background-position: 0px -33px;   
  85. }   
  86. .login-b3{   
  87.     background-image: url(../images/b2.gif);   
  88.     background-position: 0px -66px;   
  89. }   
  90.   
  91.   
  92. -->   
  93. </style>   
  94. </head>   
  95. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">   
  96. <form method="post" action="logincheck.php" name="form1">   
  97. <table width="854" height="48" border="0" cellpadding="0" cellspacing="0" align="center">   
  98.   <tr>   
  99.     <td background="../images/ml_01.gif" style="text-indent:620px; color:#FFFFFF"><a href="">设为首页</a> | <a href="">加入收藏</a> | <a href="">3G开发者联盟</a></td>   
  100.   </tr>   
  101. </table>   
  102.   
  103. <table width="854" height="381" border="0" cellpadding="0" cellspacing="0" align="center">   
  104.   <tr>   
  105.     <td width="288" height="112" style="background-image:url(../images/ml_02.gif)"></td>   
  106.     <td width="291" height="112" style="background-image:url(../images/ml_03.gif)"></td>   
  107.     <td width="275" height="112" style="background-image:url(../images/ml_04.gif)"></td>   
  108.   </tr>   
  109.   <tr>   
  110.     <td width="288" height="39" style="background-image:url(../images/ml_05.gif)"></td>   
  111.     <td style="background-image:url(../images/ml_06.gif);" width="291" height="39">              <input type="text" name="user" maxlength="20" class="input-border" /></td>   
  112.     <td width="275" height="39" style="background-image:url(../images/ml_07.gif)"></td>   
  113.   </tr>   
  114.   <tr>   
  115.     <td width="288" height="39" style="background-image:url(../images/ml_08.gif)"></td>   
  116.     <td width="291" height="39" style="background-image:url(../images/ml_09.gif)">              <input type="password" name="password" maxlength="20" class="input-border1"> <a href="" class="w">忘记密码?</a></td>   
  117.     <td width="275" height="39" style="background-image:url(../images/ml_10.gif)"></td>   
  118.   </tr>   
  119.   <tr>   
  120.     <td width="288" height="25" style="background-image:url(../images/ml_11.gif)"></td>   
  121.     <td valign="middle" width="291" height="25" style="background-image:url(../images/ml_12.gif);color:#666">       <input type="checkbox" id="showsaveUser" name="showsaveUser"></td>   
  122.     <td width="275" height="25" style="background-image:url(../images/ml_13.gif)"></td>   
  123.   </tr>   
  124.   <tr>   
  125.     <td width="288" height="41" style="background-image:url(../images/ml_14.gif)"></td>   
  126.     <td width="291" height="41" style="background-image:url(../images/ml_15.gif);"><input type="submit" value="" class="login-b"  onMouseOver="this.className='login-b2'" onMouseDown="this.className='login-b3'" onMouseOut="this.className='login-b'"/></td>   
  127.     <td width="275" height="41" style="background-image:url(../images/ml_16.gif)"></td>   
  128.   </tr>   
  129.   <tr>   
  130.     <td width="288" height="19" style="background-image:url(../images/ml_17.gif)"></td>   
  131.     <td><img src="../images/ml_18.gif" width="291" height="19" alt=""></td>   
  132.     <td width="275" height="19" style="background-image:url(../images/ml_19.gif)"></td>   
  133.   </tr>   
  134.   <tr>   
  135.     <td width="288" height="27" style="background-image:url(../images/ml_20.gif)"></td>   
  136.     <td width="291" height="27" style="background-image:url(../images/ml_21.gif); color:#666">您还没有<font face="Arial">CSDN</font>的帐号吗？  <a href="" class="r">请立即注册</a></td>   
  137.     <td width="275" height="27" style="background-image:url(../images/ml_22.gif)"></td>   
  138.   </tr>   
  139.   <tr>   
  140.     <td width="288" height="79" style="background-image:url(../images/ml_23.gif)"></td>   
  141.     <td width="291" height="79" style="background-image:url(../images/ml_24.gif)"></td>   
  142.     <td width="275" height="79" style="background-image:url(../images/ml_25.gif)"></td>   
  143.   </tr>   
  144. </table>   
  145.   
  146. <table width="854" height="151" border="0" cellpadding="0" cellspacing="0" align="center">   
  147.   <tr>   
  148.     <td><img src="../images/ml_26.gif" width="854" height="151" alt=""></td>   
  149.   </tr>   
  150. </table>   
  151. </form>   
  152. </body>   
  153. </html>   

登陆处理逻辑页面logincheck.php
 

Code:
  1. <?php   
  2. session_start();   
  3. include '../include/dbconn.php';   
  4. //定义sql   
  5. $sql="select id,username from member where username='{$_POST['user']}' and password='{$_POST['password']}'";   
  6.   
  7. //执行查询   
  8. $rs=mysql_query($sql);   
  9. //取出结果集的个数   
  10. $result=mysql_num_rows($rs);   
  11.   
  12. //判断是否查询成功   
  13. if($result){   
  14.     //将查询数据存放到session中   
  15.     $rows=mysql_fetch_assoc($rs);   
  16.     $_SESSION['username']=$rows['username'];   
  17.     $_SESSION['uid']=$rows['id'];   
  18.     //登陆成功跳转到首页   
  19.     header('location:./success.php?forward=./index.php&info=1');   
  20.        
  21. }else{   
  22.     //登陆失败，返回登陆页   
  23.     header('location:./login.html');   
  24. }   
  25. ?>  

最为关键的是，当用户登陆后提示用户登陆成功信息，这里我做了一个通用的页面 success.php,这个页面接受用户的请求，并且进行重定位url，同时接受提示消息的编号值，根据编号值使用switch case 语句定义要显示的内容，最后显示出来，具体代码如下：

 

Code:
  1. <?php   
  2. //接收用户的去向（forward）   
  3. $forward=$_GET['forward'];   
  4. //接受信息提示内容编号   
  5. $info=$_GET['info'];   
  6.   
  7.   
  8. switch($info){   
  9.        
  10.     case 1:$str="登陆成功！";break;   
  11.     case 2:$str="插入成功！";break;   
  12.     case 3:$str="删除成功！";break;   
  13.     case 4:$str="更新成功！<br>本次操作影响了 {$_GET['num']} 条记录";break;   
  14.     case 5:$str="信息发送成功！";break;   
  15.     case 6:$str="收件人不存在！";break;   
  16.     case 7:$str="当前用户已成功注销";break;   
  17.     case 8:$str="请登录后操作！";break;   
  18.        
  19.     default:$str="操作成功！";   
  20.     }   
  21. ?>   
  22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  23. <html xmlns="http://www.w3.org/1999/xhtml">   
  24. <head>   
  25. <link href="../css/style.css" type="text/css" rel="stylesheet" />   
  26. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  27. <script language="javascript" type="text/javascript" src="../script/jquery-1.5.1.min.js"></script>   
  28.   
  29. <script language="javascript" type="text/javascript">   
  30.   
  31. $(function(){   
  32.        
  33.     /**********弹出层效果开始*************/     
  34.         //获得整个浏览器的宽度     
  35.         var bwidth=$(window).width();   
  36.         //获得整个浏览器的高度   
  37.         var bheight=$(window).height();   
  38.         //获得上下滚动条滚动的高度   
  39.         var sTop=$(window).scrollTop();   
  40.            
  41.         //获得左右滚动条滚动的宽度   
  42.         var sLeft=$(window).scrollLeft();   
  43.         //获得窗口的宽度   
  44.         var winwidth=$("#center").width();   
  45.         //获得整个窗口的高度   
  46.         var winheight=$("#center").height();   
  47.         //计算弹出窗口的坐标   
  48.         var left1=sLeft+(bwidth-winwidth)/2;   
  49.         var top1=sTop+(bheight-winheight)/2;   
  50.            
  51.         //设置窗口的样式，并显示出窗口出来   
  52.         $("#center").css("left",left1).css("top",top1);   
  53.         //设置窗口显示方式为show   
  54.         $("#center").show("slow");   
  55.            
  56.            
  57.         $(".title img").click(function(){   
  58.                
  59.             $(this).parent().parent().hide("slow");   
  60.                
  61.         });   
  62.            
  63.        
  64. });   
  65.   
  66. </script>   
  67.   
  68. <title>成功提示</title>   
  69. </head>   
  70.   
  71. <body>   
  72.   
  73. <script language="javascript" type="text/javascript">   
  74.  function forward1(){   
  75.         
  76.  location='<?php echo $forward;?>';   
  77.  }   
  78.  setTimeout("forward1()",3000);   
  79. </script>   
  80.   
  81. <div class="window" id="center">   
  82.   <div class="title"><img src="../../images/close.jpg" />信息提示</div>   
  83.   <div class="content"><br><br><font color="#FF0000"><b><?php echo $str;?></b></font><br>三秒钟以后页面自动跳转</div>   
  84. </div>   
  85.   
  86. </body>   
  87. </html>  

 [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统（三） 主要讲解如何使用jQuery实现分页、已读/未读标记等功能，敬请留意查阅，请支持本人原创论坛，原创地址见下面。

 [原创地址]    [源码下载]    [更多原创，多多支持多]

# jquery # php
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开源成为金融领域创新发展的新动力引擎

开源成为金融领域创新发展的新动力引擎

avatar 开放原子开发者工作坊

开源成为推动城市数字化转型的核心动力

城市，不仅是人们工作与生活的基本载体，更是承载着亿万人民的希望与梦想。近年来，我国智慧城市建设如火如荼，开源技术的深度融合为其发展注入了新的活力。在民生、环保、公共安全、城市服务等多个领域，开源技术的应用不仅为民众带来了切实的便捷，而且促进了政府决策的科学化，显著提升了城市综合治理能力。

avatar 开放原子开发者工作坊

OpenLoong项目通过技术监督委员会（TOC）评审

OpenLoong项目通过技术监督委员会（TOC）评审

avatar 开放原子开发者工作坊