VUE SpringBoot分页功能 VUE+SpringBoot实现分页功能
在奋斗的大道 人气:0想了解VUE+SpringBoot实现分页功能的相关内容吗，在奋斗的大道在本文为您仔细讲解VUE SpringBoot分页功能的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：VUE,SpringBoot,分页，下面大家一起来学习吧。
本文主要介绍一下 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("新增失败");
}
}
加载全部内容