• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

VUE+SpringBoot实现分页功能

vue 搞代码 4年前 (2022-01-08) 28次浏览 已收录 0个评论

这篇文章主要为大家详细介绍了VUE+SpringBoot实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据。

1、效果展示

2、VUE代码

VUE之视图定义

      充值查看修改删除<br> 

重点说明:

数据类型定义:

tableData:定义后台数据模型定义。

tableHeader:定义表格与后台数据绑定关系。

pagination:定义分页数据模型,主要包含(pageIndex:当前页,pageSize:页大小, total:总记录数)

方法定义:

handleSizeChange:更新页大小

handleCurrentChange:更新当前页

VUE之模型定义(data)

 tableData: [], pagination: { pageIndex: 1, pageSize: 10, total: 0, }, tableHeader: [ { prop: 'sid', label: '编号', align: 'left' }, { prop: 'password', label: '密码', align: 'left' }, { prop: 'state', label: '状态', align: 'left' }, { prop: 'money', label: '金额', align: 'left' }, { prop: 'studentSid', label: '学生SID', align: 'left' } ]

VUE之数据初始化

VUE 方法定义:请求后台数据接口加载相关数据(method)

 init () { var self = this this.$axios({ method:'post', url:'/card/findPage', data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize}, headers:{ 'Content-Type':'application/json;charset=utf-8'      //改这里就好了 } }).then(res => { console.log(res); self.pagination.total = res.data.data.total_count; self.tableData = res.data.data.list; }) .catch(function (error) { console.log(error) }) }, handleSizeChange(val) { this.pagination.pageSize = val; this.pagination.pageIndex = 1; this.init(); }, handleCurrentChange(val) { this.pagination.pageIndex = val; this.init(); },

VUE 声明周期函数定义:调用VUE的方法定义,完成数据初始化过程.

在VUE声明周期函数mounted ()中,调用init ,完成数据初始化过程。

 mounted: function () { this.init() }

3、SpringBoot 代码

entity 定义

 package com.zzg.entity; import java.math.BigDecimal; import java.util.Date; import org.springframework.format.annotation.DateTimeFormat; import com.fasterxml.jackson.annotation.JsonFormat; import com.zzg.common.BaseModel; public class TCard extends BaseModel { /** * */ private static final long serialVersionUID = 1035674221133528445L; private Integer sid; private String password; private String state; private BigDecimal money; @DateTimeFormat(pattern="yyyy-MM-dd") @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8") private Date starTime; @DateTimeFormat(pattern="yyyy-MM-dd") @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8") private Date endTime; private Integer studentSid; public Integer getSid() { return sid; } public void setSid(Integer sid) { this.sid = sid; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password == null ? null : password.trim(); } public String getState() { return state; } public void setState(String state) { this.state = state == null ? null : state.trim(); } public BigDecimal getMoney() { return money; } public void setMoney(BigDecimal money) { this.money = money; } public Date getStarTime() { return starTime; } public void setStarTime(Date starTime) { this.starTime = starTime; } public Date getEndTime() { return endTime; } public void setEndTime(Date endTime) { this.endTime = endTime; } public Integer getStudentSid() { return studentSid; } public void setStudentSid(Integer studentSid) { this.studentSid = studentSid; } }

mapper定义

 package com.zzg.mapper; import java.util.List; import java.util.Map; import com.zzg.entity.TCard; public interface TCardMapper { int deleteByPrimaryKey(Integer sid); int insert(TCard record); int insertSelective(TCard record); TCard selectByPrimaryKey(Integer sid); int updateByPrimaryKeySelective(TCard record); int updateByPrimaryKey(TCard record); /** * 方法拓展 */ List select(Map parame); Integer count(Map parame); void batchInsert(List list); void batchUpdate(List list); }
     sid, password, state, money, star_time, end_time, student_sid   select  from t_card where 1 = 1  select count(1) from t_card where 1 = 1  select  from t_card where sid = #{sid,jdbcType=INTEGER}  delete from t_card where sid = #{sid,jdbcType=INTEGER}  insert into t_card (sid, password, state, money, star_time, end_time, student_sid) values (#{sid,jdbcType=INTEGER}, #{password,jdbcType=VARCHAR}, #{state,jdbcType=VARCHAR}, #{money,jdbcType=DECIMAL}, #{starTime,jdbcType=DATE}, #{endTime,jdbcType=DATE}, #{studentSid,jdbcType=INTEGER})  insert into t_card   sid,  password,  state,  money,  star_time,  end_time,  student_sid,   #{sid,jdbcType=INTEGER},  #{password,jdbcType=VARCHAR},  #{state,jdbcType=VARCHAR},  #{money,jdbcType=DECIMAL},  #{starTime,jdbcType=DATE},  #{endTime,jdbcType=DATE},  #{studentSid,jdbcType=INTEGER},  update t_card   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},  where sid = #{sid,jdbcType=INTEGER}  update t_card 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} where sid = #{sid,jdbcType=INTEGER} 

service 定义

 package com.zzg.service; import java.util.List; import java.util.Map; import com.zzg.common.BaseService; import com.zzg.common.entity.PageDate; import com.zzg.common.entity.PageParam; import com.zzg.entity.TCard; public interface TCardService extends BaseService { /** * 自定义分页 * * @param parame * @param rb * @return */ public PageDate selectPage(Map parame, PageParam rb); /** *    自定义查询 * @param parame * @return */ public List select(Map parame); /** * 自定义统计 * @param parame * @return */ public Integer count(Map parame); /** * 自定义批量插入 * @param list */ public void batchInsert(List list); /** * 自定义批量更新 * @param list */ public void batchUpdate(List list); /** * 充值记录 * @param tCard */ public void recharge(TCard tCard); }
 package com.zzg.service.impl; import java.math.BigDecimal; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.zzg.common.AbstractService; import com.zzg.common.entity.PageDate; import com.zzg.common.entity.PageParam; import com.zzg.entity.TCard; import com.zzg.mapper.TCardMapper; import com.zzg.service.TCardService; @Service public class TCardServiceImpl extends AbstractService implements TCardService { @Autowired TCardMapper mapper; public int insert(TCard record) { // TODO Auto-generated method stub return mapper.insert(record); } public int insertSelective(TCard record) { // TODO Auto-generated method stub return mapper.insertSelective(record); } public TCard selectByPrimaryKey(Integer sid) { // TODO Auto-generated method stub return mapper.selectByPrimaryKey(sid); } public int updateByPrimaryKeySelective(TCard record) { // TODO Auto-generated method stub return mapper.updateByPrimaryKeySelective(record); } public int updateByPrimaryKey(TCard record) { // TODO Auto-generated method stub return mapper.updateByPrimaryKey(record); } public void deleteByPrimaryKey(Integer sid) { // TODO Auto-generated method stub mapper.deleteByPrimaryKey(sid); } public PageDate selectPage(Map parame, PageParam rb) { // TODO Auto-generated method stub PageHelper.startPage(rb.getPageNo(), rb.getLimit()); List rs = mapper.select(parame); PageInfo pageInfo = new PageInfo(rs); return super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal()); } public List select(Map parame) { // TODO Auto-generated method stub return mapper.select(parame); } public Integer count(Map parame) { // TODO Auto-generated method stub return mapper.count(parame); } public void batchInsert(List list) { // TODO Auto-generated method stub mapper.batchInsert(list); } public void batchUpdate(List list) { // TODO Auto-generated method stub mapper.batchUpdate(list); } public void recharge(TCard tCard) { // TODO Auto-generated method stub TCard object = mapper.selectByPrimaryKey(tCard.getSid()); BigDecimal money = object.getMoney().add(tCard.getMoney()); object.setMoney(money); mapper.updateByPrimaryKeySelective(object); } }

controller定义

 package com.zzg.controller; import java.util.List; import java.util.Map; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.Requ<strong>本文来源gaodai#ma#com搞@@代~&码网</strong>estMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.zzg.common.AbstractController; import com.zzg.common.entity.PageDate; import com.zzg.common.entity.PageParam; import com.zzg.common.entity.Result; import com.zzg.entity.TCard; import com.zzg.service.TCardService; @Controller @RequestMapping("/api/card") public class CardController extends AbstractController { // 日志记录 public static final Logger log = LoggerFactory.getLogger(CardController.class); @Autowired TCardService cardService; @RequestMapping(value = "/findPage", method = RequestMethod.POST) @ResponseBody public Result findPage(@RequestBody Map parame) { PageParam rb = super.initPageBounds(parame); PageDate pageList = cardService.selectPage(parame, rb); return new Result().ok().setData(pageList); } @RequestMapping(value = "/find", method = RequestMethod.GET) @ResponseBody public Result find() { List list = cardService.select(null); return new Result().ok().setData(list); } @RequestMapping(value = "/findBySid/{sid}", method = RequestMethod.GET) @ResponseBody public Result findBySid(@PathVariable("sid") Integer sid) { TCard object = cardService.selectByPrimaryKey(sid); return new Result().ok().setData(object); } @RequestMapping(value = "/deleteBySid/{sid}", method = RequestMethod.GET) @ResponseBody public Result deleteBySid(@PathVariable("sid") Integer sid) { cardService.deleteByPrimaryKey(sid); return new Result().ok(); } @RequestMapping(value = "/update", method = RequestMethod.POST) @ResponseBody public Result update(@RequestBody TCard card) { int num = cardService.updateByPrimaryKeySelective(card); if (num > 0) { return new Result().ok(); } return new Result().error("更新失败"); } @RequestMapping(value = "/recharge", method = RequestMethod.POST) @ResponseBody public Result recharge(@RequestBody TCard card) { cardService.recharge(card); return new Result().error("充值成功"); } @RequestMapping(value = "/insert", method = RequestMethod.POST) @ResponseBody public Result insert(@RequestBody TCard card) { int num = cardService.insertSelective(card); if (num > 0) { return new Result().ok(); } return new Result().error("新增失败"); } }

以上就是VUE+SpringBoot实现分页功能的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:VUE+SpringBoot实现分页功能

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址