vue怎么和php交互,thinkphp5.1和php、vue.js实现前后端分离和交互

thinkphp5.1和php、vue.js实现前后端分离和交互

下面由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://images1.tqwba.com/20201118/s4osc2ej1yk vue.js教程和https://images1.tqwba.com/20201118/ulgtmaf5qaa

axios.js的教程。前端login.html传值代码如下：

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是定义获取

.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前调用

}

})

还需设置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指令

}

}

后台User.php根据获取的数据跟数据库进行比对，但账号密码正确时，返回一串带有那个账户的唯一id和别的数据返回到前端，前端保存该值，并使用该值获取该用户的相应数据并显示在前端。一样，把那几个js调用，然后js代码如下：

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);

});

}

}

})

路由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

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.phppublic function show(Request $request)//请求，依赖注入

{

$user = Muser::get($request->user['id']);// 模型，获取数据库id相同的表数据，默认表名为Muser的原名 User

return $user;//返回对应数据

}

至此，一个简单的关于账号密码输入登陆的前后端分离制作好了，代码中应该还不够严谨，还需要优化。

thinkphp5.1和php、vue.js实现前后端分离和交互的教程已介绍完毕，更多请关注跳墙网其他文章教程！

thinkphp5.1和php、vue.js实现前后端分离和交互相关教程

详解利用phpmyadmin设置mysql的权限

下面由 phpmyadmin使用 教程 栏目给大家详解利用phpmyadmin设置mysql的权限，希望对需要的朋友有所帮助！ 第一步：登陆root用户。 第二步：新建一个数据表，并且选好排序规则，此处我使用testtable。 第三步：我们新建一个用户输入相关的账户名以及密码就可

PHP结合MySQL实现千万级数据处理

推荐：《PHP视频教程》 mysql分表思路 一张一亿的订单表，可以分成五张表，这样每张表就只有两千万数据，分担了原来一张表的压力，分表需要根据某个条件进行分，这里可以根据地区来分表，需要一个中间件来控制到底是去哪张表去找到自己想要的数据。 中间件：

vue.js支持jquery吗

vue.js支持jquery。vue中用jquery的方法：首先使用“npm install jquery --save”进行安装；然后配置webpack，在main.js里导入jquery；最后在需要的组件中使用jquery代码即可。 假设你已经使用vue-cli搭建好了开发的脚手架，接下来，看下面。 1、NPM 安装 jQ

vue.js指令是什么

vue.js指令是许多内置的指令，比如【v-if】和【v-show】，这些丰富的指令能满足我们的绝大部分业务需求，自定义指令有钩子函数，如【bind、inserted、update】。 【相关文章推荐：vue.js】 问题一：什么是vue.js中的自定义指令？ 自定义一些指令对底层DOM进

vue.js中怎么添加favicon图标

vue.js添加favicon图标的方法：1、修改【index.html】文件，代码为【link rel=shortcut icon type=image/x-icon href=favico】；2、修改webpack配置文件。 【相关文章推荐：vue.js】 vue.js添加favicon图标的方法： 方法一：修改index.html文件 link rel=sho

如何做到刷新vue.js改变数据

刷新vue.js改变数据的方法：用【Vue.set()】函数来进行修改，函数格式为【Vue.set(data,para,value)】，其中data为Vue创建时传输的data对象名。 【相关文章推荐：vue.js】 刷新vue.js改变数据的方法： 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据

怎么关闭vue.js中的空格报错

关闭vue.js中空格报错的方法：首先找到build文件夹下面的webpack.base.conf.js文件，并打开该文件；然后注释掉“”module: {rules: []}“”里关于空格规范的一些代码内容即可。 vue.js 解决空格报错 找到build文件夹下面的webpack.base.conf.js文件。 然后打

php 数组字符串如何转换为字符串

php数组字符串转换为字符串的方法：1、利用PHP implode函数将数组转换为字符串，语法如“implode(glue, pieces)”；2、利用循环遍历数组元素拼接成字符串。 推荐：《PHP视频教程》 PHP数组转字符串的两种方法 方法一，利用自带的implode函数 方法二，利用循