功能需求
①、当市场活动主页面加载完成之后,显示所有数据的第一页;
②、用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变
③、实现翻页功能.
*在市场活动主页面,显示市场活动列表和记录的总条数
*默认每页显示条数:10
流程图
一、ActivityMapper
1.ActivityMapper接口
/**
* 查询市场活动的列表
*/
List<Activity> selectActivityByConditionForPage(Map<String,Object> map);
/**
* 查询市场活动的条数
*/
int selectCountOfActivityByCondition(Map<String,Object> map);2.ActivityMapper映射文件
【起别名】：①tbl_activity---a ②tbl_user---u*表示
- 查询的字段有：
a.id（删除，修改根据选中的id）
u1.name as owner(所有者)
a.name（名称）
a.start_date（活动开始时间）
a.end_date,（活动结束时间）
a.cost,（活动花费）
a.description,（活动描述）
a.create_time,（活动创建时间）
u2.name as create_by（活动的创建者）
a.edit_time，（修改活动时间）
u3.name as edit_by（修改者）
- 使用外连接内连接进行多表查询
- 通过<where>标签进行条件拼接
- order by *** desc 进行降序
- limit a,b 从起点a开始，返回b条数据
【注意】#{***}要和map的key名称一致
<!-- List<Activity> selectActivityByConditionForPage(Map<String,Object> map)；分页查询-->
<select id="selectActivityByConditionForPage" resultMap="BaseResultMap">
select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
u2.name as create_by,a.edit_time,u3.name as edit_by
from tbl_activity a
join tbl_user u1 on a.owner=u1.id
join tbl_user u2 on a.create_by=u2.id
left join tbl_user u3 on a.edit_by=u3.id
<where>
<if test="name!=null and name!=''">
and a.name like "%"#{name}"%"
</if>
<if test="owner!=null and owner!=''">
and u1.name like "%"#{owner}"%"
</if>
<if test="startDate!=null and startDate!=''">
and a.start_date>=#{startDate}
</if>
<if test="endDate!=null and endDate!=''">
and a.end_date<=#{endDate}
</if>
</where>
order by a.create_time desc
limit #{beginNo},#{pageSize}
</select>返回符合条件的记录数
<select id="selectCountOfActivityByCondition" resultType="java.lang.Integer">
select count(*)
from tbl_activity a
join tbl_user u1 on a.owner=u1.id
join tbl_user u2 on a.create_by=u2.id
left join tbl_user u3 on a.edit_by=u3.id
<where>
<if test="name!=null and name!=''">
and a.name like "%"#{name}"%"
</if>
<if test="owner!=null and owner!=''">
and u1.name like "%"#{owner}"%"
</if>
<if test="startDate!=null and startDate!=''">
and a.start_date>=#{startDate}
</if>
<if test="endDate!=null and endDate!=''">
and a.end_date<=#{endDate}
</if>
</where>
</select>二、ActivityService
1.ActivityService接口
/**
* 分页查询市场活动
*/
List<Activity> queryActivityByConditionForPage(Map<String,Object> map);
/**
* 符合市场活动的条数
*/
int queryCountOfActivityByCondition(Map<String,Object> map);2.ActivityServiceImpl实现类，实现接口，调用mapper方法
@Override
public List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {
return activityMapper.selectActivityByConditionForPage(map);
}
@Override
public int queryCountOfActivityByCondition(Map<String, Object> map) {
return activityMapper.selectCountOfActivityByCondition(map);
}三、ActivityController
【分析】：
1.ajax异步请求，返回的是json对象，，所以方法头是类型是Object，并且用@ResponseBody修饰，返回的map类型转换为json
2.方法形参要和前端ajax的data方法名key保持一致，否则无法匹配
【controller功能】
1.封装参数
2.调用Service
3.生成响应信息
/**
* 根据条件，分页
*/
@RequestMapping("/workbench/activity/queryActivityByConditionForPage.do")
public @ResponseBody Object queryActivityByConditionForPage(String name,String owner,String startDate,String endDate,int pageNo,int pageSize){
//封装参数
Map<String,Object> map = new HashMap<>();
map.put("name",name);
map.put("owner",owner);
map.put("startDate",startDate);
map.put("endDate",endDate);
map.put("beginNo",(pageNo-1)*pageSize);
map.put("pageSize",pageSize);
//调用Service
List<Activity> activityList = activityService.queryActivityByConditionForPage(map);
int totalRows = activityService.queryCountOfActivityByCondition(map);
//生成响应信息
Map<String,Object> retMap = new HashMap<>();
retMap.put("activityList",activityList);
retMap.put("totalRows",totalRows);
return retMap;
}四、前端workbench/activity/index.jsp
【功能】
1.查询：当市场活动主页面加载完成，显示所有数据的第一页和总条数
①在js收集查询的参数
var name = $("#query-name").val();
var owner = $("#query-owner").val();
var startDate = $("#query-startDate").val();
var endDate = $("#query-endDate").val();
var pageNo = 1;//页码
var pageSize = 10;//显示的数量②ajax发送请求
url是请求的controller
data:是封装的数据 key要和mapper的形参保持一致
//2.2发送请求
$.ajax({
url: 'workbench/activity/queryActivityByConditionForPage.do',
data: {
name: name,
owner: owner,
startDate: startDate,
endDate: endDate,
pageNo: pageNo,
pageSize: pageSize
},
type: 'post',③处理响应，解析json
- data就是返回来的json。有市场活动列表和总条数
- $("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
- 遍历数组列表activityList 。$.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
- 定义字符串，存放市场活动列表数据 var htmlStr = "";
- htmlStr += "<tr class=\"active\">"; 对表格的“”加上转义字符\
-
htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";表单值获取，采用"+obj.xxx+" -
<tbody id="tBody">通过这个代码进行插入$("#tBody").html(htmlStr); -
text()显示文本信息不能有标签，html()可以有标签
dataType: 'json',
//2.3处理响应 data有两个数据，一个是数组，一个是int
success: function (data) {
// 总条数
$("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
// 遍历数组列表activityList $.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
// 定义字符串，存放市场活动列表数据
var htmlStr = "";
$.each(data.activityList, function (index, obj) {
// obj和this都是取出的数组元素,htmlStr进行字符串拼接
htmlStr += "<tr class=\"active\">";
htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
htmlStr += " <td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
htmlStr += "<td>" + obj.owner + "</td>";
htmlStr += " <td>" + obj.startDate + "</td>";
htmlStr += " <td>" + obj.endDate + "</td>";
htmlStr += "</tr>";
});
// 把拼接好的表格字符串 插入到 显示的<tbody>
// text()显示文本信息不能有标签，html()可以有标签
$("#tBody").html(htmlStr);
}完整的js
//2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
queryActivityByConditionForPage();
//3.按条件查询
$("#queryActivityBtn").click(function () {
//按照条件查询
queryActivityByConditionForPage();
});
function queryActivityByConditionForPage(){
//2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
//2.1收集查询的参数
var name = $("#query-name").val();
var owner = $("#query-owner").val();
var startDate = $("#query-startDate").val();
var endDate = $("#query-endDate").val();
var pageNo = 1;//页码
var pageSize = 10;//显示的数量
//2.2发送请求
$.ajax({
url: 'workbench/activity/queryActivityByConditionForPage.do',
data: {
name: name,
owner: owner,
startDate: startDate,
endDate: endDate,
pageNo: pageNo,
pageSize: pageSize
},
type: 'post',
dataType: 'json',
//2.3处理响应 data有两个数据，一个是数组，一个是int
success: function (data) {
// 总条数
$("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
// 遍历数组列表activityList $.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
// 定义字符串，存放市场活动列表数据
var htmlStr = "";
$.each(data.activityList, function (index, obj) {
// obj和this都是取出的数组元素,htmlStr进行字符串拼接
htmlStr += "<tr class=\"active\">";
htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
htmlStr += " <td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
htmlStr += "<td>" + obj.owner + "</td>";
htmlStr += " <td>" + obj.startDate + "</td>";
htmlStr += " <td>" + obj.endDate + "</td>";
htmlStr += "</tr>";
});
// 把拼接好的表格字符串 插入到 显示的<tbody>
// text()显示文本信息不能有标签，html()可以有标签
$("#tBody").html(htmlStr);
}
});
}
