美年旅游跟团游查询分页

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);