VUE + SpringBoot 分页功能实现

2022-09-11 08:39:35

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

1、效果展示

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("新增失败");
		}
}
  • 作者:在奋斗的大道
  • 原文链接:https://blog.csdn.net/zhouzhiwengang/article/details/109972560
    更新时间:2022-09-11 08:39:35