thinkphp5.1和php、vue.js實作前後端分離與交互

下面由thinkphp框架教學欄位介紹thinkphp5.1和php、vue.js實現前後端分離和交互，希望對需要的朋友有所幫助！

主要目標是使用vue.js把前端取得的帳號和密碼傳到後台，然後使用tp5.1框架取得前端的值，並回傳token等一些值。然後使用localStorage.setItem()把資料存入前端。在之後的訪問中，把localStorage.setItem()保存的值返回到後台，使後台獲取相應的值，並根據這個值獲取資料庫的值，並判斷這個值是否成立，最後把成功或者失敗的指令或者值返回前端。前端根據所獲得的值實現某項操作，或是跳轉。

1.準備工作，在前端login.html呼叫vue.js和axios.js。這裡還調用了餓了嗎的一些簡單ui的使用。

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>//vue.js的使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>//axios的使用

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>//饿了吗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傳值程式碼如下：

<script>//返回信息到前端
		
			const app = new Vue({
				el: &#39;#app&#39;,//对应使用id="app"获取信息。
				data() {
					return {
						admin: "",
						password: "",
						dd:"",//定义是三个变量初始化都为空可在id="app"的页面编写{{admin}}返回admin的值
					}
				},
				methods: {//参数的传递
					login: function () {
						var $this = this;
						console.log("登录触发");//打印返回
						axios({
						method: &#39;post&#39;,
						url: &#39;http://127.0.0.1/xiangbb/tp5/public/user&#39;,
						data: {
							admin: this.admin,
							password: this.password
						}
						})//使用axios根据地址把data的数组值根据post进行传输，this.admin和this.password是定义<input v-model="admin">获取
						.then(function (response) {//成功400或401 执行。
							//$this.dd = response.data;//获取后台数据
							//console.log(response.data.access_token);
							localStorage.setItem(&#39;token&#39;, response.data.access_token);//本地存储token值
							window.location.href="../index/index.html";//跳转页面
						})
						.catch(function (error) {
							$this.$message.error(&#39;账号或密码错误！&#39;);//失败，出现错误，返回弹窗
							console.log(error);

						});

					}
				},
				mounted() {//在模板渲染成html后调用,这里未使用，配套的created在模板渲染成html前调用
					
				}
			})
		</script>

還需設定config設定檔app.php

'default_return_type'    => 'json',

在database.php連接資料庫

下面是後台取得數據，對數據進行操作。這裡面主要使用了tp5.1的請求和模型，還有就是jwt的使用，詳細看https://github.com/firebase/php-jwt

<?php
namespace app\index\controller;//表示放置位置
use think\Controller;//控制器基类
use \Firebase\JWT\JWT;//调用库  jwt 类
use think\Request;//请求对象类
use app\common\model\User as Muser;//模型
class User extends Controller
{
    public function user()
    {
        
        //echo $_COOKIE["user"];//前端传参到这里
        $admin=input(&#39;post.admin&#39;);
        $password=input(&#39;post.password&#39;);//获取前端
        $user=db(&#39;user&#39;)->where(&#39;admin&#39;,$admin)->where(&#39;password&#39;,$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(),//生效时间
                &#39;exp&#39; => time() + 3600, //过期时间-10min
                &#39;sub&#39; => $user[&#39;id&#39;],//传递的id值
            );
            
            $jwt = JWT::encode($token, $key);//加密
            //$decoded = JWT::decode($jwt, $key, array(&#39;HS256&#39;));//解密
            return [
                "access_token" => $jwt,//加密数据
                "token_type" => "Bearer",//类别
                "expires_in" => 3600,// 过期时间
            ];//返回数组

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

後台User.php根據取得的資料跟資料庫進行比對，但帳號密碼正確時，傳回一串帶有該帳戶的唯一id和別的資料回傳到前端，前端會儲存該值，並使用該值取得該使用者的對應資料並顯示在前端。一樣，把那幾個js調用，然後js程式碼如下：

	<script>
		const app = new Vue({
				el: &#39;#app&#39;,
				data() {
					return {
						
						token: "",
						http: {},
						}
						
						
					},
				methods: {
				},
				created() {
				
					this.token = localStorage.getItem(&#39;token&#39;);//在登录页面验证成功而保存的token值，进行获取
					this.http = axios.create({//整理token的值
							
							baseURL: &#39;http://127.0.0.1/xiangbb/tp5/public/&#39;,
							timeout: 5000,
							headers: {&#39;Authorization&#39;: "Bearer "+this.token}
					});
					if(!this.token)//若this.token不存在时返回登录页面
					{
						window.location.href="../login/login.html";
					}
					else
					{
						this.http.get(&#39;/user&#39;)//调用上面的http，把值传回后台
						.then(function (response) {
							console.log(response);
						})
						.catch(function (error) {//token错误返回登录页面
							window.location.href="../login/login.html";
							console.log(error);
						});
					}
				}
			})
	</script>

路由route.php接收，並跳到中間件，對傳遞的值進行驗證，以此判斷是否進入控制器，進行以後的操作，使用中間件，方便以後判定不需要在控制器每個函數上都寫上方法。

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

中間件VerifyUser.php程式碼如下：

<?php

namespace app\http\middleware;//文件位置
use think\Request;//请求
use \Firebase\JWT\JWT;//jwt
use app\common\model\User;//模型
class VerifyUser
{
    public function handle(Request $request, \Closure $next)//使用模型
    {
        $Authorization = $request->header(&#39;Authorization&#39;);//获取前端传递的值
        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 == &#39;Bearer&#39;)//判断$token_type是否正确
        {
            
            try {
                $decoded = JWT::decode($token, $key, array(&#39;HS256&#39;));//解密
                $request->user = $user = User::get($decoded->sub);//获取解密后的用户id
                if(!$user||$decoded->exp<time())//如果id不存在或者时间超出，返回401
                    return response()->code(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實作前後端分離與交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！