VUE+SpringBoot implements paging function

VUE+SpringBoot implements paging function

This article mainly introduces how to implement a paginated list data in Vue + SpringBoot.

1. Effect display

2. VUE code

VUE view definition

<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="operation"
                    min-width="240">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="toRecharge(scope)">Recharge</el-button>
                        <el-button size="mini" @click="toView(scope)">View</el-button>
                        <el-button type="primary" size="mini" @click="toEdit(scope)">Edit</el-button>
                        <el-button type="danger" size="mini" @click="deleteCard(scope)">Delete</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>

Key points:

Data type definition:

tableData: defines the background data model definition.

tableHeader: defines the binding relationship between the table and the background data.

pagination: defines the paging data model, mainly including (pageIndex: current page, pageSize: page size, total: total number of records)

Method definition:

handleSizeChange: Update page size

handleCurrentChange: Update the current page

VUE model definition (data)

tableData: [],
        pagination:
            pageIndex: 1,
            pageSize: 10,
            total: 0,
        },
        tableHeader: [
                    {
                        prop: 'sid',
                        label: 'Number',
                        align: 'left'
                    },
                    {
                        prop: 'password',
                        label: 'Password',
                        align: 'left'
                    },
                    {
                        prop: 'state',
                        label: 'status',
                        align: 'left'
                    },
                    {
                        prop: 'money',
                        label: 'amount',
                        align: 'left'
                    },
                    {
                        prop: 'studentSid',
                        label: 'Student SID',
                        align: 'left'
                    }
 
                ]

VUE data initialization

VUE method definition: request the background data interface to load related data (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' //Just change it here}
        }).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 declaration cycle function definition: call VUE method definition to complete the data initialization process.

In the VUE declaration cycle function mounted(), call init to complete the data initialization process.

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

3. SpringBoot code

Entity Definition

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 definition

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);
 
 /**
  * Method extension */
 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 Definition

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> {
 /**
  * Custom Pagination * 
  * @param parame
  * @param rb
  * @return
  */
 public PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);
 
 /**
    * Custom query * @param parame
  * @return
  */
 public List<TCard> select(Map<String, Object> parame);
 
 /**
  * Custom statistics * @param parame
  * @return
  */
 public Integer count(Map<String, Object> parame);
 
 /**
  * Custom batch insert * @param list
  */
 public void batchInsert(List<TCard> list);
 
 /**
  * Custom batch update * @param list
  */
 public void batchUpdate(List<TCard> list);
 
 /**
  * Recharge record* @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 definition

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 {
 // Logging 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("Update failed");
  }
  
  @RequestMapping(value = "/recharge", method = RequestMethod.POST)
  @ResponseBody
  public Result recharge(@RequestBody TCard card) {
   cardService.recharge(card);
   return new Result().error("Recharge successful");
  }
 
  @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("Addition failed");
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue form form submission + ajax asynchronous request + paging effect
  • Vue.js implements paging query function
  • Example code for writing a pager with Vue
  • Vue.js realizes infinite loading and paging function development
  • Vue.js table paging example
  • Vue component library ElementUI realizes the paging effect of table list
  • How to use ElementUI pagination component Pagination in Vue
  • Vue project realizes paging effect
  • Vue+iview realizes paging and query functions
  • Encapsulation of vue+iview paging component
  • Vue implements paging function

<<:  Steps to export the fields and related attributes of MySQL tables

>>:  Build a server virtual machine in VMware Workstation Pro (graphic tutorial)

Recommend

Detailed explanation of MySQL delayed replication library method

Simply put, delayed replication is to set a fixed...

Solution to the problem that the InnoDB engine is disabled when MySQL is started

Find the problem Today at work, when copying tabl...

Research on the Input Button Function of Type File

<br />When uploading on some websites, a [Se...

MySQL intercepts the sql statement of the string function

1. left(name,4) intercepts the 4 characters on th...

What to do if the online MySQL auto-increment ID is exhausted

Table of contents Table definition auto-increment...

MySQL login and exit command format

The command format for mysql login is: mysql -h [...

Docker container from entry to obsession (recommended)

1. What is Docker? Everyone knows about virtual m...

MySQL Error 1290 (HY000) Solution

I struggled with a problem for a long time and re...

HTML tutorial, easy to learn HTML language

1. <body background=image file name bgcolor=co...

Causes and solutions for MySQL deadlock

The database, like the operating system, is a sha...

Highly recommended! Setup syntax sugar in Vue 3.2

Table of contents Previous 1. What is setup synta...

JavaScript implements the generation of 4-digit random verification code

This article example shares the specific code for...

How to add double quotes in HTML title

<a href="https://www.jb51.net/" titl...

Detailed explanation of Vue px to rem configuration

Table of contents Method 1 1. Configuration and i...

Docker case analysis: Building a Redis service

Table of contents 1 Create mount directories and ...