php 异步登陆和退出案列

一、为什么异步登陆

同步处理方式登陆功能的弊端 -> 跳转到了新的页面，用户体验不是很好；

二、基于thinkphp3.2.3框架，用到的知识点：

1.用到ajax，此案例用到$.post方法：$.post(url,[data],[fn],[type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

2.js的封装：layer是一个很好的弹出层插件，此案列也用到，地址：http://layer.layui.com/

var dialog = {
    // 错误弹出层
    error: function(message) {
        layer.open({
            content:message,
            icon:2,
            title : '错误提示',
        });
    },
    //成功弹出层
    success : function(message,url) {
        layer.open({
            content : message,
            icon : 1,
            yes : function(){
                location.href=url;
            },
        });
    },
    // 确认弹出层
    confirm : function(message, url) {
        layer.open({
            content : message,
            icon:3,
            btn : ['是','否'],
            yes : function(){
                location.href=url;
            },
        });
    },
    //无需跳转到指定页面的确认弹出层
    toconfirm : function(message) {
        layer.open({
            content : message,
            icon:3,
            btn : ['确定'],
        });
    },
}

思路

1.前台页面输入用户名和密码，点击登陆；

2.登录按钮出发login.js，在login.js先进行前端用户名密码是否为空验证，然后利用ajax异步提交到check();

3.check方法进行数据库查询验证，然后返回login.js json形式的数据；

4.login.js根据json里面的status和message调用弹出层来显示登陆是否成功，如果成功保存在session中，跳转到主页；

5.点击主页退出按钮链接到loginout方法退出；

架构

//前台登陆页面
<div class="s_center container col-lg-6 ">
    <form class="form-signin" enctype="multipart/form-data"  method="post">
      <h2 class="form-signin-heading">请登录</h2>
      <label class="sr-only">用户名</label>
      <input type="text"  class="form-control" name="username" placeholder="请填写用户名" required autofocus>
      <br />
      <label  class="sr-only">密码</label>
      <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
      <br />
      <button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()" >登录</button>
    </form>
</div> <!-- /container -->
<script src="/Public/js/jquery.js"></script>
<script src="/Public/js/dialog/layer.js"></script>
<script src="/Public/js/dialog.js"></script>
<script src="/Public/js/admin/login.js"></script>

/**
 *  前端登陆业务类
 */
var login = {
    check : function() {
        //  获取登陆页面中的用户名和密码
        var username = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();
        //  检验账号密码是否为空
        if (!username) 
        {
            dialog.error('用户名不能为空');    
        }
        if (!password) 
        {
            dialog.error('密码不能为空');    
        }
        //  执行异步请求    $.post
        var url = "/index.php?m=admin&c=login&a=check";
        var data = {'username':username,'password':password};
        $.post(url,data,function(result){
            if(result.status == 0)
            {
                return dialog.error(result.message);
            }
            if (result.status == 1) 
            {
                return dialog.success(result.message,'/index.php?m=admin&c=index');    
            }
        },"JSON");
    }
}

<?php
namespace Admin\Controller;
use Think\Controller;
/**
 * use Common\Model 这块可以不需要使用，框架默认会加载里面的内容
 */
class LoginController extends Controller {

    public function index(){
        if (session('adminUser')) {
            $this->redirect('/index.php?m=admin&c=index');
        }
    	return $this->display();
    }

    public function check()
    {
        //测试能否接收到异步传来的登陆信息
        //print_r($_POST);
        //测试成功，然后进行服务端对数据进行强校验
        $username = $_POST['username'];
        $password = $_POST['password'];
        if (!trim($username)) 
        {
            return show(0, '用户名不能为空');
        }
        if (!trim($password)) {
            return show(0, '密码不能为空');
        }
        //调用admin模型层的方法进行查询
        $ret = D('Admin')->getAdminByUsername($username);
        if (!$ret) {
            return show(0,'该用户不存在');
        }
        //  测试$ret
        // print_r($ret);
        //  测试成功，进行下一步密码校验
        if ($ret['password'] != getMd5Password($password)) 
        {
            return show(0, '密码错误');
        } 
        session('adminUser',$ret);
        return show(1, '登陆成功');
    }
    
    public function loginout()
    {
        session('adminUser', null);
        $this->redirect('/index.php?m=admin&c=login');
    }
}

<?php
//tp框架添加第三行代码增加数据库配置，最后一行用于密码md5加密链接
return array(
	//'配置项'=>'配置值'

    //URL地址不区分大小写
    'URL_CASE_INSENSITIVE' =>true,
    'URL_MODEL'=>0,
    'LOAD_EXT_CONFIG'   =>  'db',
    'MD5_PRE'       =>  'sing_cms',
);

<?php
namespace Common\Model;
use Think\Model;

class AdminModel extends Model
{
    private $_db = '';
    public function __construct()
    {
        $this->_db = M('admin');
    }
    //根据用户名查找admin表信息
    public function getAdminByUsername($username)
    {
        $ret = $this->_db->where('username="'.$username.'"')->find();
        return $ret;
    }
}

<?php

/**
 *  公用的方法
 */

//  改函数返回值用于$.post的接收数据
function show($status, $message, $data=array())
{
    $result = array(
        'status'        =>      $status,
        'message'       =>      $message,
        'data'          =>      $data,
    );
    //变量进行 JSON 编码
    exit(json_encode($result));
}

//  密码加密
function getMd5Password($password)
{
    return md5($password . C('MD5_PRE'));
}

<?php
return array(
    'DB_TYPE'   =>  'mysql',
    'DB_HOST'   =>  '127.0.0.1',
    'DB_USER'   =>  '3638899',
    'DB_PWD'    =>  '123456',
    'DB_PORT'   =>  3306,
    'DB_NAME'   =>  'imooc_singcms',
    'DB_CHARSET'    =>  'utf8',
    'DB_PREFIX'     =>  'cms_',
);

php 异步登陆和退出案列

猜你喜欢