美年旅游自由行分页

1：前台代码
（1）定义分页相关模型数据 , 参数通过json传递
（2）定义分页方法
• 使用钩子函数，初始化数据
（3）完善分页方法执行时机
2：后台代码
（1）TravelItemController.java
（2）TravelItemService.java（服务接口）
（3）TravelItemServiceImpl.java（服务实现类）
（4）TravelItemDao.java（Dao接口）
（5）TravelItemDao.xml（Mapper映射文件）

本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
1：请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString: ‘atguigu’}
2：后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}

前台代码

定义分页相关模型数据

pagination: {//分页相关模型数据currentPage: 1,//当前页码pageSize:10,//每页显示的记录数total:0,//总记录数queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据

定义分页方法

在页面中提供了findPage方法用于分页查询，为了能够在travelitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法

//钩子函数，VUE对象初始化完成后自动执行
created() {this.findPage();
},
//分页查询
findPage() {//分页参数 与后台一一对应 currentPage pageSize queryStringvar param = {currentPage:this.pagination.currentPage,//页码pageSize:this.pagination.pageSize,//每页显示的记录数queryString:this.pagination.queryString//查询条件};//请求后台 多个参数 放在json数据格式里用postaxios.post("/travel/findPage.do",param).then((response)=> {//为模型数据赋值，基于VUE的双向绑定展示到页面//response 是一个object//response.data.rows;当前页要展示的分页列表数据this.dataList = response.data.rows;//总数据条数this.pagination.total = response.data.total;});
},

完善分页方法执行时机

除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法

//默认传入第一页
<el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>

为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange

<div class="pagination-container"><el-paginationclass="pagiantion"@current-change="handleCurrentChange":current-page="pagination.currentPage":page-size="pagination.pageSize"layout="total, prev, pager, next, jumper":total="pagination.total"></el-pagination>
</div>

定义handleCurrentChange方法

//切换页码
handleCurrentChange(currentPage) {// currentPage为切换后的页码 传进来的页码this.pagination.currentPage = currentPage;this.findPage();
},

后台代码

Controller

在 TravelItemController中增加分页查询方法

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.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping(value = "/travel")
public class TravelItemController {@Referenceprivate TravelItemService travelItemService;//PageResult 封装了总记录数 和当前页结果@RequestMapping("/findPage")public PageResult findPage(@RequestBody QueryPageBean queryPageBean){//QueryPageBean 是前端封装的数据 包括/*var param = {currentPage:this.pagination.currentPage,//页码pageSize:this.pagination.pageSize,//每页显示的记录数queryString:this.pagination.queryString//查询条件};*///返回PageResult  封装对象给前端PageResult pageResult = travelItemService.findPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());return pageResult;}
}

服务接口

在 TravelItemService 服务接口中扩展分页查询方法

package com.atguigu.service;import com.atguigu.entity.PageResult;
import com.atguigu.pojo.CheckItem;public interface TravelItemService {
//同样返回PageResult类型  PageResult findPage(Integer currentPage, Integer pageSize, String queryString);
}

服务实现类

在 TravelItemServiceImpl服务实现类中实现分页查询方法，基于 Mybatis 分页助手插件实现分页

package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.CheckItemService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements TravelItemService {@Autowiredprivate TravelItemDao travelItemDao;@Overridepublic PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {// 不使用分页插件PageHelper// 至少写2条sql语句完成查询// 第1条，select count(*) from t_travelitem，查询的结果封装到PageResult中的total// 第2条，select * from t_travelitem where NAME = '001' OR CODE = '001' limit ?,?  //（0,10）（10,10）(（currentPage-1)*pageSize,pageSize）// 使用分页插件PageHelper（简化上面的操作）// 1：初始化分页操作PageHelper.startPage(currentPage,pageSize);// 2：使用sql语句进行查询（不必在使用mysql的limit了）//返回当前页的数据Page<TravelItem> page = travelItemDao.findPage(queryString);// 3：封装  1.总记录数，2.分页数据集合return new PageResult(page.getTotal(),page.getResult());}
}

Dao接口

在 TravelItemDao 接口中扩展分页查询方法

package com.atguigu.dao;import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;public interface TravelItemDao {//返回的是分页插件的封装类
//public class Page<E> extends ArrayList<E> Page<TravelItem> findPage(String queryString);
}

Mapper映射文件

在 TravelItemDao.xml 文件中增加 SQL 定义

<!--Page extends ArrayListPage findPage(String queryString);-->
<select id="findPage" parameterType="string" resultType="travelItem">select * from t_travelitem<where><if test="value!=null and value.length>0"><!--获取简单参数必须value或用@param("value")-->name like "%"#{value}"%" or code=#{value}</if></where>
</select>

如果使用if进行判断，这里需要是value读取值，不能改成其他参数。
导入查询语句到mysql数据库

INSERT INTO `t_travelitem` VALUES ('28', '0001', '三亚呀诺达享浪漫5日蜜月游', '0', '0-100', '5', '1', '无', '三亚呀诺达享浪漫5日蜜月游');
INSERT INTO `t_travelitem` VALUES ('29', '0002', '5天4晚，海南三亚自由行玩法', '0', '0-100', '5', '1', '无', '5天4晚，海南三亚自由行玩法');
INSERT INTO `t_travelitem` VALUES ('30', '0003', '5天4晚，三亚玩法，带着爸妈去旅行', '0', '0-100', '5', '1', '无', '5天4晚，三亚玩法，带着爸妈去旅行');
INSERT INTO `t_travelitem` VALUES ('31', '0004', '三亚大东海风景迷人5日家庭游', '0', '0-100', '5', '1', '无', '三亚大东海风景迷人5日家庭游');
INSERT INTO `t_travelitem` VALUES ('32', '0005', '4天3晚厦门玩法，热恋在土楼与都市沿岸', '0', '0-100', '5', '1', '无', '4天3晚厦门玩法，热恋在土楼与都市沿岸');
INSERT INTO `t_travelitem` VALUES ('33', '0006', '4日3晚，厦门亲子玩法', '0', '0-100', '5', '1', '无', '4日3晚，厦门亲子玩法');
INSERT INTO `t_travelitem` VALUES ('34', '0007', '厦门风灌醉鼓浪屿的海4日浪漫游', '0', '0-100', '5', '1', '无', '厦门风灌醉鼓浪屿的海4日浪漫游');
INSERT INTO `t_travelitem` VALUES ('35', '0008', '4天3晚，海上花园城市，厦门玩法', '0', '0-100', '5', '1', '无', '4天3晚，海上花园城市，厦门玩法');
INSERT INTO `t_travelitem` VALUES ('36', '0009', '香港迪士尼里追童梦5日亲子游', '0', '0-100', '5', '1', '无', '香港迪士尼里追童梦5日亲子游');
INSERT INTO `t_travelitem` VALUES ('37', '0010', '香港铜锣湾处处风情5日休闲游', '0', '0-100', '5', '1', '无', '香港铜锣湾处处风情5日休闲游');
INSERT INTO `t_travelitem` VALUES ('38', '0011', '5天4晚寻味香港玩法，回忆记忆中的“港味儿”', '0', '0-100', '10', '2', '无', '5天4晚寻味香港玩法，回忆记忆中的“港味儿”');
INSERT INTO `t_travelitem` VALUES ('39', '0012', '版纳傣族园丽江古城8日三地连线游', '0', '0-100', '10', '2', null, '版纳傣族园丽江古城 8日三地连线游');
INSERT INTO `t_travelitem` VALUES ('40', '0013', '6天5晚，丽江香格里拉蜜月玩法，意外的遇见，刚刚好！', '0', '0-100', '10', '2', null, '6天5晚，丽江香格里拉蜜月玩法，意外的遇见，刚刚好！');
INSERT INTO `t_travelitem` VALUES ('41', '0014', '4天3晚，云南丽江大众玩法', '0', '0-100', '10', '2', null, '4天3晚，云南丽江大众玩法');
INSERT INTO `t_travelitem` VALUES ('42', '0015', '丽江古城佳肴诱惑5日美食游', '0', '0-100', '10', '2', null, '丽江古城佳肴诱惑5日美食游');
INSERT INTO `t_travelitem` VALUES ('43', '0016', '成都九寨沟五彩天堂7日深度游', '0', '0-100', '10', '2', null, '成都九寨沟五彩天堂7日深度游');
INSERT INTO `t_travelitem` VALUES ('44', '0017', '成都九寨沟黄龙远离喧嚣6日风光游', '0', '0-100', '10', '2', null, '成都九寨沟黄龙远离喧嚣6日风光游');
INSERT INTO `t_travelitem` VALUES ('45', '0018', '7天6晚，四川玩法', '0', '0-100', '10', '2', null, '7天6晚，四川玩法');
INSERT INTO `t_travelitem` VALUES ('46', '0019', '4天3晚，大连玩法，阳光明媚去看海', '0', '0-100', '10', '2', null, '4天3晚，大连玩法，阳光明媚去看海');
INSERT INTO `t_travelitem` VALUES ('47', '0020', '4天3晚，浪漫之都大连玩法', '0', '0-100', '10', '2', null, '4天3晚，浪漫之都大连玩法');
INSERT INTO `t_travelitem` VALUES ('48', '0021', '4天3晚大连海滨玩法', '0', '0-100', '10', '2', null, '4天3晚大连海滨玩法');
INSERT INTO `t_travelitem` VALUES ('49', '0022', '大连美丽不过滨海路 4日经典游', '0', '0-100', '10', '2', null, '大连美丽不过滨海路4日经典游');
INSERT INTO `t_travelitem` VALUES ('50', '0023', '1天，尽览东方巴黎风采，哈尔滨玩法', '0', '0-100', '10', '2', null, '1天，尽览东方巴黎风采，哈尔滨玩法');
INSERT INTO `t_travelitem` VALUES ('51', '0024', '5天4晚哈尔滨+吉林双城玩法', '0', '0-100', '10', '2', null, '5天4晚哈尔滨+吉林双城玩法');
INSERT INTO `t_travelitem` VALUES ('52', '0025', '哈尔滨老道外风情建筑 5日魅力游', '0', '0-100', '10', '2', null, '哈尔滨老道外风情建筑5日魅力游');
INSERT INTO `t_travelitem` VALUES ('53', '0026', '哈尔滨雪博会一头栽雪堆 5日狂欢游', '0', '0-100', '10', '2', null, '哈尔滨雪博会一头栽雪堆5日狂欢游');
INSERT INTO `t_travelitem` VALUES ('54', '0027', '大阪东京夜景艾特你了6日连线游', '0', '0-100', '10', '2', null, '大阪东京夜景艾特你了6日连线游');
INSERT INTO `t_travelitem` VALUES ('55', '0028', '东京大阪一秒钟嗨翻乐园 6日亲子游', '0', '0-100', '10', '2', null, '东京大阪一秒钟嗨翻乐园6日亲子游');
INSERT INTO `t_travelitem` VALUES ('56', '0029', '东京扫货扫到手抽筋5日购物游', '0', '0-100', '10', '2', null, '东京扫货扫到手抽筋5日购物游');
INSERT INTO `t_travelitem` VALUES ('57', '0030', '东京富士山温泉5日泡汤游', '0', '0-100', '10', '2', null, '东京富士山温泉 5日泡汤游');
INSERT INTO `t_travelitem` VALUES ('58', '0031', '巴厘岛梦幻海滩分享甜蜜 5日蜜月游', '0', '0-100', '10', '2', null, '巴厘岛梦幻海滩分享甜蜜5日蜜月游');
INSERT INTO `t_travelitem` VALUES ('59', '0032', '6天5晚千岛之国，万般风情，印尼海岛玩法。', '0', '0-100', '10', '2', null, '6天5晚千岛之国，万般风情，印尼海岛玩法。');
INSERT INTO `t_travelitem` VALUES ('60', '0033', '5天4晚巴厘岛玩法，拥抱理想国的阳光', '0', '0-100', '10', '2', null, '5天4晚巴厘岛玩法，拥抱理想国的阳光');
INSERT INTO `t_travelitem` VALUES ('61', '0034', '巴厘岛金巴兰海滩享SPA6日悠闲游', '0', '0-100', '10', '2', null, '巴厘岛金巴兰海滩享SPA6日悠闲游');
INSERT INTO `t_travelitem` VALUES ('62', '0035', '巴厘岛乌布皇宫如梦如幻 5日蜜月游', '0', '0-100', '10', '2', null, '巴厘岛乌布皇宫如梦如幻 5日蜜月游');
INSERT INTO `t_travelitem` VALUES ('63', '0036', '巴厘岛海神庙全家出行8日亲子游', '0', '0-100', '10', '2', null, '巴厘岛海神庙全家出行8日亲子游');
INSERT INTO `t_travelitem` VALUES ('64', '0037', '巴厘岛金银岛悠然自得6日经典游', '0', '0-100', '10', '2', null, '巴厘岛金银岛悠然自得6日经典游');
INSERT INTO `t_travelitem` VALUES ('65', '0038', '巴厘岛蓝点教堂SPA专享7日休闲游', '0', '0-100', '10', '2', null, '巴厘岛蓝点教堂SPA专享7日休闲游');
INSERT INTO `t_travelitem` VALUES ('66', '0039', '大阪东京夜景艾特你了6日连线游', '0', '0-100', '10', '2', null, '大阪东京夜景艾特你了6日连线游');
INSERT INTO `t_travelitem` VALUES ('67', '0040', '东京大阪一秒钟嗨翻乐园6日亲子游', '0', '0-100', '10', '2', null, '东京大阪一秒钟嗨翻乐园6日亲子游');
INSERT INTO `t_travelitem` VALUES ('68', '0041', '6天5晚最牛的日本本州玩法', '0', '0-100', '10', '2', null, '6天5晚最牛的日本本州玩法');
INSERT INTO `t_travelitem` VALUES ('69', '0042', '日本京都箱根东瀛和风7日风情游', '0', '0-100', '10', '2', null, '日本京都箱根东瀛和风7日风情游');
INSERT INTO `t_travelitem` VALUES ('70', '0043', '日本箱根大涌谷6日关东关西游', '0', '0-100', '10', '2', null, '日本箱根大涌谷6日关东关西游');
INSERT INTO `t_travelitem` VALUES ('71', '0044', '日本伏见稻荷朱红色6日古都游', '0', '0-100', '10', '2', null, '日本伏见稻荷朱红色6日古都游');
INSERT INTO `t_travelitem` VALUES ('72', '0045', '大阪环球影城一键收藏5日亲子游', '0', '0-100', '10', '2', null, '大阪环球影城一键收藏5日亲子游');
INSERT INTO `t_travelitem` VALUES ('73', '0046', '大阪黑门市场吃海鲜5日美食游', '0', '0-100', '10', '2', null, '大阪黑门市场吃海鲜5日美食游');
INSERT INTO `t_travelitem` VALUES ('74', '0047', '大阪城公园樱花美成画5日经典游', '0', '0-100', '10', '2', null, '大阪城公园樱花美成画5日经典游');
INSERT INTO `t_travelitem` VALUES ('75', '0048', '大阪海游馆亲密接触5日休闲游', '0', '0-100', '10', '2', null, '大阪海游馆亲密接触5日休闲游');
INSERT INTO `t_travelitem` VALUES ('76', '0049', '日本奈良公园小鹿乱撞7日古都游', '0', '0-100', '10', '2', null, '日本奈良公园小鹿乱撞7日古都游');
INSERT INTO `t_travelitem` VALUES ('77', '0050', '大阪道顿堀小吃嘴不停6日美食游', '0', '0-100', '10', '2', null, '大阪道顿堀小吃嘴不停6日美食游');
INSERT INTO `t_travelitem` VALUES ('78', '0051', '大阪梅田空中庭院漫步6日休闲游', '0', '0-100', '10', '2', null, '大阪梅田空中庭院漫步6日休闲游');
INSERT INTO `t_travelitem` VALUES ('79', '0052', '大阪奈良赴一场盛宴6日深度游', '0', '0-100', '10', '2', null, '大阪奈良赴一场盛宴6日深度游');
INSERT INTO `t_travelitem` VALUES ('80', '0053', '日本繁华都市闲逛6日深度游', '0', '0-100', '10', '2', null, '日本繁华都市闲逛6日深度游');
INSERT INTO `t_travelitem` VALUES ('81', '0054', '毛里求斯鹿岛享沙滩阳光6日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯鹿岛享沙滩阳光6日蜜月游');
INSERT INTO `t_travelitem` VALUES ('82', '0055', '7天6晚毛里求斯360度多情与激情玩法', '0', '0-100', '10', '2', null, '7天6晚毛里求斯360度多情与激情玩法');
INSERT INTO `t_travelitem` VALUES ('83', '0056', '毛里求斯迪拜享浪漫10日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯迪拜享浪漫10日蜜月游');
INSERT INTO `t_travelitem` VALUES ('84', '0057', '毛里求斯迪拜两国畅玩9日经典游', '0', '0-100', '10', '2', null, '毛里求斯迪拜两国畅玩9日经典游');
INSERT INTO `t_travelitem` VALUES ('85', '0058', '毛里求斯蓝湾纯净浪漫8日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯蓝湾纯净浪漫8日蜜月游');
INSERT INTO `t_travelitem` VALUES ('86', '0059', '毛里求斯七色土绚烂多姿8日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯七色土绚烂多姿8日蜜月游');
INSERT INTO `t_travelitem` VALUES ('87', '0060', '5天4晚四川成都大众玩法', '0', '0-100', '10', '2', null, '5天4晚四川成都大众玩法');
INSERT INTO `t_travelitem` VALUES ('88', '0061', '成都杜甫草堂历史悠久5日访古游', '2', '0-100', '10', '2', null, '成都杜甫草堂历史悠久5日访古游');
INSERT INTO `t_travelitem` VALUES ('89', '0062', '成都人民公园享欢乐时光5日亲子游', '2', '0-100', '10', '2', null, '成都人民公园享欢乐时光5日亲子游');
INSERT INTO `t_travelitem` VALUES ('90', '0063', '成都锦里小吃很地道4日美食游', '0', '0-100', '10', '2', null, '成都锦里小吃很地道4日美食游');
INSERT INTO `t_travelitem` VALUES ('91', '0064', '成都锦里感受慢生活4日经典游', '0', '0-100', '10', '2', null, '成都锦里感受慢生活4日经典游');
INSERT INTO `t_travelitem` VALUES ('92', '0065', '成都春熙路吃货天堂4日美食游', '0', '0-100', '10', '2', null, '成都春熙路吃货天堂4日美食游');

美年旅游_自由行_自由行分页PageHelper相关推荐

选择行_外出旅游你会选择自由行还是跟团游？
8月1日晚,芒辰书茶社第43期活动在南徽书屋如期举行,本期的主题是<外出旅游你会选择自由行还是跟团游?>. 随着人们生活水平的提高,旅游已经成为了人民群众生活的重要组成部分,我国的旅游业也 ...
美年旅游_套餐管理_定时任务组件Quartz
文章目录补充上前面没有的配置先配置这些 2.4. 完善文件上传,Redis存储图片名称美年旅游_套餐管理_定时任务组件Quartz 4.1. Quartz介绍 Quartz 入门案例 4.2. ...
分页技巧_实现第一个分页功能（回复列表中的分页）
分页技巧_实现第一个分页功能(回复列表中的分页) ======================================== 假设共25条数据,每页显示10条,则共3页 first max - ...
大数据信息资料采集:携程旅游周边自驾自由行攻略产品信息采集
大数据信息资料采集:携程旅游周边自驾自由行攻略产品信息采集数据采集满足多种业务场景:适合产品.运营.销售.数据分析.政府机关.电商从业者.学术研究等多种身份职业. 舆情监控:全方位监测公开信息,抢先 ...
[JS 分析] 天_眼_查字体文件
0. 参考 js分析猫_眼_电_影字体文件 @font-face 1. 分析 1.1 定位目标元素 1.2 查看网页源代码 1.3 requests 请求提取得到大量错误信息对比猫_眼_电_影抓 ...
尔雅c语言答案,数据结构（C语言版）_尔雅_章节满分答案
数据结构(C语言版)_尔雅_章节满分答案更多相关问题根据下面内容,回答下列各题: 某组织拟按GB/T19001标准建立质量管理体系并申请认证.在进行质量管求插入纯水的氢电极与标准氢电极所组成的原 ...
MATLAB_4-形态学_腐蚀_膨胀_灰度图的腐蚀以及膨胀_开运算_闭运算_文章末尾有几个素材例子
素材链接: MATLAB_4-形态学_课程需要的素材记住单词拼写: 腐蚀 erode 膨胀 dilate 开运算 open 闭运算 close 图像重建 imreconstruct reconstr ...
计算机会计课程试题及答案,计算机会计第2次作业_报表_附答案
计算机会计第2次作业_报表_附答案 (6页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 . . . . .<计算机会计>课程作业 ...
java语言仅支持单重继承_java语言程序设计基础篇习题_复习题_第十一章
java语言程序设计基础篇习题_复习题_第十一章 11.1 下面说法是真是假?一个子类是父类的子集. 11.2 使用什么关键字来定义一个子类 11.3 什么是单一继承?什么是多重继承?java支持多重 ...
宏定义中的#、##操作符和... 、 _ _VA_ARGS_ _解析
# #符号作为一个预处理运算符,它可以把语言符号转化成字符串.例如,如果x是一个宏参量,那么#x可以把参数名转化成相应的字符串.该过程称为字符串化(stringizing). 例子 #incldu ...

美年旅游_自由行_自由行分页PageHelper

文章目录