学习内容来源:视频P4
本篇文章进度接着之前的文章进行续写
精简前后端分离项目搭建
Vue基础容器使用

选择组件

在官方文档中选择现成的组件,放在页面当中,比如是表格+分页形式,需要将两者包裹在一个大的div当中
在这里插入图片描述

修改表格组件

修改表格组件的数据显示,以之前的图书为例
在这里插入图片描述
修改tableData内容
在这里插入图片描述
以及对应的标签
在这里插入图片描述
即可显示写定的内容
在这里插入图片描述

修改分页组件

在这里插入图片描述
page-size用于规定每页显示条目
total规定总共的条目数量,页面会自动根据这两个值计算出总页数
当前分页组件点击后并没有什么反应,因为我们没有对点击事件进行操作
在标签中给 current-change 绑定事件
在这里插入图片描述
在这里插入图片描述
即可在点击页码时提示当前页,说明我们能获取到点击页码的数据

增加后端接口

当前后端只有 findAll 的接口,如果想要请求特定页码的数据(比如第二页3条数据)则不能满足要求
原视频是对原有的 findAll 接口进行修改,我保留了这个函数,新增一个函数 findPart

BookRepository继承的JPA接口中,有多个findAll() 的重载,其中有一个参数是Pageable
在这里插入图片描述
这个包下的Pageable
在这里插入图片描述

@GetMapping("/findPart/{page}/{size}")
public Page<Book> findPart(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
    Pageable pageable = PageRequest.of(page-1,size);//page下标从0开始计数,故-1
    return bookRepository.findAll(pageable);
}

这样就可以通过请求地址获取想要请求的信息,再进行查询并且返回想要的数据
在这里插入图片描述
地址栏输入即可返回需要的数据

前端请求数据接口

在vue项目中安装 axios 插件,其封装了Ajax,发送异步请求
在这里插入图片描述

页面初始化请求数据

安装成功后,在页面创建初始化函数,进行请求,地址就是刚才测试的地址
在这里插入图片描述

created(){
    axios.get("http://localhost:8181/book/findPart/1/3").then(function (resp) {
        console.log(resp);
    })
},

在控制台即可看到返回的数据
在这里插入图片描述
证明数据以已经成功调用到前端,此时我们需要将后端取到的数据覆盖到 tableData 中。在data中创建一个total变量,并且将标签中的 total 值绑定,原来的 dataTable 中的数据也可以删除,此时已经有数据库的数据来覆盖了。
在这里插入图片描述

点击页码请求数据

回到之前创建的 page 函数
将初始化的请求函数复用一次,不过页码使用获取到的页码数
在这里插入图片描述
即可实现动态查询页码内容
请添加图片描述

下一回

Logo

前往低代码交流专区

更多推荐