總是聽別人說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;
?>
內容很簡單，不斷學習中！
僅供參考，如有不解之處請在下方評論區留言，謝謝！