VUE+axios+php获取后端数据（宝塔面板）
Posted chalkbox
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE+axios+php获取后端数据（宝塔面板）相关的知识，希望对你有一定的参考价值。
总是听别人说axios好，好在哪里咱也不知道，继上一篇博文还不懂axios，现在稍微可以应用了（暗暗加油！）
看官网教程的时候一直困惑axios里的url到底是什么，很长一个url链接搞的我更迷惑了（其实就是一个php文件，读取php文件获得数据而已）
vue用axios方法从后端获取数据（感觉确实方便了不少）
附上前端代码
<!DOCTYPE html> <html> <!-- head中引入了element,vue,vue-router,axios --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VUE项目</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <!-- 路由占位符 --> <router-view></router-view> </div> <script> // 主页 const Home = { data() { return { //用来接收数据 menulist: [] } }, template: `<div style="height:100%;"> <el-container class="home-con" style="height:100%"> <el-header> <img src="http://style.wuliwu.top/LOGO" /> <span>后台管理系统 单页版</span> </el-header> <el-container> <el-aside width="200px"> <el-menu default-active="1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-submenu :index="item.id + ‘‘" v-for="item in menulist" :key="item.id"> <template slot="title"> <i class="el-icon-location"></i> <span>{{item.username}}</span> </template> <el-menu-item index="1-1" @click="cliuser">用户列表</el-menu-item> <el-menu-item index="1-2" @click="clipic">上传图片</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </div>`, //钩子函数，直接调用 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 }) </script> <style> 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; } </style> </body> </html>
下面是PHP代码：
getshow.php
<?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;
?>
内容很简单，不断学习中！
仅供参考，如有不解之处请在下方评论区留言，谢谢！
以上是关于VUE+axios+php获取后端数据（宝塔面板）的主要内容，如果未能解决你的问题，请参考以下文章
用Axios Vue.PHP从mysql获取数据有什么问题？PHP？