TP5.0实现ajax登录

html部分

1.首先建立好登录页面,这里加上验证码(验证码如何生成的可以参考tp5手册 )

2.给登录按钮一个点击事件,获取输入框里面的值

3.发起ajax请求后端登录接口,接收返回值

4.判断状态码,返回成功状态码后跳转到首页(这里成功状态码为200)

图片:

 

 

 

 

 

 

 

 代码如下:

<div class="login">
    <div class="center">
        <h1>Loginh1>
        <div class="inputLi">
            <strong>账户strong>
            <input type="text" id="username" placeholder="请输入管理员名称">
        div>
        <div class="inputLi">
            <strong>密码strong>
            <input type="password" id="password" placeholder="请输入密码">
        div>
        <div class="inputLi">
            <strong>验证码strong>
            <input type="text" id="code" placeholder="请输入验证码">
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}'+'?'+Math.random()">
        div>
        <div class="inputLi">
            <button id="login">登录button>
        div>
    div>
div>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
<script>
    $("#login").click(function (){
        var username = $("#username").val();
        var password = $("#password").val();
        var code = $("#code").val();
        var __token__ = "{$Request.token}";

        $.ajax({
            url:'http://www.month.skill.com/api/dologin',
            type:'post',
            data:{
                'username':username,
                'password':password,
                'code':code,
                '__token__':__token__
            },
            dataType:'json',
            success:function (res){
                console.log(res)
                if (res.code==200){
                    localStorage.setItem('token',res.data);
                    window.location.href='http://www.month.skill.com/admin/index/index?token='+res.data;
                }else {
                    alert(res.msg);
                }
            }
        })
    })
script>

 PHP 部分

1.先接收参数

2.验证参数是否合法,必填

3.调用模型看用户是否存在,密码是否正确

4.返回结果

 

图片

 

 

 代码 如下

控制器部分

  //执行登录
    public function doLogin(Request $request)
    {
        //接收参数
        $post = $request->post();
        //验证器验证
        $validate = Loader::validate('User');
        if (!$validate->check($post)) {
            $msg = $validate->getError();
            $arr['code'] = 500;
            $arr['msg'] = $msg;
            return json($arr);
        }
        //密码加密
        $post['password'] = md5($post['password']);
        $result = UserModel::login($post);
        if (!$result) {
            $arr['code'] = 500;
            $arr['msg'] = '登录失败';
            return json($arr);
        }
        //记录登录状态
        session('admin_id', $result['id']);
        //生成token
        $token = Token::createToken($result['id']);
        //记录token
        session('token', $token);
        //将token令牌  返回客户端
        $arr['code'] = 200;
        $arr['msg'] = 'success';
        $arr['data'] = $token;
        return json($arr);
    }

模型部分

//表名
protected $table = 'admin';
//执行登录查询
public static function login($params)
{
  return self::where('username',$params['username'])
         ->where('password',$params['password'])
         ->find();
}

 

 

posted @ 2021-09-02 15:26  晚夜聆风  阅读(157)  评论(0编辑  收藏  举报