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("新增失败");

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 VUE+SpringBoot实现分页功能 的全部内容, 来源链接: utcz.com/p/239288.html

回到顶部