java批量新增每次提交只有一条_新增自由行

 新增自由行

main.html页面介绍：

【目标】

新增自由行

【路径】

1：前台代码

(1)弹出新增窗口

(2)输入校验

(3)提交表单数据

• ajax提交

1
2
3
axios.post("/travelItem/add.do",this.formData).then((response)=> {

})

2：后台代码

(1)TravelItemController.java (控制器，meinian_web里面实现)

(2)TravelItemService.java(服务接口，meinian_interface里面实现)

(3)TravelItemServiceImpl.java(服务实现类，meinian_service里面实现)

(4)TravelItemDao.java(Dao接口，meinian_dao里面实现)

(5)TravelItemDao.xml(Mapper映射文件，)

3：创建数据库和表

打开 mysql 客户端，创建数据库 meinian

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
DROP TABLE IF EXISTS `t_travelgroup`;
CREATE TABLE `t_travelgroup` (`id` int(11) NOT NULL AUTO_INCREMENT,`code` varchar(32) DEFAULT NULL,`name` varchar(1000) DEFAULT NULL,`helpCode` varchar(32) DEFAULT NULL,`sex` char(1) DEFAULT NULL,`remark` varchar(1000) DEFAULT NULL,`attention` varchar(1000) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;

DROP TABLE IF EXISTS `t_travelitem`;
CREATE TABLE `t_travelitem` (`id` int(11) NOT NULL AUTO_INCREMENT,`code` varchar(16) DEFAULT NULL,`name` varchar(32) DEFAULT NULL,`sex` char(1) DEFAULT NULL,`age` varchar(32) DEFAULT NULL,`price` float DEFAULT NULL,`type` char(1) DEFAULT NULL COMMENT '自由行类型,分为自由和跟团两种',`attention` varchar(128) DEFAULT NULL,`remark` varchar(128) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=98 DEFAULT CHARSET=utf8;




DROP TABLE IF EXISTS `t_travelgroup_travelitem`;
CREATE TABLE `t_travelgroup_travelitem` (`travelgroup_id` int(11) NOT NULL DEFAULT '0',`travelitem_id` int(11) NOT NULL DEFAULT '0',PRIMARY KEY (`travelgroup_id`,`travelitem_id`),KEY `item_id` (`travelitem_id`),CONSTRAINT `group_id` FOREIGN KEY (`travelgroup_id`) REFERENCES `t_travelgroup` (`id`),CONSTRAINT `item_id` FOREIGN KEY (`travelitem_id`) REFERENCES `t_travelitem` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

【接口文档】

调用方requestparams子成员：

formData子成员如下：

请求方式 ：post 请求

请求地址

/travelItem/add.do

【讲解】

3.1. 前台代码

自由行管理页面对应的是travelItem.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。

3.1.1. 弹出新增窗口

页面中已经提供了新增窗口，只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。

新建按钮绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。

1
2
3
4
5
6
7
8
9
// 重置表单
resetForm() {
this.formData = {};
},
// 弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible = true;
},

3.1.2. 输入校验

1
2
3
4
rules: {//校验规则
    code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
    name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}

3.1.3. 提交表单数据

点击新增窗口中的确定按钮时，触发handleAdd方法，所以需要在handleAdd方法中进行完善。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//添加
handleAdd () {
//校验表单输入项是否合法
this.$refs['dataAddForm'].validate((valid) => {
if (valid) {
//表单数据校验通过，发送ajax请求将表单数据提交到后台
            axios.post("/travelItem/add.do",this.formData).then((response)=> {
//隐藏新增窗口
this.dialogFormVisible = false;
//判断后台返回的flag值，true表示添加操作成功，false为添加操作失败
if(response.data.flag){
this.$message({
                        message: response.data.message,
                        type: 'success'
                    });
                }else{
this.$message.error(response.data.message);
                }
            }).finally(()=> {
// 刷新页面(列表查询)
this.findPage();
            });
        } else {
this.$message.error("表单数据校验失败");
return false;
        }
    });
},
//分页查询
findPage() {
},

3.2. 后台代码

3.2.1. Controller

在 meinian_web 工程中创建 TravelItemController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package com.atguigu.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
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;

/**
 * TravelItemController
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 */
@RestController
@RequestMapping(value = "/travelItem")
public class TravelItemController {
@Reference
private TravelItemService travelItemService;

//新增
@RequestMapping("/add")
public Result add(@RequestBody TravelItem travelItem){
try {
            travelItemService.add(checkItem);
        }catch (Exception e){
return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);
        }
return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS);
    }
}

3.2.2. 服务接口

在 meinian_interface 工程中创建 TravelItemService 接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.atguigu.service;

import com.atguigu.pojo.TravelItem;

/**
 * TravelItemService
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 */
public interface TravelItemService {
void add(TravelItem travelItem);
}

3.2.3. 服务实现类

在 meinian_service 工程中创建 TravelItemServiceImpl 实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package com.atguigu.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelItemDao;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;



/**
 * CheckItemServiceImpl
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 * // dubbo(整合声明式事务处理
 * 1：配置applicationContext-tx.xml对类代理，
 * 2：@Service(interfaceClass = TravelItemService.class))
 */

@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements TravelItemService {

@Autowired
private TravelItemDao travelItemDao;

@Override
public void add(TravelItem travelItem) {
        travelItemDao.add(travelItem);
    }
}

3.2.4. Dao接口

在meinian_dao工程中创建TravelItemDao接口，本项目是基于Mybatis的Mapper代理技术实现持久层操作，故只需要提供接口和Mapper映射文件，无须提供实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.atguigu.dao;

import com.atguigu.pojo.TravelItem;

/**
 * TravelItemDao
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-29
 * @Description:
 */
public interface TravelItemDao {
void add(TravelItem travelItem);
}

3.2.5. Mapper映射文件

在meinian_dao 工程中创建 TravelItemDao.xml 映射文件，需要和 TravelItemDao 接口在同一目录下

新建文件夹的时候，一定一定要注意，在 resources 文件夹下面新建文件夹

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8" ?>
br  />        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.atguigu.dao.TravelItemDao">

<insert id="add" parameterType="travelItem">
        insert into t_travelitem(code,name,sex,age,price,type,remark,attention)
        values
        (#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})
insert>
mapper>

运行程序 http://localhost:82/pages/main.html

【小结】

1：前台代码

(1)弹出新增窗口

只需要将控制展示状态的属性 dialogFormVisible 改为true就可以显示出新增窗口。

(2)输入校验

使用 ElementUI的Form表单校验

(3)提交表单数据

• ajax提交

1
2
3
axios.post("/travelItem/add.do",this.formData).then((response)=> {

})

2：后台代码

(1)TravelItemController.java

(2)TravelItemService.java(服务接口)

(3)TravelItemServiceImpl.java(服务实现类)

(4)TravelItemDao.java(Dao接口)

(5)TravelItemDao.xml(Mapper映射文件)

【错误】

错误 ①

解决办法

1
2
1.对应的dubbo服务未启动，或者是dubbo没有连上Zookeeper注册中心。
2.controller层 ，引入远程service的时候，impl没有添加注解 dubbo的@Service 注解(加上@Service(@Service(interfaceClass = CheckItemService.class))之后，就可以了)

错误 ②

解决办法

1
2
3
4
5
6
7
8

<bean id="dataSource"class="com.alibaba.druid.pool.DruidDataSource" destroy-method="close">
<property name="username" value="root" />
<property name="password" value="root" />
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
<property name="url" value="jdbc:mysql://127.0.0.1:3306/meinian?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8" />
bean>

错误③

解决办法

① 先看注解是否添加，service注解，controller注解，各种注解

② 导注解的包有没有倒错，特别是service，需要导入dubbo注解

③ 如果包没有倒错，注解也添加了，在看看配置文件扫包的时候，包是不是写错了

4. 第四章. 自由行分页

【目标】

1：熟悉分页功能中的请求参数

2：熟悉分页功能中的响应数据

3：自由行分页功能实现

【路径】

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:[]}

如下图：

4.1. 前台代码

调用方requestparams子成员：

返回方PageResult子成员：

调用地址

/travelItem/findPage.do

4.1.1. 定义分页相关模型数据

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

4.1.2. 定义分页方法

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

1
2
3
4
//钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//分页查询
findPage() {
//分页参数
var param = {
        currentPage:this.pagination.currentPage,//页码
        pageSize:this.pagination.pageSize,//每页显示的记录数
        queryString:this.pagination.queryString//查询条件
    };
//请求后台
    axios.post("/travel/findPage.do",param).then((response)=> {
//为模型数据赋值，基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
    });
},

4.1.3. 完善分页方法执行时机

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

为查询按钮绑定单击事件，调用findPage方法

<el-button @click="handleCurrentChange(1)" class="dalfBut">查询el-button>

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

1
2
3
4
5
6
7
8
9
10
<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方法

1
2
3
4
5
6
//切换页码
handleCurrentChange(currentPage) {
// currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage();
},

4.2. 后台代码

4.2.1. Controller

在 TravelItemController中增加分页查询方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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;

/**
 * CheckItemController
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 */
@RestController
@RequestMapping(value = "/travel")
public class TravelItemController {

@Reference
private TravelItemService travelItemService;


@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
        PageResult pageResult = travelItemService.findPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());
return pageResult;

    }
}

4.2.2. 服务接口

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.atguigu.service;

import com.atguigu.entity.PageResult;
import com.atguigu.pojo.CheckItem;

/**
 * TravelItemService
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 */
public interface TravelItemService {


PageResult findPage(Integer currentPage, Integer pageSize, String queryString);
}

4.2.3. 服务实现类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package com.atguigu.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.CheckItemDao;
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;



/**
 * TravelItemServiceImpl
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 * // dubbo(整合声明式事务处理
 * 1：配置applicationContext-tx.xml对类代理，
 * 2：@Service(interfaceClass = TravelItemService.class))
 */

@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements TravelItemService {

@Autowired
private TravelItemDao travelItemDao;

@Override
public 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 page = travelItemDao.findPage(queryString);// 3：封装return new PageResult(page.getTotal(),page.getResult());
    }
}

4.2.4. Dao接口

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.atguigu.dao;

import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;

/**
 * TravelItemDao
 *
 * @Author: 马伟奇
 * @CreateTime: 2019-12-17
 * @Description:
 */
public interface TravelItemDao {

PagefindPage(String queryString);
}

4.2.5. Mapper映射文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select id="findPage" parameterType="string" resultType="travelItem">

        select * from t_travelitem
<where>
<if test="value!=null and value.length>0">
                name=#{value} or code=#{value}
if>
where>

    select * from t_travelitem
<where>
<if test="value!=null and value.length>0">
                name like "%"#{value}"%" or code=#{value}
if>
where>

select>

如果使用if进行判断，这里需要是value读取值，不能改成其他参数。

导入查询语句到mysql数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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日美食游');

运行程序 http://localhost:82/pages/main.html

【小结】

1：前台代码

(1)定义分页相关模型数据

(2)定义分页方法

• 使用钩子函数，初始化数据

(3)完善分页方法执行时机

• 查询按钮

2：后台代码

(1)TravelItemController.java

(2)TravelItemService.java(服务接口)

(3)TravelItemServiceImpl.java(服务实现类)

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

1
2
3
4
5
public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
    PageHelper.startPage(currentPage,pageSize);
    Page page = checkItemDao.selectByCondition(queryString);return new PageResult(page.getTotal(),page.getResult());
}

(4)TravelItemDao.java(Dao接口)

(5)TravelItemDao.xml(Mapper映射文件)

1
2
3
4
5
6
7
8
9
--条件查询-->
<select id="selectByCondition" parameterType="string" resultType="travelItem">select * from t_travelitem
    <if test="value != null and value.length > 0">where code = #{value} or name = #{value}if>select>