一、首页黑马精选

PageBean分析：

1.首先，Servlet从jsp获取当前页码，然后传递给Service也就是业务逻辑层。

2.service层接收到数据，并且设置pageSize大小;

3.然后调用dao层查询数据库中的总的记录条数total和查询到的分页后的数据List<Prodcut>返回给service层。

4.service层就有了以下数据：total，pageSize，pageNumber，List<Product>

5.通过计算可以得到totalPage和startIndex;

6.问题来了：当我们考虑如何将总页数，查询到的结果List集合一块返回给Servlet呢？一个方法无法返回两个不同类型的数据。

7.于是我们可以将以上的数据封装到PageBean中，通过PageBean这个JavaBean封装以上的数据，存取的时候只要操作这一个对象就行。

整体思路图片解析：

要求

当用户打开首页时，要求Ajax请求从服务端得到“人气旅游”、“最新旅游”、“主题旅游”三类数据

把这三类数据显示到首页的页面上

分析

1. 在index.html页面里发请求：确定是否要传参

发送Ajax请求到Servlet：目的是想要三类数据

2. 在Servlet里：准备页面需要的数据

接收参数：略

封装实体：略

完成功能：调用service，查询得到三类数据

在Service里分别查询：

查询人气旅游数据，得到List<Route>

查询最新旅游数据，得到List<Route>

查询主题旅游数据，得到List<Route>

在Service里把三类数据封装到一个Map<String, List<Route>>，把map返回给Servlet

处理结果：把map放到ResultInfo里

把ResultInfo转换成json，返回客户端

3. 在index.html页面里：拿到结果数据，处理显示出来

从result里得到map的数据

从map里得到人气旅游，循环显示到页面上

从map里得到最新旅游，循环显示到页面上

从map里得到主题旅游，循环显示到页面上

动态拼接的写法：

二、分类导航

要求

打开header.html页面的时候，要发Ajax请求，从服务端得到所有分类的数据

把这些分类数据，循环显示到导航条上

注意：分类数据特点是查询多，变更少，要使用缓存数据库Redis

分析

在header.html页面里：发Ajax请求

Ajax请求到Servlet，不需要传参

在Servlet里：完成功能，查询所有分类

调用service，查询所有分类数据

在Service里：

优先从Redis缓存里查找，得到结果

如果缓存里没有：

调用dao，从数据库MySql里查询，得到List<Category>

把List<Category>转换成json格式的字符串

把字符串放到Redis缓存里

返回结果，返回给Servlet

得到结果，结果类型是：String

把结果放到ResultInfo里，转换成json，把json格式的字符串返回客户端

在header.html页面里：处理结果

得到结果，类型是String

处理String（里边是所有的分类数据）

把每个分类显示到页面的导航条里

小结

在js里：把字符串转换成json对象，使用eval()方法

//如果字符串是js代码字符串，可以直接使用eval方法 var str = "var a=1;var b=2; alert(a+b);"; eval(str); ​ ​ //如果字符串是json格式的字符串，想要使用eval转换成json对象，就必须要使用()包起来，再eval() //{"ok":true,"data":"123","msg":"456"} var str = "{\"ok\":true,\"data\":\"123\",\"msg\":\"456\"}"; var json = eval("(" + str + ")");alert(json.ok);

三、搜索分页

传递参数：

var params = "action=search&cid="+cid+"&rname="+rname+"&pageNumber="+pageNumber;

要求：

用户点击了分类导航里的某个分类，跳转到搜索结果页面route_list.html，在route_list.html里显示根据分类搜索的结果，结果分页显示

用户在顶部搜索框里输入路线名称，点击“搜索”按钮，跳转到搜索结果页面route_list.html，在route_list.html里显示根据路线名称搜索的结果，结果分页显示

要求：在route_list.html页面里发Ajax方式，进行异步搜索，显示结果

分析：

要点分析：

1.页面需要什么数据

某一页码的数据集合（旅游路线的集合）：List<Route>，用于显示到页面上

当前页码：pageNumber。用于标示出来当前页码的按钮

每页几条：pageSize。目前功能里是没有的，可以忽略（给一个固定值即可）

总条数：totalCount。用于显示到页面共xx页xx条

总页数：pageCount。用于显示到页面共xx页

开始页码：start。用于前5后4动态分页条功能实现时，从哪个页码开始显示

结束页面：end。用于前5后4动态分页条功能实现时，显示到哪个页码为止

Service的数据：

//这里准备页面准备的所有的数据这里的数据都是PageBean里面调取的 public PageBean<Route> search(String cid, String rname, int pageNumber, int pageSize) {     PageBean<Route> pageBean = new PageBean<>();     /*当前页码 */     pageBean.setPageNumber(pageNumber);     /*每页多少条*/     pageBean.setPageSize(pageSize);     /*总共多少数据*/     int totalCount = routeDao.getTotalCount(cid,rname);     pageBean.setTotalCount(totalCount);     /*分了多少页*/     int pageCount = PageUtils.calcPageCount(totalCount, pageSize);     pageBean.setPageCount(pageCount);     /*当前页的数据集合*/     int index = PageUtils.calcSqlLimitIndex(pageNumber, pageSize);     List<Route> routeList = routeDao.search(cid,rname,index,pageSize);     pageBean.setData(routeList);

    /*页码条从几开始显示*/     int[] pagination = PageUtils.pagination(pageNumber, pageCount);     pageBean.setStart(pagination[0]);     /*页码条显示到几结束*/     pageBean.setEnd(pagination[1]);

    return pageBean; }

2.服务端需要准备页面需要的数据，如何准备？

pageNumber：当前页码，从页面传参

pageSize：每页几条，固定值 8

totalCount：查询数据库，根据搜索条件查询的总数量

SELECT COUNT(*) FROM tab_route WHERE rflag = 1 AND cid = ? AND rname LIKE ?

pageCount：根据totalCount和pageSize计算出来。

pageCount = Math.ceil(totalCount*1.0 / pageSize)

总条数 除以 每页几条，如果余数是0，总页数：总条数/每页几条

总条数 除以 每页几条，如果余数不是0，总页数：总条数/每页几条+1

List<Route>：当前页码数据集合，查询数据库

SELECT * FROM tab_route WHERE rflag = 1 AND cid = ? AND rname LIKE ? LIMIT ?,?

需要limit的起始索引 index = (pageNumber - 1) * pageSize

start和end：前5后4动态分页条中，页码的起始和结束值，根据pageNumber和pageCount进行计算

3.准备页面需要的数据需要什么参数

pageNumber：当前页码是几

cid：搜索条件，分类id

rname：搜索条件，路线名称

注意：页面向Servlet发请求，要进行搜索时，必须要传参：cid, rname, pageNumber

整体实现过程的思路分析

1.页面发请求到服务端，传参

在route_list.html里，要发Ajax请求到Servlet。目的是要得到搜索的分页的结果

请求时一定要传参：cid, rname, pageNumber

2.在Servlet里，接收参数，完成功能，返回结果

接收参数：

cid，rname

pageNumber：如果页码没有传的话，默认页码是1

pageSize：如果页面没有传的话，默认值是每页8条

完成功能：

调用service，把搜索条件cid、rname，以及分页条件pageNumber、pageSize给Service

在Service里准备页面需要的所有数据，封装成PageBean对象

pageNumber：参数

pageSize：参数

totalCount：调用dao

pageCount：计算

data：当前页码的数据集合，调用dao

start和end：计算

返回pageBean对象

处理结果：

把pageBean放到ResultInfo里

把ResultInfo转换成json格式字符串

把json格式字符串返回客户端页面route_list.html

3.页面得到结果，处理显示结果

得到结果pageBean

把里边的数据显示出来

分页查询整体思路：

用到的知识点：

json的讲解：

处理异常固定写法：

回调函数的result:服务端响应来的结果。

拼接的写法：

关于response的讲解

的