本文主要介紹一下 Vue + SpringBoot 中如何實現一個分頁列表數據。

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- :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.pageSizelayout='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 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 parameterType='map' resultMap='BaseResultMap'> select <include refid='Base_Column_List' /> from t_card where 1 = 1 <include refid='condition'></include> </select> <select parameterType='map' resultType='java.lang.Integer'> select count(1) from t_card where 1 = 1 <include refid='condition'></include> </select> <select parameterType='java.lang.Integer' resultMap='BaseResultMap'> select <include refid='Base_Column_List' /> from t_card where sid = #{sid,jdbcType=INTEGER} </select> <delete parameterType='java.lang.Integer'> delete from t_card where sid = #{sid,jdbcType=INTEGER} </delete> <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 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 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 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; @Servicepublic 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('新增失敗'); }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。