前端

<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;//用户名称  弃用
   ..........................
}