旅游网小案例:旅游线路的详情展示

分析

• 效果分析
  根据页码数据进行分析,找到对应数据的表,初步完成dao层的分析.
• 流程分析
  进行流程分析,对业务的流程进行粗略分析,掌握功能的整体执行流程.

进行代码编写

• js

		//线路详细获取
        //获取rid
        var rid = getParameter("rid");
        //发送请求route/findOne
        $.post("route/findOne", {rid: rid}, function (route) {
            //填充数据到html
            $(".rname").html(route.rname);
            $("#routeIntroduce").html(route.routeIntroduce);
            $("#price").html("￥" + route.price);
            $("#sname").html(route.seller.sname);
            $("#consphone").html(route.seller.consphone);
            $("#address").html(route.seller.address);
            //设置收藏次数
            $("#favoriteCount").html("已收藏" + route.count + "次");
            //图片展示进行拼接
            var ddstr = '<a class="up_img up_img_disable"></a>';
            var imgList = route.routeImgList;
            $("#dt").html('<img alt="" class="big_img"\n' +
                '                     src="' + imgList[0].bigPic + '">');
            for (var i = 0; i < imgList.length; i++) {
                var astr;
                if (i >= 4) {
                    astr = '<a title="" class="little_img"\n' +
                        '                   data-bigpic="' + imgList[i].bigPic + '" style="display:none;">\n' +
                        '                    <img src="' + imgList[i].smallPic + '">\n' +
                        '                </a>';
                } else {
                    astr = '<a title="" class="little_img"\n' +
                        '                   data-bigpic="' + imgList[i].bigPic + '">\n' +
                        '                    <img src="' + imgList[i].smallPic + '">\n' +
                        '                </a>';
                }
                ddstr += astr;
            }
            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';
            //进行切换样式的加载
            goImg();
        });
        //进行收藏状态获取和刷新
        flush();

对html进行处理,将真实数据填充到页面.

• Servlet

/**
     * 根据id查询一个旅游线路的详细信息
     *
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收id
        String rid = request.getParameter("rid");
        //调用service方法
        Route route = routeService.findOne(rid);
        //回写
        writeValue(route, response);
    }

进行数据的获取和回写,并调用service方法

• Service

 public Route findOne(String rid) {
        if (rid != null && !"".equals(rid)) {
            //根据rid查询route
            Route route = routeDao.findOne(rid);
            //根据route的rid查询图片
            List<RouteImg> routeImgs = routeImgDao.findByRid(route.getRid());
            //注入routeImgList数据
            route.setRouteImgList(routeImgs);
            //根据route的sid查询商家信息
            Seller seller = sellerDao.findById(route.getSid());
            //注入seller数据
            route.setSeller(seller);
            return route;
        }
        return null;
    }

将数据进行获取,并填充到Route类中.

根据表结构分析,查询条件,得到相应是数据,根据rid查询tab_route表,得到单个线路route信息,根据route表中sid查询tab_selle得到对应商家信息,根据rid在tab_route_img查询,得到的图片路径.(事实证明满足第三范式和根据表关系建立主外键,能够更科学的设计表)

• Dao

@Override
    public Route findOne(String rid) {
        String sql = "select * from tab_route where rid= ?";
        return template.queryForObject(sql, new BeanPropertyRowMapper<>(Route.class), rid);
    }

@Override
    public List<RouteImg> findByRid(int rid) {
        String sql = "select * from tab_route_img where rid=? ";
        return template.query(sql, new BeanPropertyRowMapper<>(RouteImg.class), rid);
    }

@Override
    public Seller findById(int sid) {
        String sql = "select * from tab_seller where sid=?";
        return template.queryForObject(sql, new BeanPropertyRowMapper<>(Seller.class), sid);
    }

由于存在于不同的类中,所以分开放,都是简单的查询方法.