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
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>
</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]"
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: '密碼',
www.cppcns.com; align: 'left'
},
{
prop: 'state',
label: '狀態',
{
prop: 'money',
label: '金額',
{
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
www.cppcns.com <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,
money,
student_sid)
values (#{sid,jdbcType=INTEGER},#{password,jdbcType=VARCHAR},#{state,
#{money,jdbcType=DECIMAL},#{starTime,jdbcType=DATE},#{endTime,
#{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,
</if>
<if test="password != null">
#{password,
</if>
<if test="state != null">
#{state,
</if>
<if test="money != null">
#{money,
</if>
<if test="starTime != null">
#{starTime,
</if>
<if test="endTime != null">
#{endTime,
</if>
<if test="studentSid != null">
#{studentSid,
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.zzg.entity.TCard">
update t_card
<set>
<if test="password != null">
password = #{password,
</if>
<if test="state != null">
state = #{state,
</if>
<if test="money != null">
money = #{money,
</if>
<if test="starTime != null">
star_time = #{starTime,
</if>
<if test="endTime != null">
end_time = #{endTime,
</if>
<if test="studentSid != null">
student_sid = #{studentSid,
</if>
</set>
where sid = #{sid,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.zzg.entity.TCard">
update t_card
set password = #{password,
state = #{state,
money = #{money,
star_time = #{starTime,
end_time = #{endTime,
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,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());
obOGFHsject.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);
OGFHs;}
@RequestMapping(value = "/deleteBySid/{sid}",method = RequestMethod.GET)
@ResponseBody
public Result deleteBySid(@PathVariable("sid") Integer sid) {
cardService.deleteByPrimaryKey(sid);
return new Result().ok();
}
@RequestMapping(value = "/upd程式設計客棧ate",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("新增失敗");
}
}