网页项目思路讲解

最新推荐文章于 2024-06-21 19:24:17 发布

风一般的男子丶小靓仔

最新推荐文章于 2024-06-21 19:24:17 发布

阅读量1k

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/qq_40976761/article/details/90450396

版权

java 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

一、首页黑马精选

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