Vue_shop学习35：获取用户列表数据

最新推荐文章于 2024-04-29 20:22:38 发布

¡Venceremo

最新推荐文章于 2024-04-29 20:22:38 发布

阅读量215

点赞数

分类专栏： Vue_shop 文章标签：学习

本文链接：https://blog.csdn.net/weixin_47295886/article/details/130229282

版权

Vue_shop 专栏收录该内容

93 篇文章 3 订阅

订阅专栏

    export default{
        data() {
            return {
                // 获取用户列表的参数
                queryInfo:{
                    query:'',//查询参数 可以为空
                    pagenum:1,//当前页码 不能为空 
                    pagesize:2// 每页显示条数 不能为空 
                }
                
            }
        },
        created() {
            //在创建的时候获取用户列表数据 调用函数
            this.getUserList()
        },
        methods: {
           async getUserList(){
                //get请求-写在data中
              const{data:res}= await this.$http.get('users',{params:this.queryInfo})
              console.log(res)
            }
           
            
        },
    }

total：所有用户，users第一页的用户

    export default{
        data() {
            return {
                // 获取用户列表的参数
                queryInfo:{
                    query:'',//查询参数 可以为空
                    pagenum:1,//当前页码 不能为空 
                    pagesize:2// 每页显示条数 不能为空 
                },
                userList:[],//所有数据列表
                toatl:0//总数据条数
                
            }
        },
        created() {
            //在创建的时候获取用户列表数据 调用函数
            this.getUserList()
        },
        methods: {
           async getUserList(){
                //get请求-写在data中
              const{data:res}= await this.$http.get('users',{params:this.queryInfo})
              //console.log(res)//测试
              if(res.meta.status!==200) return this.$message.error('获取用户列表数据失败')
                this.userList=res.data.users
                this.total=res.data.total
               
            }
          
           
            
        },
    }
</script>

<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="7">
                    <!-- 搜索和添加区域 -->
                    <div>
                        <el-input placeholder="请输入内容">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>

        </el-card>

    </div>
</template>
<script>
    export default{
        data() {
            return {
                // 获取用户列表的参数
                queryInfo:{
                    query:'',//查询参数 可以为空
                    pagenum:1,//当前页码 不能为空 
                    pagesize:2// 每页显示条数 不能为空 
                },
                userList:[],//所有数据列表
                toatl:0//总数据条数
                
            }
        },
        created() {
            //在创建的时候获取用户列表数据 调用函数
            this.getUserList()
        },
        methods: {
           async getUserList(){
                //get请求-写在data中
              const{data:res}= await this.$http.get('users',{params:this.queryInfo})
              //console.log(res)//测试
              if(res.meta.status!==200) return this.$message.error('获取用户列表数据失败')
                this.userList=res.data.users
                this.total=res.data.total
               
            }
          
           
            
        },
    }
</script>
<style lang="less" scoped>
    
</style>