怎么在VUE中使用SpringBoot实现分页功能

这篇文章给大家介绍怎么在Vue中使用SpringBoot实现分页功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1、效果展示

2、VUE代码

VUE之视图定义

<el-row>            <el-table                :data="tableData"                >                <el-table-column                    v-for="(data,index) in tableHeader"                    :key="index"                    :prop="data.prop"                    :label="data.label"                    :min-width="data['min-width']"                    :align="data.align">                </el-table-column>                <el-table-column                    label="操作"                    min-width="240">                    <template slot-scope="scope">                        <el-button type="success" size="mini" @click="toRecharge(scope)">充值</el-button>                        <el-button size="mini" @click="toView(scope)">查看</el-button>                        <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>                        <el-button type="danger" size="mini" @click="deleteCard(scope)">删除</el-button>                    </template>                </el-table-column>            </el-table>            <br>            <el-pagination                @size-change="handleSizeChange"                @current-change="handleCurrentChange"                :current-page="pagination.pageIndex"                :page-sizes="[5, 10, 20, 30, 40]"                :page-size=pagination.pageSize                layout="total, sizes, prev, pager, next, jumper"                :total=pagination.total>            </el-pagination></el-row>

重点说明：

数据类型定义:

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<TCard> select(Map<String, Object> parame);  Integer count(Map<String, Object> parame);  void batchInsert(List<TCard> list);  void batchUpdate(List<TCard> list);}

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "Http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.zzg.mapper.TCardMapper">  <resultMap id="BaseResultMap" type="com.zzg.entity.TCard">    <id column="sid" jdbcType="INTEGER" property="sid" />    <result column="password" jdbcType="VARCHAR" property="password" />    <result column="state" jdbcType="VARCHAR" property="state" />    <result column="money" jdbcType="DECIMAL" property="money" />    <result column="star_time" jdbcType="DATE" property="starTime" />    <result column="end_time" jdbcType="DATE" property="endTime" />    <result column="student_sid" jdbcType="INTEGER" property="studentSid" />  </resultMap>  <sql id="Base_Column_List">    sid, password, state, money, star_time, end_time, student_sid  </sql>  <sql id="condition">  </sql>  <select id="select" parameterType="map" resultMap="BaseResultMap">    select     <include refid="Base_Column_List" />    from t_card    where 1 = 1    <include refid="condition"></include>  </select>  <select id="count" parameterType="map" resultType="java.lang.Integer">    select      count(1)    from t_card    where 1 = 1    <include refid="condition"></include>  </select>  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">    select     <include refid="Base_Column_List" />    from t_card    where sid = #{sid,jdbcType=INTEGER}  </select>  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">    delete from t_card    where sid = #{sid,jdbcType=INTEGER}  </delete>  <insert id="insert" parameterType="com.zzg.entity.TCard">    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>  <insert id="insertSelective" parameterType="com.zzg.entity.TCard">    insert into t_card    <trim prefix="(" suffix=")" suffixOverrides=",">      <if test="sid != null">        sid,      </if>      <if test="password != null">        password,      </if>      <if test="state != null">        state,      </if>      <if test="money != null">        money,      </if>      <if test="starTime != null">        star_time,      </if>      <if test="endTime != null">        end_time,      </if>      <if test="studentSid != null">        student_sid,      </if>    </trim>    <trim prefix="values (" suffix=")" suffixOverrides=",">      <if test="sid != null">        #{sid,jdbcType=INTEGER},      </if>      <if test="password != null">        #{password,jdbcType=VARCHAR},      </if>      <if test="state != null">        #{state,jdbcType=VARCHAR},      </if>      <if test="money != null">        #{money,jdbcType=DECIMAL},      </if>      <if test="starTime != null">        #{starTime,jdbcType=DATE},      </if>      <if test="endTime != null">        #{endTime,jdbcType=DATE},      </if>      <if test="studentSid != null">        #{studentSid,jdbcType=INTEGER},      </if>    </trim>  </insert>  <update id="updateByPrimaryKeySelective" parameterType="com.zzg.entity.TCard">    update t_card    <set>      <if test="password != null">        password = #{password,jdbcType=VARCHAR},      </if>      <if test="state != null">        state = #{state,jdbcType=VARCHAR},      </if>      <if test="money != null">        money = #{money,jdbcType=DECIMAL},      </if>      <if test="starTime != null">        star_time = #{starTime,jdbcType=DATE},      </if>      <if test="endTime != null">        end_time = #{endTime,jdbcType=DATE},      </if>      <if test="studentSid != null">        student_sid = #{studentSid,jdbcType=INTEGER},      </if>    </set>    where sid = #{sid,jdbcType=INTEGER}  </update>  <update id="updateByPrimaryKey" parameterType="com.zzg.entity.TCard">    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}  </update></mapper>

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<TCard> {  public PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);   public List<TCard> select(Map<String, Object> parame);   public Integer count(Map<String, Object> parame);   public void batchInsert(List<TCard> list);   public void batchUpdate(List<TCard> list);   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; @Servicepublic class TCardServiceImpl extends AbstractService<TCard> 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<TCard> selectPage(Map<String, Object> parame, PageParam rb) {  // TODO Auto-generated method stub  PageHelper.startPage(rb.getPageNo(), rb.getLimit());  List<TCard> rs = mapper.select(parame);  PageInfo<TCard> pageInfo = new PageInfo<TCard>(rs);  return super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal()); }  public List<TCard> select(Map<String, Object> parame) {  // TODO Auto-generated method stub  return mapper.select(parame); }  public Integer count(Map<String, Object> parame) {  // TODO Auto-generated method stub  return mapper.count(parame); }  public void batchInsert(List<TCard> list) {  // TODO Auto-generated method stub  mapper.batchInsert(list); }  public void batchUpdate(List<TCard> 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<String, Object> parame) {   PageParam rb = super.initPageBounds(parame);   PageDate<TCard> pageList = cardService.selectPage(parame, rb);   return new Result().ok().setData(pageList);  }    @RequestMapping(value = "/find", method = RequestMethod.GET)  @ResponseBody  public Result find() {   List<TCard> 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实现分页功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。