总是听别人说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/[email protected]/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; ?>
内容很简单,不断学习中!
仅供参考,如有不解之处请在下方评论区留言,谢谢!
原文地址:https://www.cnblogs.com/chalkbox/p/12146715.html
时间: 2024-10-01 09:42:00