功能需求

①、当市场活动主页面加载完成之后,显示所有数据的第一页;

②、用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变

③、实现翻页功能.

*在市场活动主页面,显示市场活动列表和记录的总条数

*默认每页显示条数: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_byfrom tbl_activity ajoin tbl_user u1 on a.owner=u1.idjoin tbl_user u2 on a.create_by=u2.idleft 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&gt;=#{startDate}</if><if test="endDate!=null and endDate!=''">and a.end_date&lt;=#{endDate}</if></where>order by a.create_time desclimit #{beginNo},#{pageSize}</select>

返回符合条件的记录数

   <select id="selectCountOfActivityByCondition" resultType="java.lang.Integer">select count(*)from tbl_activity ajoin tbl_user u1 on a.owner=u1.idjoin tbl_user u2 on a.create_by=u2.idleft 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&gt;=#{startDate}</if><if test="endDate!=null and endDate!=''">and a.end_date&lt;=#{endDate}</if></where></select>

二、ActivityService

1.ActivityService接口

	/*** 分页查询市场活动*/List<Activity> queryActivityByConditionForPage(Map<String,Object> map);/*** 符合市场活动的条数*/int queryCountOfActivityByCondition(Map<String,Object> map);

2.ActivityServiceImpl实现类，实现接口，调用mapper方法

	@Overridepublic List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {return activityMapper.selectActivityByConditionForPage(map);}@Overridepublic 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);//调用ServiceList<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有两个数据，一个是数组，一个是intsuccess: 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有两个数据，一个是数组，一个是intsuccess: 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);}});}