thinkphp5.1和php、vue.js实现前后端分离和交互ThinkPhp 5.1，php和vue.js实现前端分离和交互，下面，教程栏目，thinkphp,的框架介绍thinkphp5.1，php和vue.js实现前端分离和交互，希望对有需要的朋友有所帮助！
主要目标是使用vue.js将前端获取的账号和密码转移到后台，然后使用tp5.1框架获取前端的值，并返回令牌等一些值。然后使用localStorage.setItem()将数据存储在前端。在后续的访问中，将localStorage.setItem()保存的值返回给后台，让后台获取相应的值，根据这个值获取数据库的值，判断这个值是否有效，最后将成功或失败的指令或值返回给前端。前端根据获得的值执行操作，或者跳转。
1.做好准备，给前端login.html的vue.js和axios.js打电话。在这里，我还调用了饿了么的一些简单ui。
使用脚本src=’ https://cdn . static file . org/vue/2 . 4 . 2/vue . min . js ‘/script//vue . js
脚本src=’ axios的https://unpkg.com/axios/dist/axios.min.js’/script//use
link rel=’样式表’ href=’ https://unpkg.com/element-ui/lib/theme-chalk/index . CSS ‘
脚本src=’ https://unpkg.com/element-ui/lib/index.js’/script//are你饿了吗？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值传输代码如下：
脚本//向前端返回信息
const app=new Vue({
El: ‘#app ‘，//使用id=’app ‘获取信息。
data() {
返回{
admin: ‘ ‘，
密码： ‘ ‘，
Dd: ‘ ‘，//定义三个变量的初始化为空。您可以在id=’app ‘的页面上写{{admin}}以返回admin的值。
{}
}，
Methods: {//参数传递
login: function () {
var $ this=this
Console.log(‘登录触发器’)；//打印回来
axios({
方法： ‘发布’，
URL : ‘ http://127 . 0 . 0 . 1/xingbb/tp5/public/user ‘，
数据： {
admin: this.admin，
密码： this.password
{}
})//使用axios根据地址按post传输数据的数组值，this.admin和this.password通过定义输入v-model=’admin ‘获得。然后(function (response) {//由400或401成功执行。
//$ this . DD=response . data；//获取背景数据
//console . log(response . data . access _ token)；
localStorage.setItem(‘token ‘，response . data . access _ token)；//本地存储令牌值
window.location.href=’./index/index . html ‘；//跳转到页面
})。catch(函数(错误){
$这个。$message.error(‘错误的帐号或密码！’)；//失败，出现错误，返回弹出窗口
console.log(错误)；
})；
{}
}，
Mounted() {//在模板渲染成html后调用，这里不使用。在将模板呈现为html之前，会调用创建的匹配
{}
})
/script还需要设置配置文件app.php
默认返回类型=’json ‘，连接到database.php的数据库
下面是后台数据采集，数据操作。这主要使用了tp5.1的请求和模型，以及jwt的使用。详细看https://github.com/firebase/php-jwt
？php
命名空间app \ index \ controller//表示放置位置
使用思考\控制器；//控制器基类
使用\ Firebase \ JWT \ JWT；//调用库jwt类
使用思考\请求；//请求对象类
使用app\common\model\User作为Muser//模型
类别用户扩展控制器
{
公共功能用户()
{
//echo $ _ COOKIE[‘ user ‘]；//前端传输在这里
$ admin=input(‘ post . admin ‘)；
$ password=input(‘ post . password ‘)；//获取前端
$ user=db(‘ user ‘)-其中(‘ admin ‘，$ admin)-其中(‘ password ‘，$ password)-find()；//删除选择
//\ dump($ user)；
If($user)//使用jwt方法
{
$ key=\ config(‘ app . jwt _ key ‘)；//键值，唯一秘密，配置app下的jwt_key
$token=array(
ISS ‘=’ http://127 . 0 . 0 . 1/xingbb/tp5/public/user ‘，//发行地址
aud ‘=’ http://127 . 0 . 0 . 1/xingbb/Qian/log in/log in . html # ‘，//面向对象地址
Iat’=time()，//创建时间
Nbf’=time()，//有效时间
Exp’=time() 3600，//到期时间-10分钟
Sub’=$user[‘id’]，//传递的id值
)；
$ jwt=jwt : encode($ token，$ key)；//加密
//$ decode=JWT : de code($ JWT，$key，array(‘ HS256 ‘)；//解密
返回[
Access_token’=$jwt，//加密数据
Token_type’=’持票人’，//类
Expires_in’=3600，//到期时间
】；//返回数组
{}
return response()-code(401)；//如果找不到返回401的指令
{}
}后台User.php根据获取的数据与数据库进行比对，但当账户密码正确时，它会将该账户的一串唯一id等数据返回给前端，前端保存该值，并使用该值获取用户的相应数据并显示在前端。同样，调用那些js，那么js代码如下：
脚本
const app=new Vue({
el: ‘#app ‘，
data() {
返回{
令牌： ‘ ‘，
http: {}，
{}
}，
methods: {
}，
created() {
this . token=LocalStorage . GetItem(‘ token ‘)；//在登录页面上获取身份验证成功后保存的令牌值
This.http=axios.create({//整理令牌的值
base URL : ‘ http://127 . 0 . 0 . 1/xingbb/tp5/public/’，
timeout: 5000，
headers : { ‘ Authorization ‘ : ‘ Bearer ‘ this . token }
})；
if(！This.token)//如果This.token不存在，返回登录页面
{
window.location.href=’./log in/log in . html ‘；
{}
其他
{
This.http.get(‘/user’)//调用上面的http并将值返回到后台。然后(函数(响应){
console.log(响应)；
})。catch(function(error){//token error返回登录页面
window.location.href=’./log in/log in . html ‘；
console.log(错误)；
})；
{}
{}
})
/script被route.php路由接收，跳转到中间件验证传递的值，从而判断是否进入控制器，执行后续操作，使用中间件，方便判断以后不需要在控制器的每个功能上写方法。
Route:rule(‘user ‘，’ index/user/show ‘，’ GET ‘)-中间件(‘ verify _ user ‘)；//路由接收跳转中间件对中间件的VerifyUser.php码判断如下：
？php
命名空间app \ http \中间件；//文件位置
使用思考\请求；//请求
使用\ Firebase \ JWT \ JWT；//jwt
使用app \ common \ model \ User//模型
类别验证用户
{
公共函数句柄(request $ request，\ closure $ next)//使用模型
{
$ Authorization=$ request-header(‘ Authorization ‘)；//获取前端传递的值
if(！isset($Authorization))返回响应()-代码(401)；//检查变量是否存在，不存在则返回401。
$ key=\ config(‘ app . jwt _ key ‘)；//键值定义了配置下应用的jwt_key
$token_type=\explode(‘，$ Authorization)[0]；//根据空格分隔得到第零个字符串
$token=\explode(‘，$ Authorization)[1]；//根据空格分隔得到第一个字符串
如果($token_type==’持票人’)//判断$token_type是否正确
{
尝试{
$ decode=JWT :3360 de code($ token，$key，array(‘ HS256 ‘)；//解密
$ request-user=$ user=user : get($ decode-sub)；//获取解密的用户id
if(！$ user | | $ decode-expired())//如果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
公共函数show (request $ request)//request，依赖注入
{
$ user=muser :3360 get($ request-user[‘ id ‘])；//model，获取数据库id相同的表数据，默认的表名是Muser的原名User
返回$ user//返回相应的数据
}此时，简单的账号密码输入登录分离前后的制作，代码应该不够严谨，还需要优化以上是thinkphp5.1、php、vue.js实现前端分离和交互的详细内容。更多信息，请关注Lei.com其他关于php知识的相关文章！
7963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
