JavaWeb黑马旅游网-学习笔记07【旅游线路查询】

灰太狼 2022-10-23 15:28 130阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JavaWeb黑马旅游网-学习笔记01【准备工作】][JavaWeb_-_01]
> 2.  [JavaWeb黑马旅游网-学习笔记02【注册功能】][JavaWeb_-_02]
> 3.  [JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】][JavaWeb_-_03]
> 4.  [JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】][JavaWeb_-_04_BaseServlet]
> 5.  [JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】][JavaWeb_-_05]
> 6.  [JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】][JavaWeb_-_06]
> 7.  [JavaWeb黑马旅游网-学习笔记07【旅游线路查询】][JavaWeb_-_07]
> 8.  [JavaWeb黑马旅游网-学习笔记08【旅游线路详情】][JavaWeb_-_08]
> 9.  [JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】][JavaWeb_-_09]
> 10. [JavaWeb黑马旅游网-学习笔记10【项目代码】][JavaWeb_-_10]

**目录**

40-旅游线路查询\_参数传递

header.html

route\_list.html

41-旅游线路查询\_后台代码

RouteDaoImpl.java

RouteServiceImpl.java

RouteServlet.java

42-旅游线路查询\_前台代码

route\_list.html

--------------------

# 40-旅游线路查询\_参数传递 #

> 点击搜索按钮，触发搜索事件。模糊查询。
> 
> ![20210302172323919.png][]

## header.html ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

## route\_list.html ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

# 41-旅游线路查询\_后台代码 #

## RouteDaoImpl.java ##

package cn.itcast.travel.dao.impl;
    
    import cn.itcast.travel.dao.RouteDao;
    import cn.itcast.travel.domain.Route;
    import cn.itcast.travel.util.JDBCUtils;
    import org.springframework.jdbc.core.BeanPropertyRowMapper;
    import org.springframework.jdbc.core.JdbcTemplate;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class RouteDaoImpl implements RouteDao {
        private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    
        @Override
        public int findTotalCount(int cid, String rname) {
            //String sql = "select count(*) from tab_route where cid = ?";
            //1.定义sql模板
            String sql = "select count(*) from tab_route where 1=1 ";
            StringBuilder sb = new StringBuilder(sql);
            List params = new ArrayList();//条件们
            //2.判断参数是否有值
            if (cid != 0) {
                sb.append(" and cid = ? ");
                params.add(cid);//添加？对应的值
            }
            if (rname != null && rname.length() > 0) {
                sb.append(" and rname like ? ");
                params.add("%" + rname + "%");
            }
            sql = sb.toString();
            return template.queryForObject(sql, Integer.class, params.toArray());
        }
    
        @Override
        public List<Route> findByPage(int cid, int start, int pageSize, String rname) {
            //String sql = "select * from tab_route where cid = ? and rname like ?  limit ? , ?";
            String sql = " select * from tab_route where 1 = 1 ";
            //1.定义sql模板
            StringBuilder sb = new StringBuilder(sql);
            List params = new ArrayList();//条件们
            //2.判断参数是否有值
            if (cid != 0) {
                sb.append(" and cid = ? ");
                params.add(cid);//添加？对应的值
            }
            if (rname != null && rname.length() > 0) {
                sb.append(" and rname like ? ");
                params.add("%" + rname + "%");
            }
            sb.append(" limit ? , ? ");//分页条件
            sql = sb.toString();
            params.add(start);
            params.add(pageSize);
            return template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), params.toArray());
        }
    
        @Override
        public Route findOne(int rid) {
            String sql = "select * from tab_route where rid = ?";
            return template.queryForObject(sql, new BeanPropertyRowMapper<Route>(Route.class), rid);
        }
    }

## RouteServiceImpl.java ##

package cn.itcast.travel.service.impl;
    
    import cn.itcast.travel.dao.FavoriteDao;
    import cn.itcast.travel.dao.RouteDao;
    import cn.itcast.travel.dao.RouteImgDao;
    import cn.itcast.travel.dao.SellerDao;
    import cn.itcast.travel.dao.impl.FavoriteDaoImpl;
    import cn.itcast.travel.dao.impl.RouteDaoImpl;
    import cn.itcast.travel.dao.impl.RouteImgDaoImpl;
    import cn.itcast.travel.dao.impl.SellerDaoImpl;
    import cn.itcast.travel.domain.PageBean;
    import cn.itcast.travel.domain.Route;
    import cn.itcast.travel.domain.RouteImg;
    import cn.itcast.travel.domain.Seller;
    import cn.itcast.travel.service.RouteService;
    
    import java.util.List;
    
    public class RouteServiceImpl implements RouteService {
        private RouteDao routeDao = new RouteDaoImpl();
    
        private RouteImgDao routeImgDao = new RouteImgDaoImpl();
    
        private SellerDao sellerDao = new SellerDaoImpl();
    
        private FavoriteDao favoriteDao = new FavoriteDaoImpl();
    
        @Override
        public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize, String rname) {
            //封装PageBean
            PageBean<Route> pb = new PageBean<Route>();
            //设置当前页码
            pb.setCurrentPage(currentPage);
            //设置每页显示条数
            pb.setPageSize(pageSize);
            //设置总记录数
            int totalCount = routeDao.findTotalCount(cid, rname);
            pb.setTotalCount(totalCount);
            //设置当前页显示的数据集合
            int start = (currentPage - 1) * pageSize;//开始的记录数
            List<Route> list = routeDao.findByPage(cid, start, pageSize, rname);
            pb.setList(list);
            //设置总页数 = 总记录数/每页显示条数
            int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;
            pb.setTotalPage(totalPage);
            return pb;
        }
    
        @Override
        public Route findOne(String rid) {
            //1.根据id去route表中查询route对象
            Route route = routeDao.findOne(Integer.parseInt(rid));
            //2.根据route的id 查询图片集合信息
            List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());
            //2.2将集合设置到route对象
            route.setRouteImgList(routeImgList);
            //3.根据route的sid（商家id）查询商家对象
            Seller seller = sellerDao.findById(route.getSid());
            route.setSeller(seller);
            //4. 查询收藏次数
            int count = favoriteDao.findCountByRid(route.getRid());
            route.setCount(count);
            return route;
        }
    }

## RouteServlet.java ##

package cn.itcast.travel.web.servlet;
    
    import cn.itcast.travel.domain.PageBean;
    import cn.itcast.travel.domain.Route;
    import cn.itcast.travel.domain.User;
    import cn.itcast.travel.service.FavoriteService;
    import cn.itcast.travel.service.RouteService;
    import cn.itcast.travel.service.impl.FavoriteServiceImpl;
    import cn.itcast.travel.service.impl.RouteServiceImpl;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet("/route/*")
    public class RouteServlet extends BaseServlet {
        private RouteService routeService = new RouteServiceImpl();
        private FavoriteService favoriteService = new FavoriteServiceImpl();
    
        /**
         * 分页查询
         *
         * @param request
         * @param response
         * @throws ServletException
         * @throws IOException
         */
        public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.接受参数
            String currentPageStr = request.getParameter("currentPage");
            String pageSizeStr = request.getParameter("pageSize");
            String cidStr = request.getParameter("cid");
            //接受rname 线路名称
            String rname = request.getParameter("rname");
            rname = new String(rname.getBytes("iso-8859-1"), "utf-8");
            int cid = 0;//类别id
            //2.处理参数
            if (cidStr != null && cidStr.length() > 0 && !"null".equals(cidStr)) {
                cid = Integer.parseInt(cidStr);
            }
            int currentPage = 0;//当前页码，如果不传递，则默认为第一页
            if (currentPageStr != null && currentPageStr.length() > 0) {
                currentPage = Integer.parseInt(currentPageStr);
            } else {
                currentPage = 1;
            }
            int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
            if (pageSizeStr != null && pageSizeStr.length() > 0) {
                pageSize = Integer.parseInt(pageSizeStr);
            } else {
                pageSize = 5;
            }
            //3. 调用service查询PageBean对象
            PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize, rname);
            //4. 将pageBean对象序列化为json，返回
            writeValue(pb, response);
        }
    
        /**
         * 根据id查询一个旅游线路的详细信息
         *
         * @param request
         * @param response
         * @throws ServletException
         * @throws IOException
         */
        public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.接收id
            String rid = request.getParameter("rid");
            //2.调用service查询route对象
            Route route = routeService.findOne(rid);
            //3.转为json写回客户端
            writeValue(route, response);
        }
    
        /**
         * 判断当前登录用户是否收藏过该线路
         *
         * @param request
         * @param response
         * @throws ServletException
         * @throws IOException
         */
        public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1. 获取线路id
            String rid = request.getParameter("rid");
            //2. 获取当前登录的用户 user
            User user = (User) request.getSession().getAttribute("user");
            int uid;//用户id
            if (user == null) {
                //用户尚未登录
                uid = 0;
            } else {
                //用户已经登录
                uid = user.getUid();
            }
            //3. 调用FavoriteService查询是否收藏
            boolean flag = favoriteService.isFavorite(rid, uid);
            //4. 写回客户端
            writeValue(flag, response);
        }
    
        /**
         * 添加收藏
         *
         * @param request
         * @param response
         * @throws ServletException
         * @throws IOException
         */
        public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1. 获取线路rid
            String rid = request.getParameter("rid");
            //2. 获取当前登录的用户
            User user = (User) request.getSession().getAttribute("user");
            int uid;//用户id
            if (user == null) {
                //用户尚未登录
                return;
            } else {
                //用户已经登录
                uid = user.getUid();
            }
            //3. 调用service添加
            favoriteService.add(rid, uid);
        }
    }

# 42-旅游线路查询\_前台代码 #

## route\_list.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>黑马旅游-搜索</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/search.css">
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/getParameter.js"></script>
        <script>
            $(function () {
                /*var search = location.search;
                //alert(search);//?id=5
                //切割字符串，拿到第二个值
                var cid = search.split("=")[1];*/
                //获取cid的参数值
                var cid = getParameter("cid");
                //获取rname的参数值
                var rname = getParameter("rname");
                //判断rname如果不为null或者""
                if (rname) {
                    //url解码
                    rname = window.decodeURIComponent(rname);
                }
                //当页码加载完成后，调用load方法，发送ajax请求加载数据
                load(cid, null, rname);
            });
    
            function load(cid, currentPage, rname) {
                //发送ajax请求，请求route/pageQuery,传递cid
                $.get("route/pageQuery", {cid: cid, currentPage: currentPage, rname: rname}, function (pb) {
                    //解析pagebean数据，展示到页面上
                    //1.分页工具条数据展示
                    //1.1 展示总页码和总记录数
                    $("#totalPage").html(pb.totalPage);
                    $("#totalCount").html(pb.totalCount);
                    /*
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
                     */
                    var lis = "";
                    var fristPage = '<li onclick="javascipt:load(' + cid + ',1,\'' + rname + '\')"><a href="javascript:void(0)">首页</a></li>';
                    //计算上一页的页码
                    var beforeNum = pb.currentPage - 1;
                    if (beforeNum <= 0) {
                        beforeNum = 1;
                    }
                    var beforePage = '<li  onclick="javascipt:load(' + cid + ',' + beforeNum + ',\'' + rname + '\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                    lis += fristPage;
                    lis += beforePage;
                    //1.2 展示分页页码
                    /*
                        1.一共展示10个页码，能够达到前5后4的效果
                        2.如果前边不够5个，后边补齐10个
                        3.如果后边不足4个，前边补齐10个
                    */
                    // 定义开始位置begin,结束位置 end
                    var begin; // 开始位置
                    var end; //  结束位置
                    //1.要显示10个页码
                    if (pb.totalPage < 10) {
                        //总页码不够10页
                        begin = 1;
                        end = pb.totalPage;
                    } else {
                        //总页码超过10页
                        begin = pb.currentPage - 5;
                        end = pb.currentPage + 4;
                        //2.如果前边不够5个，后边补齐10个
                        if (begin < 1) {
                            begin = 1;
                            end = begin + 9;
                        }
                        //3.如果后边不足4个，前边补齐10个
                        if (end > pb.totalPage) {
                            end = pb.totalPage;
                            begin = end - 9;
                        }
                    }
                    for (var i = begin; i <= end; i++) {
                        var li;
                        //判断当前页码是否等于i
                        if (pb.currentPage == i) {
                            li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ',\'' + rname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                        } else {
                            //创建页码的li
                            li = '<li onclick="javascipt:load(' + cid + ',' + i + ',\'' + rname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                        }
                        //拼接字符串
                        lis += li;
                    }
                    /*for (var i = 1; i <= pb.totalPage; i++) {
                        var li;
                        //判断当前页码是否等于i
                        if (pb.currentPage == i) {
    
                            li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
    
                        } else {
                            //创建页码的li
                            li = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                        }
                        //拼接字符串
                        lis += li;
                    }*/
                    var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                    var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
                    lis += nextPage;
                    lis += lastPage;
                    //将lis内容设置到 ul
                    $("#pageNum").html(lis);
                    /*
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>299</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                     */
                    //2.列表数据展示
                    var route_lis = "";
                    for (var i = 0; i < pb.list.length; i++) {
                        //获取{rid:1,rname:"xxx"}
                        var route = pb.list[i];
                        var li = '<li>\n' +
                            '                        <div class="img"><img src="' + route.rimage + '" style="width: 299px;"></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>';
                        route_lis += li;
                    }
                    $("#route").html(route_lis);
                    //定位到页面顶部
                    window.scrollTo(0, 0);
                });
            }
        </script>
    </head>
    <body>
    
    <div id="header"></div>
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img src="images/search.png" alt="">
                <p>黑马旅行><span>搜索结果</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>商品信息</span>
                        <span class="jg">价格</span>
                    </div>
                    <ul id="route">
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>299</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>899</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>999</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>99</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>199</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>899</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>1199</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                            <div class="text1">
                                <p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
                                <br/>
                                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>¥</span>
                                    <span>1589</span>
                                    <span>起</span>
                                </p>
                                <p><a href="route_detail.html">查看详情</a></p>
                            </div>
                        </li>
                    </ul>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span id="totalPage">12</span>页<span id="totalCount">132</span>条
                    </div>
                    <div class="pageNum">
                        <ul id="pageNum">
                            <li><a href="">首页</a></li>
                            <li class="threeword"><a href="#">上一页</a></li>
                            <li class="curPage"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                            <li class="threeword"><a href="javascript:;">末页</a></li>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>¥<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>¥<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>¥<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>¥<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>¥<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div id="footer"></div>
    
    <script type="text/javascript" src="js/include.js"></script>
    </body>
    </html>

> 加油~

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JavaWeb_-_01]: https://blog.csdn.net/weixin_44949135/article/details/114031199
[JavaWeb_-_02]: https://blog.csdn.net/weixin_44949135/article/details/114121075
[JavaWeb_-_03]: https://blog.csdn.net/weixin_44949135/article/details/114229387
[JavaWeb_-_04_BaseServlet]: https://blog.csdn.net/weixin_44949135/article/details/114259853
[JavaWeb_-_05]: https://blog.csdn.net/weixin_44949135/article/details/114272117
[JavaWeb_-_06]: https://blog.csdn.net/weixin_44949135/article/details/114283166
[JavaWeb_-_07]: https://blog.csdn.net/weixin_44949135/article/details/114288829
[JavaWeb_-_08]: https://blog.csdn.net/weixin_44949135/article/details/114291075
[JavaWeb_-_09]: https://blog.csdn.net/weixin_44949135/article/details/114293637
[JavaWeb_-_10]: https://blog.csdn.net/weixin_44949135/article/details/114305933
[20210302172323919.png]: /images/20221023/a54d4d45a36a41378aa78b80f360c6e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221023/0fc8784ca6fb4fb8b491b96ee9602ce7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/d431d9eaca5c4e0990d2570fe79ce942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/6e991f1a2dd54dbda2d153313e6cd29a.png