axios php json,VUE+axios+php获取后端数据（宝塔面板）

总是听别人说axios好，好在哪里咱也不知道，继上一篇博文还不懂axios，现在稍微可以应用了(暗暗加油！)

看官网教程的时候一直困惑axios里的url到底是什么，很长一个url链接搞的我更迷惑了(其实就是一个PHP文件，读取php文件获得数据而已)

vue用axios方法从后端获取数据(感觉确实方便了不少)

附上前端代码

VUE项目

// 主页

const Home = {

data() {

return {

//用来接收数据

menulist: []

}

},

template:

`

后台管理系统 单页版

default-active="1"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b"

>

{{item.username}}

用户列表

上传图片

`,

//钩子函数，直接调用

created() {

//用axios去getphp文件'getshow.php'

axios.get('getshow.php')

//then获取成功；response成功后的返回值(对象)

.then(response=>{

//可以打印出对象

console.log(response);

//将数据赋值给menulist

this.menulist=response.data;

})

//抓住获取失败 提示错误

.catch(error=>{

console.log(error);

alert('网络错误，不能访问');

})

},

methods: {

cliuser() {

this.$router.push('/user')

},

clipic() {

this.$router.push('/uppicture')

},

}

}

const router = new VueRouter({

routes: [

{ path: '/', component: Home }

]

})

new Vue({

el: '#app',

data: {},

methods: {},

router

})

html,

body,

#app {

height: 100%;

margin: 0;

padding: 0;

}

.el-header {

background-color: #373d41;

padding-left: 0;

color: #fff;

display: flex;

font-size: 20px;

align-items: center;

}

.el-header img {

margin-right: 10px;

}

.el-aside {

background-color: #545c64;

}

.el-card {

margin-top: 10px;

}

.el-breadcrumb {

margin-bottom: 15px;

}

下面是PHP代码：

getshow.php

header("Content-type:text/html;charset=utf-8");

//接收数据

$host = "localhost";

$username = 'root';

$password = 'root';

$db = 'mywu';

//插入数据到数据库

//1.连接数据库

$conn = mysqli_connect($host,$username,$password,$db);

if (!$conn) {

die('Could not connect: ' . mysqli_error($con));

}

//2.定义一个空数组

$usersArr = [];

mysqli_set_charset($conn,'utf8');

//3.查询数据库

$user_menu = "select * from test";

//4.发送sql语句

$res = mysqli_query($conn,$user_menu); //结果集的资源

//5.将结果集资源转换成数据

// $row = $res->fetch_assoc();

while($row = $res->fetch_assoc())

{

$userArr[] = $row;

};

//将数据转换成JSON赋值给变量$jsonencode

//一定要转换赋值给另一个变量再输出另一个变量

$jsonencode = json_encode($userArr);

//输出变量$jsonencode

echo $jsonencode;

?>

内容很简单，不断学习中！

仅供参考，如有不解之处请在下方评论区留言，谢谢！