JQuery EasyUI(51)

古城微笑少年丶 2023-06-29 02:56 37阅读 0赞

##                  第三十九章： 后台管理界面--管理页设计 ##

### 学习要点： ###

> 1.  登陆验证
> 2.  管理页设计

--------------------

###  一、登陆验证： ###

首先，创建一个数据库：easyui

其次，创建一个表：easyui-admin

然后，创建三个字段，id（自动编号）、manager（管理员账号）、password（管理员密码）、create（创建时间）

#login{
       padding:6px 0 0 0;
    }
    p{
       height:22px;
       line-height:22px;
       padding:4px 0 0 25px;
    }
    .textbox{
       height:22px;
       padding:0 2px; 
    }
    #btn{
       text-align:center;
    }
    .easyui-linkbutton{
       padding:0 10xp;
    }

$(function(){
    
      $('#login').dialog({
          title:'后台管理',
          width:300px,
          height:180px,
          modal:true,
          iconCls:'icon-login',
          buttons:'#btn',    
       });
    
      //管理员账号验证
      $('#manager').validatebox({
           required:true,
           missingMessage:'请输入管理员账号：',
           invalidMessage:'管理员账号不得为空',
       });
    
      //管理员密码验证
      $('#password').validatebox({
           required:true,
           validType：'length[6,30]',
           missingMessage:'请输入管理员密码：',
           invalidMessage:'管理员密码不得为空',
       });
    
      //加载时判断验证
        if(!$('#manager').validatebox('isValid')){
               $('#manager').focus();
          }else if(!$('#password').validatebox('isValid')){
               $('#password').focus();
         }
    
    
      //单击登陆
      $('#btn a').click(function(){
            if(!$('#manager').validatebox('isValid')){
               $('#manager').focus();
            }else if(!$('#password').validatebox('isValid')){
               $('#password').focus();
           }else{
              $.ajax({
                url:'checklogin.php',
                type:'post',
                data:{
                  manager:$('#manager').val(),
                  password:$('#password').val(),
               },
                beforeSend：function(){
                 $.messager.progress({
                     text:'登录中……',    
                  });
                },
               success:function(data,response,status){
                    $.messager.progress('close');
                    if(data>0){
                          location.href = 'admin.php';
                    }else(){
                      $.messager.alert('登陆失败','用户名或者密码错误！','warning',function(){
                          $('#password').select();
                      });
                    }
                 }
             });
          }
        });
     });

//checklogin.php
    <?php
    
       session_start();
        
       require 'config.php';
    
       $manager = $_POST['manager'];
    
       $password = ($_POST['password']);
    
       $query = mysql_query("SELECT id FORM easyui_admin WHERE manager = '$manager' AND password = '$password'LIMIT 1")or die('SQl 错误！');
    
       if(!!mysql_fetch_array($query,MYSQL_ASSOC)){
    
          $_SESSION['admin'] = $manager;
            echo 1;
         }else{
            echo 0;
         }   
    ?>

<!DOCTYPE html>
    <html>
      <head>
        <title>JQuery Easy UI</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>  
        <link rel="stylesheet" type="text/css" href="css/admin.css"/>              
      </head>
      <body class="easyui-layout">
        <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;">
           <div class="logo">后台管理</div>
           <div class="logout">
             你好，<?php echo $_SESSION['admin']?> | <a href="logout.php">退出</a>
           </div>
        </div>
        <div data-options="region:'south',title:'footer',split:true,noheader:true" style="height:35px;line-height:30px;text-align:center;">
         @2009-2015 瓢城 web 俱乐部.Powered by PHP and EasyUI.
        </div>
        <div data-options="region:'west',title:'导航',split:true" style="height:180px;padding:10px;"></div>
        <div data-options="region:'center'" style="overflow:hidden;">
           <div id="tabs">
               <div title="起始页" style="padding:0 10px;display:block;">欢迎来到后台管理系统</div>
           </div>
        </div>
     
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
        <script type="text/javascript" src="js/admin.js"></script> 
      </body>
    </html>

//admin.php
    <?php
    
       session_start();
    
       if(!isset($_SESSION['admin'])){
    
          header(location:login.php);
         } 
    ?>

$(function(){
       $('#tabs').tabs({
          fit:true,
          border:false,
      });   
    });

.logo{
        width:180px;
        height:50px;
        line-height:50px;
        text-align:center;
        font-size:20px;
        font-weight:bold;
        float:left;
        color:#fff;
    }
    .logout{
        float:right;
        padding:30px 15xp 0 0;
        color:#fff;
    }
    
    a{
        color:#fff;
        text-decoration:none;
    }
    
    a:hover{
        text-decoration:underline;
    }

作者：Roger\_CoderLife

链接：[https://blog.csdn.net/Roger\_CoderLife/article/details/103922695][https_blog.csdn.net_Roger_CoderLife_article_details_103922695]

本文根据[网易云课堂JQuery EasyUI视频教程][JQuery EasyUI]翻译成文档，转载请注明原文出处，欢迎转载

[https_blog.csdn.net_Roger_CoderLife_article_details_103922695]: https://blog.csdn.net/Roger_CoderLife/article/details/103922695
[JQuery EasyUI]: https://study.163.com/course/courseMain.htm?courseId=943002