标签：vue console log pageSize 对象 json params 相册 pageNum

前端

<script>
    var Main = {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,

                pageNum:1,  //当前页码
                pageSize:6,  //当前页的数量
                queryParams:{    //按相册和类型查询 或用户名
                    nameLike:null,  //相册名称
                    tagLike:null,    //类型名称
                    userLike:null
                },
                devices:[]  //返回的数据
            }
        },
        mounted(){
             this.init();
        },
        methods:{
            init(){
                //设置前端传给后端的  json对象
                const params = {...this.queryParams};
                params.pageSize = this.pageSize;
                params.pageNum = this.pageNum;

                var that = this;
                console.log(params);
                axios.get("http://localhost:8770/recomm/pageVue",{params:params})
                    .then(function (response) {
                        that.devices = response.data;
                        console.log(response)
                        console.log("成功")
                    },function (err) {
                       console.log("数据出错")
                    })

            }
        }

    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

后端

  //前端基于Vue写的
     //查询，分页   可以根据相册名称，类型或用户名称查询
     @CrossOrigin(origins ="*",maxAge = 3600) //跨域注解
     @GetMapping(value = "/pageVue")
     @ResponseBody
     public PageVue<Album> query(AlbumQuery albumQuery,
                       @RequestParam(value = "pageSize") Integer pageSize,
                       @RequestParam(value = "pageNum") Integer pageNum){

         System.out.println(albumQuery);
         System.out.println(pageSize+" ::"+pageNum);
         return recommendService.query(albumQuery, pageSize, pageNum);
     }

AlbumQuery

public class AlbumQuery {
    private String nameLike;//相册名称
    private String tagLike;//相册类型
    private String userLike;//用户名称  弃用
   ..........................
}

标签：vue,console,log,pageSize,对象,json,params,相册,pageNum
来源： https://blog.csdn.net/qq_42199464/article/details/116235459

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。