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

85423468

2020-01-03

总是听别人说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//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-router