springboot如何实现分页,vue怎么实现分页
这篇文章主要为大家详细介绍了VUE跳羚实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文主要介绍一下Vue SpringBoot中如何实现一个分页列表数据。
1、效果展示
2、VUE代码
VUE之视图定义
el-row
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
表头中的v-for=(数据，索引
:key=index
:prop=data.prop
:label=data.label
：最小宽度=数据[最小宽度]
:align=data.align
/El-表格-列
埃尔-表格-列
标签=操作
最小宽度=240
模板槽-范围="范围"
El-button type= success size= mini @ click= to re charge(scope)充值/el-button
El-button size= mini @ click=查看(范围)查看/el-button
El-button type= primary size= mini @ click= toEdit(scope)修改/el-button
El-button type= danger size= mini @ click= delete card(scope)删除/el-button
/模板
/El-表格-列
/el-table
英国铁路公司
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:current-page=分页。页面索引
:page-size=[5，10，20，30，40]
:page-size=pagination.pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=pagination.total
/El-分页
/el-row
重点说明：
数据类型定义：
表格数据：定义后台数据模型定义。
表格标题：定义表格与后台数据绑定关系。
分页：定义分页数据模型，主要包含（页面索引：当前页，页面大小：页大小，总计：总记录数)
方法定义：
handleSizeChange:更新页大小
handleCurrentChange:更新当前页
VUE之模型定义（数据)
表数据：[],
分页：{
pageIndex: 1，
页面大小：10,
总计：0,
},
表格标题：[
{
道具："希德",
标签: 编号，
对齐："左"
},
{
道具："密码",
标签: 密码，
对齐："左"
},
{
属性："状态",
标签: 状态，
对齐："左"
},
{
道具："钱",
标签: 金额，
对齐："左"
},
{
道具："学生id”，
标签: 学生希德，
对齐："左"
}
]
VUE之数据初始化
VUE方法定义：请求后台数据接口加载相关数据（方法)
init () {
var self=this
这个. axios({
方法： post ，
URL:“/卡片/查找页面”，
数据：{ page :这个。分页。pageindex， limit :这个。分页。pagesize }，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
控制台。日志(分辨率)；
自我。分页。总计=研究数据。数据。total _计数；
自我。表数据=研究数据。数据。列表；
})。接住(函数（错误){
console.log(错误)
})
},
handleSizeChange(val) {
这个。分页。pagesize=val
这个。分页。页面索引=1；
这个。init()；
},
handleCurrentChange(val) {
这个。分页。页面索引=val
这个。init()；
},
VUE声明周期函数定义：调用VUE的方法定义，完成数据初始化过程。
在VUE声明周期函数已安装()中，调用初始化，完成数据初始化过程。
已安装：函数(){
this.init()
}
3、SpringBoot 代码
entity 定义
包com。zzg。实体；
导入Java。数学。bigdecimal
导入Java。util。日期；
导入org。spring框架。格式。注释。日期时间格式；
导入com。更快的XML。杰克逊。注释。JSON格式；
导入com。zzg。常见。基础模型；
公共类TCard扩展基本模型{
/**
*
*/
private static final long serialVersionUID=1035674221133528445 l；
私有整数（同suddenionosphericdisturbance）电离层的突然骚扰
私有字符串密码；
私有字符串状态；
私人BigDecimal钱；
@DateTimeFormat(模式=yyyy-MM-dd )
@JsonFormat(模式=yyyy-MM-dd ，时区=GMT 8 )
私人日期开始时间；
@DateTimeFormat(模式=yyyy-MM-dd )
@JsonFormat(模式=yyyy-MM-dd ，时区=GMT 8 )
私人日期结束时间；
私有整数学生id
公共整数getSid() {
返回（同suddenionosphericdisturbance）电离层的突然骚扰
}
公共void setSid(整数sid) {
this.sid=sid
}
公共字符串getPassword() {
返回密码；
}
公共void setPassword(字符串密码){
this.password=password==null？空：密码。trim()；
}
公共字符串getState() {
返回状态；
}
公共void setState(字符串状态){
this.state=state==null？空：州。trim()；
}
public BigDecimal getMoney() {
还钱；
}
public void set money(BigDecimal money){
this.money=钱；
}
公共日期获取开始时间(){
返回开始时间
}
公共作废集开始时间(日期开始时间){
这个。开始时间=开始时间；
}
公共日期getEndTime() {
返回结束时间；
}
公共void setEndTime(日期结束时间){
这个。结束时间=结束时间；
}
公共整数getStudentSid() {
返回学生id；
}
public void set students id(整数students id){
this.studentSid=studentSid
}
}
mapper定义
包com。zzg。映射器；
导入Java。util。列表；
导入Java。util。地图；
导入com。zzg。实体。tcard
公共接口TCardMapper {
int deleteByPrimaryKey(整数sid)；
int insert(TCard记录);
int insertSelective(TCard记录);
TCard selectByPrimaryKey(整数sid)；
int updateByPrimaryKeySelective(TCard记录);
int updateByPrimaryKey(TCard记录);
/**
* 方法拓展
*/
ListTCard select(MapString，Object parame)；
整数计数(MapString，Object parame)；
void batchInsert(ListTCard list)；
作废批量更新(列表tcard列表)；
}
？可扩展标记语言版本=1.0 编码=UTF八号？
！DOCTYPE Mapper PUBLIC -//mybatis。org//DTD Mapper 3.0//EN http://my batis。org/DTD/mybatis-3-Mapper。 DTD
映射器命名空间=com.zzg.mapper.TCardMapper
结果映射id=基本结果映射 type= com。zzg。实体。 tcard
id列= sid JDBC类型= INTEGER 属性= sid /
结果列=密码jdbcType=VARCHAR property=密码/
结果列= state JDBC type= VARCHAR property= state /
结果列= money JDBC type= DECIMAL property= money /
结果列= star _ time JDBC type= DATE property= start time /
结果列= end _ time JDBC type= DATE property= end time /
结果列= student _ sid JDBC类型= INTEGER 属性= studentid /
/结果映射
sql id=Base_Column_List
希德，密码，状态，货币，开始时间，结束时间，学生（同suddenionosphericdisturbance）电离层的突然骚扰
/sql
sql id=condition
/sql
选择id=select 参数type= map 结果映射=基本结果映射
挑选
include refid= Base _ Column _ List /
从t卡
其中1=1
include refid= condition /include
/选择
select id= count 参数类型= map 结果类型= Java。郎。整数
挑选
计数(1)
从t卡
其中1=1
include refid= condition /include
/选择
select id= selectByPrimaryKey 参数类型= Java。郎。“整数”结果映射=“基本结果映射”
挑选
include refid= Base _ Column _ List /
从t卡
其中sid=#{sid，jdbcType=INTEGER}
/选择
删除id=deleteByPrimaryKey 参数Type=java.lang.Integer
从t卡中删除
其中sid=#{sid，jdbcType=INTEGER}
/删除
插入id=insert 参数Type=com.zzg.entity.TCard
插入t_card (sid，密码，状态，
金钱，开始时间，结束时间，
学生_sid)
值(#{sid，jdbcType=INTEGER}，#{password，jdbcType=VARCHAR}，#{state，jdbcType=VARCHAR}，
#{money，jdbcType=DECIMAL}，# { starTime，jdbcType=DATE}，#{endTime，jdbcType=DATE}，
# {学生id，jdbcType=INTEGER})
/插入
插入id=insertSelective 参数Type=com.zzg.entity.TCard
插入t _卡
整齐前缀=(后缀=)后缀覆盖=，
if test=sid！=null
希德，
/如果
if test=password！=null
密码，
/如果
if test=state！=null
状态，
/如果
如果测试=钱！=null
钱，
/如果
if test= starTime！=null
star_time，
/如果
if test=endTime！=null
结束时间，
/如果
if test= studentSid！=null
学生_sid，
/如果
/修剪
修剪前缀=值(后缀=)后缀覆盖=，
if test=sid！=null
#{sid，jdbcType=INTEGER}，
/如果
if test=password！=null
#{password，jdbcType=VARCHAR}，
/如果
if test=state！=null
#{state，jdbcType=VARCHAR}，
/如果
如果测试=钱！=null
#{money，jdbcType=DECIMAL}，
/如果
if test= starTime！=null
# { starTime，jdbcType=DATE}，
/如果
if test=endTime！=null
#{endTime，jdbcType=DATE}，
/如果
if test= studentSid！=null
# {学生id，jdbcType=INTEGER}，
/如果
/修剪
/插入
update id= updateByPrimaryKeySelective 参数类型= com。zzg。实体。 tcard
更新t _卡
设置
if test=password！=null
password=#{password，jdbcType=VARCHAR}，
/如果
if test=state！=null
state=#{state，jdbcType=VARCHAR}，
/如果
如果测试=钱！=null
money=#{money，jdbcType=DECIMAL}，
/如果
if test= starTime！=null
star _ time=# { starTime，jdbcType=DATE}，
/如果
if test=endTime！=null
end_time=#{endTime，jdbcType=DATE}，
/如果
if test= studentSid！=null
student _ sid=# { studentSid，jdbcType=INTEGER}，
/如果
/设置
其中sid=#{sid，jdbcType=INTEGER}
/更新
更新id= updateByPrimaryKey 参数类型= com。zzg。实体。 tcard
更新t _卡
set password=#{password，jdbcType=VARCHAR}，
state=#{state，jdbcType=VARCHAR}，
money=#{money，jdbcType=DECIMAL}，
star _ time=# { starTime，jdbcType=DATE}，
end_time=#{endTime，jdbcType=DATE}，
student _ sid=# { studentSid，jdbcType=INTEGER}
其中sid=#{sid，jdbcType=INTEGER}
/更新
/映射器
service 定义
包com。zzg。服务；
导入Java。util。列表；
导入Java。util。地图；
导入com。zzg。常见。基础服务；
导入com。zzg。常见。实体。pagedate
导入com。zzg。常见。实体。页面参数；
导入com。zzg。实体。tcard
公共接口TCardService扩展了BaseServiceTCard {
/**
* 自定义分页
*
* @param parame
* @param rb
* @返回
*/
public pagedate tcard select page(MapString，Object parame，page param Rb)；
/**
* 自定义查询
* @param parame
* @返回
*/
public ListTCard select(MapString，Object parame)；
/**
* 自定义统计
* @param parame
* @返回
*/
公共整数计数(MapString，Object parame)；
/**
* 自定义批量插入
* @param list
*/
public void batchInsert(list tcard list)；
/**
* 自定义批量更新
* @param list
*/
公共void批量更新(ListTCard list)；
/**
* 充值记录
* @param tCard
*/
公共作废充值(TCard TCard)；
}
包com。zzg。服务。impl
导入Java。数学。bigdecimal
导入Java。util。列表；
导入Java。util。地图；
导入org。spring框架。豆子。工厂。注释。自动连线；
导入org。spring框架。刻板印象。服务；
导入com。github。页面助手。页面助手；
导入com。github。页面助手。pageinfo
导入com。zzg。常见。抽象服务；
导入com。zzg。常见。实体。pagedate
导入com。zzg。常见。实体。页面参数；
导入com。zzg。实体。tcard
导入com。zzg。制图师。tcard映射器；
导入com。zzg。服务。tcardservice
@服务
公共类TCardServiceImpl扩展AbstractServiceTCard实现TCardService {
@自动连线
TCardMapper映射器；
公共（同Internationalorganizations）国际组织插入(TCard记录){
//TODO自动生成的方法存根
返回mapper.insert(记录);
}
public int insertSelective(TCard记录){
//TODO自动生成的方法存根
返回mapper.insertSelective(记录);
}
公共TCard selectByPrimaryKey(整数sid) {
//TODO自动生成的方法存根
返回制图师。selectbyprimarykey(sid)；
}
public int updateByPrimaryKeySelective(TCard记录){
//TODO自动生成的方法存根
返回映射器。updatebyprimarykeyselective(记录);
}
public int updateByPrimaryKey(TCard记录){
//TODO自动生成的方法存根
返回mapper.updateByPrimaryKey(记录);
}
public void deleteByPrimaryKey(整数sid) {
//TODO自动生成的方法存根
制图师。deletebyprimarykey(sid)；
}
public PageDateTCard选择页面(MapString，Object parame，PageParam rb) {
//TODO自动生成的方法存根
页面助手。起始页(Rb。获取pageno()、Rb。get limit())；
ListTCard RS=mapper。选择(参数)；
pageninfocard pageninfo=new pageninfocard(RS)；
返回超级。页面(paginfo。getlist()、paginfo。获取pagenum()、paginfo。获取pagesize()、paginfo。get total())；
}
公共列表卡选择（映射字符串，对象参数){
//TODO自动生成的方法存根
返回制图师。选择(参数)；
}
公共整数计数（映射字符串，对象参数){
//TODO自动生成的方法存根
返回制图师。计数(参数)；
}
公共void batchInsert(列表卡列表){
//TODO自动生成的方法存根
mapper.batchInsert(列表);
}
公共无效批量更新(列表卡列表){
//TODO自动生成的方法存根
制图师。批量更新(列表)；
}
公共无效充值(TCard tCard) {
//TODO自动生成的方法存根
TCard对象=映射器。selectbyprimarykey(TCard。getsid())；
BigDecimal money=对象。得到钱().添加(tcard。拿到钱())；
object.setMoney(钱);
制图师。updatebyprimarykeyselective(object)；
}
}
controller定义
包com。zzg。控制器；
导入Java。util。列表；
导入Java。util。地图；
导入org。slf4j。记录者；
导入org。SLF 4j。伐木工厂；
导入org。spring框架。豆子。工厂。注释。自动连线；
导入org。spring框架。刻板印象。控制器；
导入org。spring框架。网络。绑定。注释。路径变量；
导入org。spring框架。网络。绑定。注释。请求正文；
导入org。spring框架。网络。绑定。注释。请求映射；
导入org。spring框架。网络。绑定。注释。请求方法；
导入org。spring框架。网络。绑定。注释。响应正文；
导入com。zzg。常见。抽象控制器；
导入com。zzg。常见。实体。pagedate
导入com。zzg。常见。实体。页面参数；
导入com。zzg。常见。实体。结果；
导入com。zzg。实体。tcard
导入com。zzg。服务。tcardservice
@控制器
@RequestMapping(/api/card )
公共类卡片控制器扩展抽象控制器{
//日志记录
公共静态最终记录器日志=记录器工厂。获取记录器(卡控制器。类)；
@自动连线
TCardService卡片服务
@ request mapping(value=/find page ，method=RequestMethod .帖子)
@ResponseBody
公共结果findPage(@RequestBody MapString，Object parame) {
页面参数Rb=super。init page bounds(parame)；
pagedate tcard page list=cardservice。选择页面(parame，Rb)；
返回新结果()。好的()。setData(页面列表);
}
@RequestMapping(value=/find ，method=RequestMethod .获取)
@ResponseBody
公共结果查找(){
ListTCard list=cardservice。选择(空)；
返回新结果()。好的()。setData(列表);
}
@ request mapping(value=/findBySid/{ sid } ，method=RequestMethod .获取)
@ResponseBody
公共结果findBySid(@ path variable( sid )Integer sid){
TCard object=cardservice。selectbyprimarykey(sid)；
返回新结果()。好的()。setData(对象);
}
@ request mapping(value=/deleteBySid/{ sid } ，method=RequestMethod .获取)
@ResponseBody
公共结果deleteBySid(@ path variable( sid )Integer sid){
卡片服务。deletebyprimarykey(sid)；
返回新结果()。ok()；
}
@RequestMapping(value=/update ，method=RequestMethod .帖子)
@ResponseBody
公共结果更新(@RequestBody TCard卡){
int num=cardservice。updatebyprimarykeyselective(card)；
如果（数字0) {
返回新结果()。ok()；
}
返回新结果()。错误(更新失败);
}
@ request mapping(value=/recharge ，method=RequestMethod .帖子)
@ResponseBody
公共结果充值(@RequestBody TCard卡){
cardService.recharge(卡);
返回新结果()。错误(充值成功);
}
@RequestMapping(value=/insert ，method=RequestMethod .帖子)
@ResponseBody
公共结果插入(@RequestBody TCard卡){
int num=cardservice。插入选择性(卡)；
如果（数字0) {
返回新结果()。ok()；
}
返回新结果()。错误(新增失败);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。