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

CentOS 6.5 configuration ssh key-free login to execute pssh command explanation

1. Check and install pssh, yum list pssh 2. Becau...

How to set directory whitelist and IP whitelist in nginx

1. Set a directory whitelist: Do not set restrict...

Solution to the problem that Alibaba Cloud host cannot access the website using IP (solved by configuring security group rules)

I just bought an Alibaba Cloud host and couldn’t ...

MySQL query optimization using custom variables

Table of contents Optimizing sorting queries Avoi...

Steps to deploy hyper-V to achieve desktop virtualization (graphic tutorial)

The hardware requirements for deploying Hyper-V a...

js to realize login and registration functions

This article example shares the specific code of ...

Sample code for programmatically processing CSS styles

Benefits of a programmatic approach 1. Global con...

Mysql splits string into array through stored procedure

To split a string into an array, you need to use ...

Introduction to the process of using NFS remote directory mounting in CentOS environment

Table of contents 1. Introduction to NFS 2. NFS C...

Detailed steps to install MySQL 5.7 via YUM on CentOS7

1. Go to the location where you want to store the...

Detailed use cases of MySql escape

MySQL escape Escape means the original semantics ...

Two methods of MySql comma concatenation string query

The following two functions are used in the same ...

Detailed explanation of CSS3 text shadow text-shadow property

Text shadow text-shadow property effects: 1. Lowe...

Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

Preface In case of application bug or DBA misoper...

nginx configuration location summary location regular writing and rewrite rule writing

1. Location regular expression Let's take a l...