1:前台代码
(1)定义分页相关模型数据
(2)定义分页方法
(3)完善分页方法执行时机(点击“查询”,点击“分页”)
2:后台代码
• 跟团游分页查询
• 保存跟团游和自由行中间表数据
(1)TravelGroupController.java(Controller)
(2)TravelGroupService.java(服务接口)
(3)TravelGroupServiceImpl.java(服务实现类)
(4)TravelGroupDao.java(Dao接口)
(5)TravelGroupDao.xml(Mapper映射文件)
前台代码
定义分页相关模型数据
pagination: {
//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
定义分页方法
在页面中提供了 findPage 方法用于分页查询,为了能够在 travelgroup.html 页面加载后直接可以展示分页数据,可以在 VUE 提供的钩子函数created 中调用 findPage方法
//钩子函数,VUE对象初始化完成后自动执行
created() {
this.findPage();
},
findPage()方法。
//分页查询
findPage() {
//分页参数
var param = {
currentPage:this.pagination.currentPage,//页码
pageSize:this.pagination.pageSize,//每页显示的记录数
queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/travelgroup/findPage.do",param).then((response)=> {
//为模型数据赋值,基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;//数据集
this.pagination.total = response.data.total;//总记录数
});
},
完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外,当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
(1)为查询按钮绑定单击事件,调用 findPage 方法
<el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
(2)为分页条组件绑定 current-change 事件,此事件是分页条组件自己定义的事件,当页码改变时触发,对应的处理函数为 handleCurrentChange
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
(3)定义 handleCurrentChange 方法
//切换页码
handleCurrentChange(currentPage) {
//currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage();
},
后台代码
Controller
在 TravelGroupController 中增加分页查询方法
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.PageResult;
import com.atguigu.entity.QueryPageBean;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelGroupService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RequestMapping("/travelgroup")
@RestController
public class TravelGroupController {
@Reference
private TravelGroupService travelGroupService;
// 传递当前页,每页显示的记录数,查询条件
// 响应PageResult,封装总记录数,结果集
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
PageResult pageResult = travelGroupService.findPage(
queryPageBean.getCurrentPage(),
queryPageBean.getPageSize(),
queryPageBean.getQueryString());
return pageResult;
}
服务接口
在TravelGroupService服务接口中扩展分页查询方法
package com.atguigu.service;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import java.util.List;
public interface TravelGroupService {
PageResult findPage(Integer currentPage, Integer pageSize, String queryString);
服务实现类
在 TravelGroupServiceImpl 服务实现类中实现分页查询方法,基于 Mybatis 分页助手插件实现分页
package com.atguigu.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelGroupDao;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelGroupService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service(interfaceClass = TravelGroupService.class)
@Transactional
public class TravelGroupServiceImpl implements TravelGroupService {
@Autowired
private TravelGroupDao travelGroupDao;
@Override
public PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {
// 使用分页插件PageHelper,设置当前页,每页最多显示的记录数
PageHelper.startPage(currentPage,pageSize);
// 响应分页插件的Page对象
Page<TravelGroup> page = travelGroupDao.findPage(queryString);
return new PageResult(page.getTotal(),page.getResult());
}
Dao接口
在 TravelGroupDao 接口中扩展分页查询方法
package com.atguigu.dao;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;
import java.util.List;
import java.util.Map;
public interface TravelGroupDao {
Page<TravelGroup> findPage(String queryString);
//名字是注解里指定的和后边的形参没关系
// Page<TravelGroup> findPage(@param("queryString")String queryString);
Mapper映射文件
在 TravelGroupDao.xml 文件中增加SQL定义
<!--
分页查询 concat: 在mysql的语法中,表示字符串的连接符,like %#{value}%
-->
<select id="findPage" parameterType="string" resultType="travelGroup">
select * from t_travelgroup
<where>
<if test="value!=null and value.length>0">
code =#{value} or name like "%"#{value}"%" or helpCode=#{value}
</if>
也可以用 queryString
<if test="queryString!=null and queryString.length>0">
code =#{queryString} or name like concat("%",#{queryString},"%") or helpCode=#{queryString}
</if>
</where>
</select>
导入数据到mysql
INSERT INTO `t_travelgroup` VALUES ('5', '0001', '昆明、大理、丽江双飞单动6日经典游', 'YBJC', '0', '春节昆明-大理-丽江双飞6日游牛新品/18人小团0购物+5A石林+玉龙雪山大索登顶+洱海Jeep旅拍+南诏风情岛+非遗白族扎染体验+彝族特色长街宴 ', '无');
INSERT INTO `t_travelgroup` VALUES ('6', '0002', '三亚-蜈支洲岛-亚龙湾双飞5日4晚跟团游', 'SLSJ', '0', '华东五市-乌镇-南浔-杭州双飞6日游>全新升级4晚维也纳系列酒店,全程0自费,观水乡婚礼,登雷峰塔,品金陵十六味,含宋城/上海夜景', null);
INSERT INTO `t_travelgroup` VALUES ('7', '0003', '重庆、武隆仙女山、天坑三硚、龙水峡地缝、洪崖洞、磁器口古镇双飞5日经典游', 'XCG', '0', '春节南宁-越南-下龙湾-北海双飞7日游>0购0自费/境外国际4星/1晚希尔顿/168元海鲜自助/奥巴马米粉/赠越式按摩/可升涠洲岛/全程领队/双口岸进出', null);
INSERT INTO `t_travelgroup` VALUES ('8', '0004', '印度尼西亚巴厘岛7日5晚半自助跟团游', 'NCG', '0', '春节海南三亚双飞5日游17万人游玩0购物,180度海景房(华美达/明申/维景/唐拉雅秀),赠全海景玻璃栈道+蟹鲍海鲜餐,20年出游去南山看108米海上观音', null);
INSERT INTO `t_travelgroup` VALUES ('9', '0005', '厦门-鼓浪屿-云水谣土楼双飞5日4晚跟团游', 'GGSX', '0', '厦门-鼓浪屿双飞5日游臻品9人团0购0自,全程五星华邑/万豪海景房,高标佳丽自助/地标全海景餐厅,人气日光岩植物园鹭江夜游,接送0等待', null);
INSERT INTO `t_travelgroup` VALUES ('10', '0006', '越南芽庄6日5晚自由行', 'NGSX', '0', '土耳其10日游超6000人选择牛人专线/五星航空直飞内陆双飞/费特希耶/网红景点齐打卡/五星酒店升1晚真洞穴酒店/升级4特色餐/2顿中餐', null);
INSERT INTO `t_travelgroup` VALUES ('11', '0007', '印度尼西亚巴厘岛7日5晚半自助跟团游', 'XZSX', '0', '春节埃及-迪拜-阿布扎比10日游A380或波音787/埃及全程五星/红海两晚/宿卢克索/吉萨金字塔群/埃及博物馆/马车巡游/风帆船', null);
INSERT INTO `t_travelgroup` VALUES ('12', '0008', '泰国普吉岛7日5晚跟团游', 'XJMSX', '0', '春节埃及+土耳其11-14日游埃及卢克索/亚历山大/红海,土耳其伊斯坦布尔/圣索菲亚大教堂,内陆4段飞,含卡帕和棉花堡,TK', null);
INSERT INTO `t_travelgroup` VALUES ('13', '0009', '悉尼-黄金海岸 汉密尔顿8日6晚品质游', 'JGSX', '0', '南美印象5国+巴西+阿根廷+秘鲁+智利+乌拉圭16-20日游>纯玩无购物/雨林/伊瓜苏瀑布/纳斯卡地画/四到五星酒店/部分增游马丘比丘', null);
INSERT INTO `t_travelgroup` VALUES ('14', '0010', '柬埔寨吴哥6日4晚跟团游', 'ZGFJCC', '2', '春节美国东西海岸11-13日游游多款产品可选/迪士尼一日双园过大年/环球影城/峡谷/羚羊彩穴/马蹄湾/部分团期升级纯玩团/保证拼住', null);
INSERT INTO `t_travelgroup` VALUES ('15', '0011', '张家界、玻璃桥、天门山、芙蓉镇、凤凰古城双飞5日跟团游', 'DHSSX', '0', '美国西雅图-波特兰6晚8日自由行西雅图进波特兰出,精选全程6晚酒店,行程天数可随意增减', null);