旅游项目第2天

最新推荐文章于 2022-09-25 16:35:17 发布

风一般的男子丶小靓仔

最新推荐文章于 2022-09-25 16:35:17 发布

阅读量229

点赞数

分类专栏： java

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

版权

java 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

旅游项目第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

搜索框进行传参：rname,pageNumber

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

网页route_list.html接收header.html传入的参数

<script>
        //1.接收参数：cid, rname
        var cid = getParameter("cid");
        var rname = getParameter("rname");
        var pageNumber = getParameter("pageNumber");

        //2.发Ajax请求，把搜索条件和分页条件传递给Servlet。得到搜索结果，分页显示
        var params = "action=search&cid="+cid+"&rname="+rname+"&pageNumber="+pageNumber;
        //Ajax的post的请求
        //result是服务端响应来的结果
        $.post("route",params,function(result){
            if (result.ok) {
                var pageBean = result.data;

                //1.当前页的数据集合，循环显示
                var routes = pageBean.data;
                var routeHtml = "";
                for(var route of routes){
                    routeHtml += "<li>\n" +
                        "                            <div class=\"img\"><img style='width:100%;' src=\""+route.rimage+"\" alt=\"\"></div>\n" +
                        "                            <div class=\"text1\">\n" +
                        "                                <p>"+route.rname+"</p>\n" +
                        "                                <br>\n" +
                        "                                <p>"+route.routeIntroduce+"</p>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"price\">\n" +
                        "                                <p class=\"price_num\">\n" +
                        "                                    <span>¥</span>\n" +
                        "                                    <span>"+route.price+"</span>\n" +
                        "                                    <span>起</span>\n" +
                        "                                </p>\n" +
                        "                                <p><a href=\"route_detail.html?rid="+route.rid+"\">查看详情</a></p>\n" +
                        "                            </div>\n" +
                        "                        </li>";
                }
                $(".left>ul").html(routeHtml);

                //2.分页信息显示：共xx页xx条
                $(".page_num_inf").html("<i></i> 共 <span>"+pageBean.pageCount+"</span>页<span>"+pageBean.totalCount+"</span>条");

                //3.分页条
                var pageHtml = "";
                //3.1 首页和上一页
                if (pageBean.pageNumber > 1) {
                    pageHtml += "<li><a href=\"route_list.html?cid="+cid+"&rname="+rname+"&pageNumber=1\">首页</a></li>";
                    //ctrl+alt+shift+v  粘贴原本内容，不转义。ctrl+v：转义粘贴
                    pageHtml += "<li class=\"threeword\"><a href=\"route_list.html?cid="+cid+"&rname="+rname+"&pageNumber="+(pageBean.pageNumber-1)+"\">上一页</a></li>";
                }
                //3.2 页码：从开始页拼接到结束页
                for (var i = pageBean.start; i <= pageBean.end; i++) {
                    var className = i===pageBean.pageNumber?"curPage":"";

                    pageHtml += "<li class='"+className+"'><a href=\"route_list.html?cid="+cid+"&rname="+rname+"&pageNumber="+i+"\">"+i+"</a></li>";
                }
                //3.3 下一页和末页
                if (pageBean.pageNumber < pageBean.pageCount) {
                    pageHtml+="<li class=\"threeword\"><a href=\"route_list.html?cid="+cid+"&rname="+rname+"&pageNumber="+(pageBean.pageNumber + 1)+"\">下一页</a></li>";
                    pageHtml+="<li class=\"threeword\"><a href=\"route_list.html?cid="+cid+"&rname="+rname+"&pageNumber="+pageBean.pageCount+"\">末页</a></li>";
                }
                $(".pageNum>ul").html(pageHtml);
            }else{
                alert(result.msg);
            }
        },"json");
    </script>

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

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

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

  /**
     * 搜索+分页
     *
     * @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并且不等于空字串.

上面调用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
把里边的数据显示出来

风一般的男子丶小靓仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
旅游项目第2天

旅游项目第2天一、首页黑马精选要求当用户打开首页时，要求Ajax请求从服务端得到“人气旅游”、“最新旅游”、“主题旅游”三类数据把这三类数据显示到首页的页面上分析1. 在index.html页面里发请求：确定是否要传参发送Ajax请求到Servlet：目的是想要三类数据 2. 在Servlet里：准备页面需要的数据接收参数：略封...
复制链接

扫一扫