网页项目思路讲解

比眉伴天荒 2022-01-28 00:27 673阅读 0赞

# 一、首页黑马精选 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

### 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封装以上的数据，存取的时候只要操作这一个对象就行。

## 整体思路图片解析： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

### 要求 ###

*  ### 当用户打开首页时，要求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里得到主题旅游，循环显示到页面上 ###
 *  > ### 动态拼接的写法： ###

# 二、分类导航 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

### 要求 ###

*  ### 打开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); #

# 三、搜索分页 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

### 传递参数： ###

> ### 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 ###
 *  ### 把里边的数据显示出来 ###

# 分页查询整体思路： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

## 用到的知识点： ##

## json的讲解： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5][]

## 处理异常固定写法： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6][]

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

## 拼接的写法： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7][]

## 关于response的讲解 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 8][]

的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20220128/29a4520f735847c999ef0aa3b575da24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20220128/e760260addb942a8959dd3d1c09d263b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20220128/bfebf8778017414fa49a963b726ee064.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20220128/630620dc55b743c69c0e2bf73552d4c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20220128/5f349631fe7f4feb810de5601f04e05e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5]: /images/20220128/fff8729be0ea46e49d32945bf38e2627.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6]: /images/20220128/cf061f731d6b402a9f36a18c3dead19f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7]: /images/20220128/73a664edf6634b2bba5c53fa63551ca7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 8]: /images/20220128/cbc7eb98c5f04057a6749fba7de51732.png