vue axios 中 get 和 post 方法的区别，以及接口渲染数据，提交表格

methods: {

    // 渲染表格数据

    getData(){

        let that=this;

        that.$axios({

        method:'get',

        url: '后台给你的接口',

        params:{

                pageNo: that.currentPage,//划线 是 你在data return 里定义好的变量 红色划线是后台接收的

                pageSize: that.pageSize,//划线 是 你在data return 里定义好的变量

                searchName: that.searchName//划线 是 你在data return 里定义好的变量

        }

    }).then(function(response){      

        that.clusterData=response.data.data //把数据赋给 定义好的数组 clusterData

        that.totalItems = response.data.total

    }).catch(function(error){

        console.log(error) //请求失败返回的数据

    })

}，

// 新增 编辑 弹窗的 确定按钮

//在点这个按钮之前，弹窗肯定是显示状态 this.clusterInfo = true;

submitCluster(formName){   

    let {clusterName, description, createdTime} = this.clusterInfo;

    console.log(this.clusterInfo.createdTime);

    if(clusterName==''||createdTime==''){

        this.$message.error('集群名称和创建时间不能为空')

    }else{

        this.$axios({

            headers: { 'Content-Type': 'application/json' },//划线部分 根据需要填写不同的content-type

           method:'post',

            url: '后台给你的接口',

            data:{     //注意：此处不能写 params了

               createdTime: this.clusterInfo.createdTime,//这个对象在data return 提前定义好

                description: this.clusterInfo.description,

                clusterName: this.clusterInfo.clusterName

            }

        }).then((res) => {

            this.clusterDialog = false;//在之前定义的变量 控制 弹窗 是否显示

           this.$alert('新增成功',{

               callback: ()=>{   //回调很好用

                    this.getData();

                }

            })

        }).catch( () => {

            this.$message({

            showClose: true,

            message: '成功！',

           type: 'success'

        })

    }

}

转载请注明：https://blog.csdn.net/Alisa_94/article/details/103937421