.jpg)
下面由thinkphp框架教程欄目給大家介紹thinkphp5.1和php、vue.js實(shí)現(xiàn)前后端分離和交互，希望對(duì)需要的朋友有所幫助！
主要目標(biāo)是使用vue.js把前端獲取的賬號(hào)和密碼傳到后臺(tái)，然后使用tp5.1框架獲取前端的值，并返回token等一些值。然后使用localstorage.setitem()把數(shù)據(jù)存入前端。在之后的訪問中，把localstorage.setitem()保存的值返回到后臺(tái)，使后臺(tái)獲取相應(yīng)的值，并根據(jù)這個(gè)值獲取數(shù)據(jù)庫的值，并判斷這個(gè)值是否成立，最后把成功或者失敗的指令或者值返回到前端。前端根據(jù)獲得的值實(shí)現(xiàn)某項(xiàng)操作，或者跳轉(zhuǎn)。
1.準(zhǔn)備工作，在前端login.html調(diào)用vue.js和axios.js。這里還調(diào)用了餓了嗎的一些簡(jiǎn)單ui的使用。
<script></script>//vue.js的使用 <script></script>//axios的使用 <link><script></script>//餓了嗎ui?js和css的調(diào)用。
vue.js和axios.js的詳細(xì)使用。詳細(xì)可看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: '#app',//對(duì)應(yīng)使用id="app"獲取信息。 data() { return { admin: "", password: "", dd:"",//定義是三個(gè)變量初始化都為空可在id="app"的頁面編寫{{admin}}返回admin的值 } }, methods: {//參數(shù)的傳遞 login: function () { var $this = this; console.log("登錄觸發(fā)");//打印返回 axios({ method: 'post', url: 'http://127.0.0.1/xiangbb/tp5/public/user', data: { admin: this.admin, password: this.password } })//使用axios根據(jù)地址把data的數(shù)組值根據(jù)post進(jìn)行傳輸，this.admin和this.password是定義<input v-model="admin">獲取 .then(function (response) {//成功400或401 執(zhí)行。 //$this.dd = response.data;//獲取后臺(tái)數(shù)據(jù) //console.log(response.data.access_token); localStorage.setItem('token', response.data.access_token);//本地存儲(chǔ)token值 window.location.href="../index/index.html";//跳轉(zhuǎn)頁面 }) .catch(function (error) { $this.$message.error('賬號(hào)或密碼錯(cuò)誤！');//失敗，出現(xiàn)錯(cuò)誤，返回彈窗 console.log(error); }); } }, mounted() {//在模板渲染成html后調(diào)用,這里未使用，配套的created在模板渲染成html前調(diào)用 } }) </script>
還需設(shè)置config配置文件 app.php
立即學(xué)習(xí)“PHP免費(fèi)學(xué)習(xí)筆記（深入）”；
'default_return_type'????=>?'json',
在database.php連接數(shù)據(jù)庫
下面是后臺(tái)獲取數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行操作。這里面主要使用了tp5.1的請(qǐng)求和模型，還有就是對(duì)jwt的使用，詳細(xì)看https://github.com/firebase/php-jwt
<?php namespace appindexcontroller;//表示放置位置 use thinkController;//控制器基類 use FirebaseJWTJWT;//調(diào)用庫 jwt 類 use thinkRequest;//請(qǐng)求對(duì)象類 use appcommonmodelUser as Muser;//模型 class User extends Controller { public function user() { //echo $_COOKIE["user"];//前端傳參到這里 $admin=input('post.admin'); $password=input('post.password');//獲取前端 $user=db('user')->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",//??簽發(fā)地址 ????????????????"aud"?=>?"http://127.0.0.1/xiangbb/qian/login/login.html#",//面向?qū)ο?/b>地址 ????????????????"iat"?=>?time(),//創(chuàng)建時(shí)間 ????????????????"nbf"?=>?time(),//生效時(shí)間 ????????????????'exp'?=>?time()?+?3600,?//過期時(shí)間-10min ????????????????'sub'?=>?$user['id'],//傳遞的id值 ????????????); ???????????? ????????????$jwt?=?JWT::encode($token,?$key);//加密 ????????????//$decoded?=?JWT::decode($jwt,?$key,?array('HS256'));//解密 ????????????return?[ ????????????????"access_token"?=>?$jwt,//加密數(shù)據(jù) ????????????????"token_type"?=>?"Bearer",//類別 ????????????????"expires_in"?=>?3600,//?過期時(shí)間 ????????????];//返回?cái)?shù)組 ????????} ????????return?response()->code(401);//如找不到??返回401指令 ???? ????} }
后臺(tái)User.php根據(jù)獲取的數(shù)據(jù)跟數(shù)據(jù)庫進(jìn)行比對(duì)，但賬號(hào)密碼正確時(shí)，返回一串帶有那個(gè)賬戶的唯一id和別的數(shù)據(jù)返回到前端，前端保存該值，并使用該值獲取該用戶的相應(yīng)數(shù)據(jù)并顯示在前端。一樣，把那幾個(gè)js調(diào)用，然后js代碼如下：
<script> const app = new Vue({ el: '#app', data() { return { token: "", http: {}, } }, methods: { }, created() { this.token = localStorage.getItem('token');//在登錄頁面驗(yàn)證成功而保存的token值，進(jìn)行獲取 this.http = axios.create({//整理token的值 baseURL: 'http://127.0.0.1/xiangbb/tp5/public/', timeout: 5000, headers: {'Authorization': "Bearer "+this.token} }); if(!this.token)//若this.token不存在時(shí)返回登錄頁面 { window.location.href="../login/login.html"; } else { this.http.get('/user')//調(diào)用上面的http，把值傳回后臺(tái) .then(function (response) { console.log(response); }) .catch(function (error) {//token錯(cuò)誤返回登錄頁面 window.location.href="../login/login.html"; console.log(error); }); } } }) </script>
路由route.php接收，并跳轉(zhuǎn)到中間件，對(duì)傳遞的值進(jìn)行驗(yàn)證，以此判斷是否進(jìn)入控制器，進(jìn)行以后的操作，使用中間件，方便以后判定不需要在控制器每個(gè)函數(shù)上都寫上方法。
Route::rule('user','index/user/show','GET')->middleware('verify_user');//路由接收，跳轉(zhuǎn)中間件判斷
中間件VerifyUser.php代碼如下：
<?php namespace apphttpmiddleware;//文件位置 use thinkRequest;//請(qǐng)求 use FirebaseJWTJWT;//jwt use appcommonmodelUser;//模型 class VerifyUser { public function handle(Request $request, Closure $next)//使用模型 { $Authorization = $request->header('Authorization');//獲取前端傳遞的值 ????????if(!isset($Authorization))?return?response()->code(401);//檢測(cè)變量是否存在，不存在返回401 ????????$key?=config("app.jwt_key");//key值?定義在config下的app的jwt_key ????????$token_type?=?explode("?",$Authorization)[0];//根據(jù)空格隔開獲取第零個(gè)字符串 ????????$token?=?explode("?",$Authorization)[1];//根據(jù)空格隔開獲取第一個(gè)字符串 ???????? ????????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->exp<time>code(401); ????????????}catch(Exception?$e)?{?//捕獲異常，返回401，可能解密失敗，$e可返回失敗原因 ????????????????return?response()->code(401); ????????????????} ????????} ????????else?{//$token_type錯(cuò)誤也返回401 ????????????return?response()->code(401); ????????} ????????return?$next($request);//當(dāng)沒有執(zhí)行401時(shí)，執(zhí)行到下一個(gè)請(qǐng)求，可能有多個(gè)中間件或者路由。 ????} ???????? }</time>
當(dāng)中間件執(zhí)行完，則跳轉(zhuǎn)到控制器User.php
????public?function?show(Request?$request)//請(qǐng)求，依賴注入 ????{ ???????$user?=?Muser::get($request->user['id']);//??模型，獲取數(shù)據(jù)庫id相同的表數(shù)據(jù)，默認(rèn)表名為Muser的原名?User ???????return?$user;//返回對(duì)應(yīng)數(shù)據(jù) ????}
至此，一個(gè)簡(jiǎn)單的關(guān)于賬號(hào)密碼輸入登陸的前后端分離制作好了，代碼中應(yīng)該還不夠嚴(yán)謹(jǐn)，還需要優(yōu)化。
.png)
