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/[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

VUE+axios+php获取后端数据(宝塔面板)的相关文章

Vue axios异步获取后台数据alert提示undefined

记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ public class PageResult implements Serializable { //总记录数 private Long total; //当前页结果 private List rows; //get,set方法省略 .... } QueryPageBean /** * 封装查询条件 */

Asp.net MVC Vue Axios无刷新请求数据和响应数据

Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Models { public class Region { public int Id { get; set; } public string City { get; set; } } } Controller using System; us

vue中如何获取后台数据

原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数中加入 import VueResource from 'vue-resource' Vue.use(VueResource); 在package.json文件中加入 "dependencies": { "

JavaScript中fetch获取后台数据

除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案——fetch ㈠fetch示例 fetch获取后端数据的例子: // 通过fetch获取百度的错误提示页面 fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象 .then((res)=>{ return res.text() // res.text()是一个Promise对象 }) .then((res)=>{ console.

Reactjs之Axios、fetch-jsonp获取后台数据

1.新增知识点 /** Axios获取服务器数据(无法跨域,只能让后台跨域获取数据) react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 axios介绍: https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域) 1.安装axios模块npm install axios --save / npm install axios --

十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www.npmjs.com/package/axios git项目地址:https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域) npm官网:https://www.npmjs.com,在其搜索:axios即可看到详细说

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

二级联动:map,for循环一级数据,调用接口获取对象数据依次放到数组里(解决由于后端java是多线程,接收到的数据放入(push)数组中有可能会顺序不对)

解决方法:遍历一级数据时先push一个新的对象,调用接口获取到数据之后splice方法通过index的值判断放入到数组的对应下标下 this.tableData一级数据:  this.relationMaterialNameList二级数据: this.tableData.map((item,index)=>{ this.relationMaterialNameList.push({}) // 编辑页面项目下拉框数据 this.getSpecificationList(item.reimburs

vue使用jsonp获取数据,开发热卖推荐组件

1.安装jsonp cnpm install --save jsonp 2.jsonp API jsonp( url, opts, fn ) 3.封装jsonp方法 src/assets/js/jsonp.js import jsonp from 'jsonp'; /*data格式案例 { id:1, name:'cyy' } */ const parseParam=param=>{ /*将data格式转换为 [ [id,1], [name,cyy] ] */ let arr=[]; for(c