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