公司网站建设会计处理,网站建设需要哪些设备,十大免费壁纸软件,设计公司展厅图片学习内容来源#xff1a;视频P4 本篇文章进度接着之前的文章进行续写 精简前后端分离项目搭建 Vue基础容器使用 目录选择组件修改表格组件修改分页组件增加后端接口前端请求数据接口页面初始化请求数据点击页码请求数据选择组件
在官方文档中选择现成的组件#xff0c;放在页…学习内容来源视频P4 本篇文章进度接着之前的文章进行续写 精简前后端分离项目搭建 Vue基础容器使用 目录选择组件修改表格组件修改分页组件增加后端接口前端请求数据接口页面初始化请求数据点击页码请求数据选择组件
在官方文档中选择现成的组件放在页面当中比如是表格分页形式需要将两者包裹在一个大的div当中
修改表格组件
修改表格组件的数据显示以之前的图书为例 修改tableData内容 以及对应的标签 即可显示写定的内容
修改分页组件 page-size用于规定每页显示条目 total规定总共的条目数量页面会自动根据这两个值计算出总页数 当前分页组件点击后并没有什么反应因为我们没有对点击事件进行操作 在标签中给 current-change 绑定事件 即可在点击页码时提示当前页说明我们能获取到点击页码的数据
增加后端接口
当前后端只有 findAll 的接口如果想要请求特定页码的数据比如第二页3条数据则不能满足要求 原视频是对原有的 findAll 接口进行修改我保留了这个函数新增一个函数 findPart
BookRepository继承的JPA接口中有多个findAll() 的重载其中有一个参数是Pageable 这个包下的Pageable
GetMapping(/findPart/{page}/{size})
public PageBook findPart(PathVariable(page) Integer page, PathVariable(size) Integer size){Pageable pageable PageRequest.of(page-1,size);//page下标从0开始计数故-1return 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 函数 将初始化的请求函数复用一次不过页码使用获取到的页码数 即可实现动态查询页码内容
下一回
