下面由thinkphp框架教程栏目给大家介绍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
立即学习“PHP免费学习笔记（深入）”；
'default_return_type' => 'json',
在database.php连接数据库
下面是后台获取数据，对数据进行操作。这里面主要使用了tp5.1的请求和模型，还有就是对jwt的使用，详细看https://github.com/firebase/php-jwt
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
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;//返回对应数据
}至此，一个简单的关于账号密码输入登陆的前后端分离制作好了，代码中应该还不够严谨，还需要优化。
