VUE+SpringBoot实现分页功能

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

1、效果展示

2、VUE代码

VUE之视图定义

重点说明：

数据类型定义:

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.RequestMapping;
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("新增失败");
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。