旅游项目第2天

r囧r小猫 2022-01-28 15:19 228阅读 0赞

# 旅游项目第2天 #

## 一、首页黑马精选 ##

### 要求 ###

*  当用户打开首页时，要求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);

## 三、搜索分页 ##

### 要求： ###

*  用户点击了分类导航里的某个分类，跳转到搜索结果页面route\_list.html，在route\_list.html里显示根据分类搜索的结果，结果分页显示
 *  ### header.html网页写入的代码 ###

### 导航条进行传参:cid和pageNumber ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

*  ### 搜索框进行传参：rname,pageNumber ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

*  **用户在顶部搜索框里输入路线名称，点击“搜索”按钮，跳转到搜索结果页面route\_list.html，在route\_list.html里显示根据路线名称搜索的结果，结果分页显示**
 *  ### 引入工具类getParameter ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

*  ### 网页route\_list.html接收header.html传入的参数 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

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

> **使用ajax异步搜索内容,如果符合内容,则一行行的显示,每次查询时清空上次的记录**

*  ### **RouteServlet.java代码** ###
 *  **ResultInfo的try功能固定的写法**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

/**
         * 搜索+分页
         *
         * @param request
         * @param response
         * @throws ServletException
         * @throws IOException
         */
        public void search(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            ResultInfo info = null;
            try {
                //1.接收参数
                String cid = request.getParameter("cid");
                String rname = request.getParameter("rname");
                int pageNumber = 1;
                int pageSize = 8;
                String pageNumberStr = request.getParameter("pageNumber");
                if (pageNumberStr != null && !"".equals(pageNumberStr)) {
                    pageNumber = Integer.parseInt(pageNumberStr);
                }
    
                //2.封装实体：略
                //3.完成功能
                PageBean<Route> pageBean = routeService.search(cid, rname, pageNumber, pageSize);
    
                //4.处理结果
                info = new ResultInfo(true, pageBean);
            } catch (Exception e) {
                e.printStackTrace();
                info = new ResultInfo(false, "系统忙，请稍候");
            }
    
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            response.getWriter().print(json);
        }

### 这个叫做pageNumberStr不等于null并且不等于空字串. ###

![20190524104621402.png][]

*  ### 上面调用Service进入到了RouteService代码块 ###

/**
         * 搜索分页功能，准备页面需要的所有数据
         * 总页数：不够10页
         * start：1(初始页面)
         * end： 总页数
         * pageNumber(页码）
         * 总页数：>10页，要根据当前页码进行计算。前5后4
         * pageNumber    pageCount   start         end
         * 1                12         1            10
         * 3                12         1            10
         * 7                12         2            11
         * 11               12         3            12
         */
        @Override
        //这里准备页面准备的所有的数据这里的数据都是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;
        }

*  ### 进入到了RouteDao ###

/**
         * 页面搜索的条件有两个：cid、rname
         * 问题：两个条件不一定都有。如果其中某个条件没有值，SQL语句执行可能会有问题
         * select count(*) from tab_route  WHERE rflag = 1 AND cid = ? AND rname LIKE ?
         * 解决：
         * 判断cid有没有值，如果有：SQL里加cid的条件。如果没有：不加cid条件
         * 判断rname有没有值，如果有：SQL里加rname的条件。如果没有：不加cid条件
         *
         * @param cid
         * @param rname
         * @return
         */
        @Override
        public int getTotalCount(String cid, String rname) {
            String sql = "select count(*) from tab_route  WHERE rflag = 1 ";
            List<Object> params = new ArrayList<>();
            if (cid != null && !"".equals(cid)) {
                sql += " and cid = ? ";
                params.add(cid);
            }
            if (rname != null && !"".equals(rname)) {
                sql += " AND rname LIKE ?";
                params.add("%" + rname + "%");
            }
    
            Integer count = jdbcTemplate.queryForObject(sql, Integer.class, params.toArray());
            return count;
        }
    
        @Override
        public List<Route> search(String cid, String rname, int index, int pageSize) {
            String sql = "SELECT * FROM tab_route WHERE rflag = 1 ";
            List<Object> params = new ArrayList<>();
            if (cid != null && !"".equals(cid)) {
                sql += " and cid = ? ";
                params.add(cid);
            }
            if (rname != null && !"".equals(rname)) {
                sql += " AND rname LIKE ?";
                params.add("%" + rname + "%");
            }
            sql += "limit ?,?";
            params.add(index);
            params.add(pageSize);
    
            List<Route> routeList = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), params.toArray());
            return routeList;
        }

### 分析： ###

要点分析：

1.页面需要什么数据

*  某一页码的数据集合（旅游路线的集合）：`List<Route>`，用于显示到页面上
 *  当前页码：pageNumber。用于标示出来当前页码的按钮
 *  每页几条：pageSize。目前功能里是没有的，可以忽略（给一个固定值即可）
 *  总条数：totalCount。用于显示到页面共xx页xx条
 *  总页数：pageCount。用于显示到页面共xx页
 *  开始页码：start。用于前5后4动态分页条功能实现时，从哪个页码开始显示
 *  结束页面：end。用于前5后4动态分页条功能实现时，显示到哪个页码为止

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]: /images/20220128/a2da5912004e415fbda7e7e9c37813a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20220128/dbd9a9b64f094ef08b03efa727c2d417.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20220128/118e0dcc9644488997ad806b9bf2cc69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20220128/b8ae0def3920426dad5ac4a929107d88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20220128/c629f80ae96245229602cbd1475d6a03.png
[20190524104621402.png]: /images/20220128/c930766877594215baa769c6a9e96149.png