VUE + SpringBoot 分页功能实现

喜欢ヅ旅行 2023-10-10 11:51 41阅读 0赞

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

## 1、效果展示 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

## 2、VUE代码 ##

### VUE之视图定义 ###

<el-row>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <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> {
    	/**
    	 * 自定义分页
    	 * 
    	 * @param parame
    	 * @param rb
    	 * @return
    	 */
    	public PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);
    	
    	/**
    	   *    自定义查询
    	 * @param parame
    	 * @return
    	 */
    	public List<TCard> select(Map<String, Object> parame);
    	
    	/**
    	 * 自定义统计
    	 * @param parame
    	 * @return
    	 */
    	public Integer count(Map<String, Object> parame);
    	
    	/**
    	 * 自定义批量插入
    	 * @param list
    	 */
    	public void batchInsert(List<TCard> list);
    	
    	/**
    	 * 自定义批量更新
    	 * @param list
    	 */
    	public void batchUpdate(List<TCard> 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<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("新增失败");
    		}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020112223522153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70