以下は、フロントエンドとバックエンドの分離を実現するための thinkphp5.1、php、および vue.js を紹介する thinkphp フレームワーク チュートリアル コラムです。必要としている友達に役立つことを願っています。助けてください!
主な目的は、vue.js を使用してフロントエンドで取得したアカウント番号とパスワードをバックエンドに転送し、その後 tp5.1 フレームワークを使用してフロントエンドの値とトークンなどを取得することです。価値観。次に、localStorage.setItem() を使用して、データをフロントエンドに保存します。以降のアクセスでは、localStorage.setItem() によって保存された値をバックグラウンドに返し、バックグラウンドが対応する値を取得し、この値に基づいてデータベースの値を取得し、値が確立されているかどうかを判断できるようにします。成功または失敗した命令、または値がフロントエンドに返されます。フロントエンドは取得した値に基づいて演算やジャンプを実行します。
1. 準備作業として、フロントエンドのlogin.htmlでvue.jsとaxios.jsを呼び出します。 Are You Hungry のいくつかの単純な 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: '#app',//对应使用id="app"获取信息。
data() {
return {
admin: "",
password: "",
dd:"",//定义是三个变量初始化都为空可在id="app"的页面编写{{admin}}返回admin的值
}
},
methods: {//参数的传递
login: function () {
var $this = this;
console.log("登录触发");//打印返回
axios({
method: 'post',
url: 'http://127.0.0.1/xiangbb/tp5/public/user',
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('token', response.data.access_token);//本地存储token值
window.location.href="../index/index.html";//跳转页面
})
.catch(function (error) {
$this.$message.error('账号或密码错误！');//失败，出现错误，返回弹窗
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('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",// 签发地址
"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指令
}
}ログイン後にコピー
Background User.php を参照してください。データはデータベースと比較されますが、アカウントのパスワードが正しい場合は、そのアカウントの一意の ID とその他のデータを含む文字列がフロントエンドに返されます。フロントエンドは値を保存し、その値を使用して対応するパスワードを取得します。ユーザーのデータを取得してフロントエンドに表示します。同じように、これらの js を呼び出すと、js コードは次のようになります:
<script>
const app = new Vue({
el: '#app',
data() {
return {
token: "",
http: {},
}
},
methods: {
},
created() {
this.token = localStorage.getItem('token');//在登录页面验证成功而保存的token值，进行获取
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不存在时返回登录页面
{
window.location.href="../login/login.html";
}
else
{
this.http.get('/user')//调用上面的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('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->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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
