La section suivante de la colonne du didacticiel du framework thinkphp vous présentera thinkphp5.1, php et vue.js pour réaliser la séparation front-end et back-end. et l'interaction. J'espère que cela sera utile aux amis qui en ont besoin !
L'objectif principal est d'utiliser vue.js pour transférer le numéro de compte et le mot de passe obtenus par le front-end vers le backend, puis d'utiliser le framework tp5.1 pour obtenir la valeur front-end et le jeton de retour et d'autres valeurs. Utilisez ensuite localStorage.setItem() pour stocker les données dans le front-end. Lors des visites ultérieures, la valeur enregistrée par localStorage.setItem() est renvoyée en arrière-plan, afin que l'arrière-plan puisse obtenir la valeur correspondante, obtenir la valeur de la base de données basée sur cette valeur et déterminer si la valeur est établie. l'instruction réussie ou échouée ou La valeur est renvoyée au frontal. Le frontal implémente une opération ou un saut basé sur la valeur obtenue.
1. Préparation, appelez vue.js et axios.js dans le login.html frontal. Certaines utilisations simples de l'interface utilisateur de Are You Hungry sont également appelées ici.
<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的调用。
Copier après la connexion
Utilisation détaillée de vue.js et axios.js. Pour plus de détails, veuillez consulter le didacticiel https://cn.vuejs.org/v2/guide/ vue.js et le didacticiel https://www.kancloud.cn/yunye/axios/234845
axios.js. Le code de transmission de la valeur front-end login.html est le suivant :
<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>Copier après la connexion
Vous devez également configurer le fichier de configuration app.php
'default_return_type' => 'json',
Copier après la connexion
Connectez-vous à la base de données dans database.php
Ce qui suit est le contexte pour obtenir des données, effectuer des opérations sur les données. Cela utilise principalement les requêtes et les modèles de tp5.1, ainsi que l'utilisation de jwt. Pour plus de détails, voir 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指令
}
}Copier après la connexion
Background User.php obtenu selon. aux données sont comparées à la base de données, mais lorsque le mot de passe du compte est correct, une chaîne avec l'ID unique de ce compte et d'autres données est renvoyée au frontal. Le frontal enregistre la valeur et utilise la valeur pour obtenir la valeur correspondante. données de l’utilisateur et les affiche sur le front-end. Idem, appelez ces js, puis le code js est le suivant :
<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>Copier après la connexion
route route.php le reçoit et passe au middleware pour vérifier la valeur transmise afin de déterminer s'il faut entrer dans le contrôleur Pour les opérations futures, utilisez un middleware pour faciliter les jugements futurs sans écrire de méthodes sur chaque fonction du contrôleur.
Route::rule('user','index/user/show','GET')->middleware('verify_user');//路由接收，跳转中间件判断
Copier après la connexion
Le code du middleware VerifyUser.php est le suivant :
<?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时，执行到下一个请求，可能有多个中间件或者路由。
}
}Copier après la connexion
Lorsque le middleware est exécuté, il passera au contrôleur User.php
public function show(Request $request)//请求，依赖注入
{
$user = Muser::get($request->user['id']);// 模型，获取数据库id相同的表数据，默认表名为Muser的原名 User
return $user;//返回对应数据
}Copier après la connexion
À ce stade, un simple à propos Le front-end et le back-end pour la saisie du compte et du mot de passe pour se connecter ont été séparés, mais le code ne devrait pas être assez rigoureux et doit être optimisé.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
