thinkphp5.1和php、vue.js实现前后端分离和交互的方-创新互联

这篇文章给大家分享的是有关thinkphp5.1和php、vue.js实现前后端分离和交互的方的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网络空间、营销软件、网站建设、太平网站维护、网站推广。

主要目标是使用vue.js把前端获取的账号和密码传到后台,然后使用tp5.1框架获取前端的值,并返回token等一些值。然后使用localStorage.setItem()把数据存入前端。在之后的访问中,把localStorage.setItem()保存的值返回到后台,使后台获取相应的值,并根据这个值获取数据库的值,并判断这个值是否成立,最后把成功或者失败的指令或者值返回到前端。前端根据获得的值实现某项操作,或者跳转。

1.准备工作,在前端login.html调用vue.js和axios.js。这里还调用了饿了吗的一些简单ui的使用。

//vue.js的使用
//axios的使用


//饿了吗ui js和css的调用。

vue.js和axios.js的详细使用。详细可看https://cn.vuejs.org/v2/guide/   vue.js教程和https://www.kancloud.cn/yunye/axios/234845

axios.js的教程。前端login.html传值代码如下:

还需设置config配置文件 app.php

'default_return_type'    => 'json',

在database.php连接数据库

下面是后台获取数据,对数据进行操作。这里面主要使用了tp5.1的请求和模型,还有就是对jwt的使用,详细看https://github.com/firebase/php-jwt

where('admin',$admin)->where('password',$password)->find();//删选
        //\dump($user);
        if($user)//使用jwt方法
        {
            $key = \config("app.jwt_key");//key值,保密,在config的app下的jwt_key
            $token = array(
                "iss" => "http://127.0.0.1/xiangbb/tp5/public/user",//  签发地址
                "aud" => "http://127.0.0.1/xiangbb/qian/login/login.html#",//面向对象地址
                "iat" => time(),//创建时间
                "nbf" => time(),//生效时间
                'exp' => time() + 3600, //过期时间-10min
                'sub' => $user['id'],//传递的id值
            );
            
            $jwt = JWT::encode($token, $key);//加密
            //$decoded = JWT::decode($jwt, $key, array('HS256'));//解密
            return [
                "access_token" => $jwt,//加密数据
                "token_type" => "Bearer",//类别
                "expires_in" => 3600,// 过期时间
            ];//返回数组

        }
        return response()->code(401);//如找不到  返回401指令
    
    }
}

后台User.php根据获取的数据跟数据库进行比对,但账号密码正确时,返回一串带有那个账户的id和别的数据返回到前端,前端保存该值,并使用该值获取该用户的相应数据并显示在前端。一样,把那几个js调用,然后js代码如下:

路由route.php接收,并跳转到中间件,对传递的值进行验证,以此判断是否进入控制器,进行以后的操作,使用中间件,方便以后判定不需要在控制器每个函数上都写上方法。

Route::rule('user','index/user/show','GET')->middleware('verify_user');//路由接收,跳转中间件判断

中间件VerifyUser.php代码如下:

header('Authorization');//获取前端传递的值
        if(!isset($Authorization)) return response()->code(401);//检测变量是否存在,不存在返回401
        $key =\config("app.jwt_key");//key值 定义在config下的app的jwt_key
        $token_type = \explode(" ",$Authorization)[0];//根据空格隔开获取第零个字符串
        $token = \explode(" ",$Authorization)[1];//根据空格隔开获取第一个字符串
        
        if($token_type == 'Bearer')//判断$token_type是否正确
        {
            
            try {
                $decoded = JWT::decode($token, $key, array('HS256'));//解密
                $request->user = $user = User::get($decoded->sub);//获取解密后的用户id
                if(!$user||$decoded->expcode(401);
            }catch(\Exception $e) { //捕获异常,返回401,可能解密失败,$e可返回失败原因
                return response()->code(401);
                }
        }
        else {//$token_type错误也返回401
            return response()->code(401);
        }
        return $next($request);//当没有执行401时,执行到下一个请求,可能有多个中间件或者路由。
    }
        
}

当中间件执行完,则跳转到控制器User.php

    public function show(Request $request)//请求,依赖注入
    {
       $user = Muser::get($request->user['id']);//  模型,获取数据库id相同的表数据,默认表名为Muser的原名 User
       return $user;//返回对应数据
    }

感谢各位的阅读!关于“thinkphp5.1和php、vue.js实现前后端分离和交互的方”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文名称:thinkphp5.1和php、vue.js实现前后端分离和交互的方-创新互联
标题URL:http://myzitong.com/article/csipso.html