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

Posted 唐桑和歌但

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue axios异步获取后台数据alert提示undefined相关的知识,希望对你有一定的参考价值。

记录一个小问题,关于分页查询套餐

前台通过axios异步请求获取后台数据alert弹出数据提示undefined

下面有三个bean

PageResult 
/**
* 分页结果封装对象
*/ public class PageResult implements Serializable { //总记录数 private Long total; //当前页结果 private List rows;
//get,set方法省略
  ....
}
QueryPageBean 
/**
 * 封装查询条件
 */
public class QueryPageBean implements Serializable {
    //页码
    private Integer currentPage;
    //每页记录数
    private Integer pageSize;
    //查询条件
    private String queryString;

    //get,set方法省略 
   ....
}
Result 
/**
 * 封装返回结果
 */
public class Result implements Serializable {
    //执行结果,true为执行成功 false为执行失败
    private boolean flag;
    //返回结果信息,主要用于页面提示信息
    private String message;
    //返回数据
    private Object data;
//get,set方法省略
  ....
}

Controller层

    //返回给前台的是一个Result对象
   @RequestMapping("/findSetmeal")
    public Result findSetmeal(@RequestBody QueryPageBean queryPageBean) {
        try {
       //service层返回的是一个PageResult对象
            PageResult page = setmealService.findPage(queryPageBean);
            return new Result(true, MessageConstant.QUERY_SETMEALLIST_SUCCESS, page);
        } catch (Exception e) {
            return new Result(false, MessageConstant.QUERY_SETMEALLIST_FAIL);
        }
    }

前台,获取后台数据alert提示undefined,红色代码为错误示例,由于返回的是一个Result对象,Result对PageResult又进行了封装

            //分页查询
            findPage() {
                //设置参数
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString,
                };
                axios.post("/setMeal/findPage.do", param).then((response) => {
                    // alert(response.data.flag);
                    // alert(response.data.total);
                    // alert(response.data.rows);
                    this.dataList = response.data.rows;
                    this.pagination.total = response.data.total;
                    this.dataList = response.data.data.rows;
                    this.pagination.total = response.data.data.total;
                })
            },    

 

 

以上是关于Vue axios异步获取后台数据alert提示undefined的主要内容,如果未能解决你的问题,请参考以下文章

解决Vue axios post请求,后台获取不到数据的问题方法

promise封装axios方法

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

vue的axios访问后台获取不了参数和中文乱码设置

解决vue跨域axios异步通信

vue-cli3 axios与后台对接没有成功?