p16-18列表展示

Vue.prototype.$axios = axios
这里的Vue.prototype
相当于全局变量设置了一个属性？
this.&axios,可以在任何位置使用？

Vue.prototype.$httpUrl=‘http://localhost:8090’
所以我们可以把url也设置为属性

loadGet(){
            this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{
                console.log(res)
            })

全局设置还可以使用request.js

尝试把后台返回的数据显示到前段
利用表格组件，之前我们的数据是固定的，现在擦灰姑娘是吧数据替换成我们获取的数据
怎么获取数据？
利用跨域axios的方法库
发送请求-
.then
this.$axios.get(url).then(res=>res.data).then(res=>{
console.log(res)
this.tableData=res})
这个语句，先执行get，得到返回数据放到res（应该是这个方法自己设的参数就是res），然后（.then）执行赋值（钩子函数）
先进行{ console.log(res)
this.tableData=res}
就是控制台打印res,把res赋值给tabledata
然后再把这个？赋值给res?

<el-main>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="no" label="账号" width="60">
        </el-table-column>
        </el-table>
    </el-main>

<script>
  export default {
    data() {
      
      return {
        tableData: []
      }
    },
    methods:{
        loadGet(){
            this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{
                console.log(res)
                this.tableData=res
            })
        },
        loadPost(){
            this.$axios.post(this.$httpUrl+'/user/listP',{name:'小'}).then(res=>res.data).then(res=>{
                console.log(res)
                this.tableData=res
            })
        }
    },
    beforeMount(){
        this.loadGet();
    }
  };
</script>

pageSize和pageNum到底是什么
pageNum 表示当前第几页，对应 limit 语句的 offset 参数。 pageSize 表示这条查询语句最大返回多少条数据，
所以如果pageNum太大会看不到数据，因为没有那么多页数据

<template>
    <div>
    <el-main>
      <el-table :data="tableData"
      :header-cell-style="{background:'#bbbbbb'}"
      >
        <el-table-column prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="no" label="账号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="60">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
            <template slot-scope="scope">
            <el-tag 
            :type="scope.row.sex === 1 ? 'primary' : 'success'"
                disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}
            </el-tag>
      </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="60">
        </el-table-column>
        <el-table-column prop="roleId" label="角色号" width="120">
            <template slot-scope="scope">
            <el-tag 
            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
                disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '普通用户')}}
            </el-tag>
      </template>
        </el-table-column>
        <el-table-column prop="isvalid" label="是否生效" width="60">
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="200">
            <el-button size="small" type="success">编辑</el-button>
            <el-button size="small" type="danger">删除</el-button>
        </el-table-column>
      </el-table>
</el-main>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 5, 10, 20]"
       
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>
</template>

<script>
  export default {
    data() {
      
      return {
        tableData: [],
        pageSize:2,//这如果比较小，而且page-sizes="[5, 10, 20]"中没有
        //，就会导致初始界面无法显示完整数据
        pageNum:1,
        total:2,
      }
    },
    methods:{
        loadGet(){
            this.$axios.get(this.$httpUrl+'/user/list').then(res=>res.data).then(res=>{
                console.log(res)
                this.tableData=res
            })
        },
        loadPost(){
            this.$axios.post(this.$httpUrl+'/user/listPageC1',{
        
                pageNum:this.pageNum,
                pageSize:this.pageSize
            
             }).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.tableData=res.data
                    this.total=res.total
                    //这里要去看看网页打印的res到底是什么东西
                    //然后看怎么获取表格需要的数据
                    //成功后设置已知的参数
                    //this.tableData=res
                }else{
                    alert('获取数据失败')
                }
                
            })
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1;
        this.pageSize=val;
        this.loadPost();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.loadPost();
      }
    },
    beforeMount(){
        //this.loadGet();
        this.loadPost();
    }
  };
</script>