VUE-07 axios循环输出信息

本页主要学习，通过axios从服务器调取信息，之后显示到界面上。

1.html代码

 2.script代码

 3.路由配置（做vue任何界面都要进行路由配置，才可以访问）

完整的html,script 代码：

<template>
  <div>
    <div style="display:flex" v-for="(user,index) in userList" :key="'user-' +index">
      {{user.id}}--{{user.name}}--{{user.phone}}--{{user.sex}}
      <!--  :key="'user-' +index" 防止循环重复，不然电脑会以为只有一个循环 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      userList: [],//定义一个数组
      pagenum: 1,//默认第一页
      pagesize: 10,//限制有几个显示
      keyword:"", 
    };
  },
  created() {// created()是初始化程序，就是一打开界面就执行的内容
    this.loadUserList();//一开始就调用
  },
  methods: {
    loadUserList() {//显示列表
      var that =this;
      //访问上面的数组，就是把上面之前的东西赋值到that上，就不需要再引入一遍，只需要that即可指到之前的对象
      this.axios.get(`/user/list/${this.pagenum}/${this.pagesize}?keyword=${this.keyword}`)
      //axios.get方式传参。这里注意是`,pagenum是参数，所以上面要先定义
        //${this.}是拼装
        // 这里要传什么内容主要是看接口要传什么内容
        .then(function(response) {
          console.log(response);
          that.userList = response.data.data.records;
          // 因为上面有var that =this;所以这里用that来指数组，至于要怎么.data要看控制台传过来的服务器有几层
        });
    }
  }
};
</script>

路由的代码

import Test from "../components/Test"     //import 定义名 form "路径"
import Main   from "../pages/admin/main"//商品管理首页
import user_manager   from "../pages/admin/user_manager"//用户管理



const routes = [
// 单双层路由的区别 多了children:[{path:"",component:定义名}]

   {
    path: "/main", component: Main, children: 
    [{path: "/main/User_manager", component: user_manager},

]
    
},

//    访问网址输入的内容 path: "/login"
]
export default routes;