19.4、Javaweb案例_旅游路线名称查询&旅游路线的详情展示

企业开发 2023-01-29 11:10:37 阅读次数: 0

旅游路线名称查询

查询参数的传递

涉及工具

https://mp.csdn.net/mp_blog/creation/success/128760817

在header.html中

<!-- 头部 start -->
<script src="js/getParameter.js"></script>
<script>
    const span_username = "#span_username";
    const login = "#login";
    const category = "#category";
    const exit = "#exit";
    const search_button = "#search-button";
    const search_input = "#search_input"
    $(()=>{
        $.get("user/findOne",{},function (data){
           if(data != null){
               let msg = "欢迎回来:"+data.name;
               $(span_username).html(msg);
               $(login).css("display","none");
           }else{
               $(exit).css("display","none");
           }

        });
        //查询分类数据
        $.get("category/findAll",{},function (data){
            //[{cid:1,cname:国内游},{},{}]
            let lis='<li class="nav-active"><a href="index.html">首页</a></li>'
            //遍历数组,拼接字符串(<li>)
            for(i in data){
                let li = '<li><a href="route_list.html?cid='+data[i]['cid']+'">'+data[i]['cname']+'</a></li>'
                lis+=li;
            }
            //拼接收藏排行榜的li,<li><a href="favoriterank.html">收藏排行榜</a></li>
            lis+='<li><a href="favoriterank.html">收藏排行榜</a></li>'
            //将lis字符串，设置到ul的html内容中
            $(category).html(lis);
        });
        //给搜索按钮绑定单击事件，获取搜索输入框的内容
        $(search_button).click(function (){
            //线路名称
            let rname = $(search_input).val();
            let cid = getParameter("cid");
            // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx
            location.href = "http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;
        })

    })
</script>
    <header id="header">
        <div class="top_banner">
            <img src="images/top_banner.jpg" alt="">
        </div>
        <div class="shortcut">
            <!-- 未登录状态  -->
            <div class="login_out" id="login">
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            </div>
            <!-- 登录状态  -->
            <div class="login">
            	
                <span id="span_username">您尚未登陆</span>
                <a href="myfavorite.html" class="collection">我的收藏</a>
                <a id = "exit" href="javascript:location.href ='user/exit';">退出</a>
            </div>
        </div>
        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="/"><img src="images/logo.jpg" alt=""></a>
                </div>
                <div class="search">
                    <input name="" type="text" placeholder="请输入路线名称" id = "search_input" class="search_input" autocomplete="off">
                    <a href="javascript:;" id = "search-button" class="search-button">搜索</a>
                </div>
                <div class="hottel">
                    <div class="hot_pic">
                        <img src="images/hot_tel.jpg" alt="">
                    </div>
                    <div class="hot_tel">
                        <p class="hot_time">客服热线(9:00-6:00)</p>
                        <p class="hot_num">400-618-9090</p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部 end -->
     <!-- 首页导航 -->
    <div class="navitem">
        <ul id = "category" class="nav">
        </ul>
    </div>

在route_list.html

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>
        const totalPage = "#totalPage";
        const totalCount = "#totalCount";
        const pageNum = "#pageNum";
        const route = "#route"
        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);
                console.log('totoaPage,totalCount::'+pb.totoaPage+','+pb.totalCount)

                let fristPage = '<li onclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)")>首页</a></li>';
                //计算上一页的页码
                let beforeNum = pb.currentPage-1;
                if(beforeNum <= 0){
                    beforeNum = 1;
                };
                let beforePage = '<li onclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

                if(currentPage <=1 || currentPage ==null){
                    fristPage='';
                    beforePage = '';
                };
                let lis = fristPage + beforePage;
                //1.2 展示分页页码
                /*
                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个
                */
                // 定义开始位置begin,结束位置 end
                let begin;// 开始位置
                let 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 = pb.totalPage -9;
                    };

                };

                for(let i =begin;i<=end;i++){
                    //判断当前页码是否等于i
                    let cls  =pb.currentPage == i ? "class=\"curPage\"" : "";
                    //创建页码的li,//拼接字符串
                    lis += '<li '+cls+' onclick = "javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                };
                let lastNum = pb.currentPage+1;
                if(lastNum >= pb.totalPages){
                    lastNum =pb.totalPages;
                };
                let lastPage = '<li onclick="javascript:load('+cid+','+lastNum+',\''+rname+'\')" class="threeword"><a href="javascript:;">下一页</a></li>';
                let nextPage = ' <li onclick="javascript:load('+cid+','+pb.totalPage+',\''+rname+'\')" class="threeword"><a href="javascript:;">末页</a></li>';
                if(currentPage>=pb.totalPage){
                    lastPage = '';
                    nextPage = '';
                };
                lis += lastPage + nextPage;
                $(pageNum).html(lis);
                let route_lis = "";
                for(let i = 0;i < pb.list.length;i++){
                    let route = pb.list[i];
                    route_lis += '<li>\n' +
                        '                            <div class="img"><img style="width: 299px" 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>&yen;</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).html(route_lis);
                window.scrollTo(0,0);

            })
        };
        $(()=>{
            //alert(search);//?id=5
            // 切割字符串，拿到第二个值
            // let cid = location.search.split("=")[1];
            //获取cid的参数值
            let cid = getParameter("cid");
            //获取rname的参数值
            let rname = getParameter("rname");
                if (rname){
                //url解码
                rname = window.decodeURIComponent(rname)
            }
            //当页码加载完成后，调用load方法，发送ajax请求加载数据
            load(cid,null,rname);
        });

    </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>&yen;</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>&yen;</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>&yen;</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>&yen;</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>&yen;</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>&yen;</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>&yen;</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>&yen;</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><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>&yen;<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>&yen;<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>&yen;<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>&yen;<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>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--引入头部-->
    <div id="footer"></div>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>

</html>

修改后台代码

具体类

Route

package cn.itcast.travel.domain;

import java.io.Serializable;
import java.util.List;

/**
 * 旅游线路商品实体类
 */
public class Route implements Serializable {

    private int rid;//线路id，必输
    private String rname;//线路名称，必输
    private double price;//价格，必输
    private String routeIntroduce;//线路介绍
    private String rflag;   //是否上架，必输，0代表没有上架，1代表是上架
    private String rdate;   //上架时间
    private String isThemeTour;//是否主题旅游，必输，0代表不是，1代表是
    private int count;//收藏数量
    private int cid;//所属分类，必输
    private String rimage;//缩略图
    private int sid;//所属商家
    private String sourceId;//抓取数据的来源id

    private Category category;//所属分类
    private Seller seller;//所属商家
    private List<RouteImg> routeImgList;//商品详情图片列表



    /**
     * 无参构造方法
     */
    public Route(){}

    /**
     * 有参构造方法
     * @param rid
     * @param rname
     * @param price
     * @param routeIntroduce
     * @param rflag
     * @param rdate
     * @param isThemeTour
     * @param count
     * @param cid
     * @param rimage
     * @param sid
     * @param sourceId
     */
    public Route(int rid, String rname, double price, String routeIntroduce, String rflag, String rdate, String isThemeTour, int count, int cid, String rimage, int sid, String sourceId) {
        this.rid = rid;
        this.rname = rname;
        this.price = price;
        this.routeIntroduce = routeIntroduce;
        this.rflag = rflag;
        this.rdate = rdate;
        this.isThemeTour = isThemeTour;
        this.count = count;
        this.cid = cid;
        this.rimage = rimage;
        this.sid = sid;
        this.sourceId = sourceId;
    }

    public List<RouteImg> getRouteImgList() {
        return routeImgList;
    }

    public void setRouteImgList(List<RouteImg> routeImgList) {
        this.routeImgList = routeImgList;
    }

    public Category getCategory() {
        return category;
    }

    public void setCategory(Category category) {
        this.category = category;
    }

    public Seller getSeller() {
        return seller;
    }

    public void setSeller(Seller seller) {
        this.seller = seller;
    }

    public String getSourceId() {
        return sourceId;
    }

    public void setSourceId(String sourceId) {
        this.sourceId = sourceId;
    }

    public int getRid() {
        return rid;
    }

    public void setRid(int rid) {
        this.rid = rid;
    }

    public String getRname() {
        return rname;
    }

    public void setRname(String rname) {
        this.rname = rname;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getRouteIntroduce() {
        return routeIntroduce;
    }

    public void setRouteIntroduce(String routeIntroduce) {
        this.routeIntroduce = routeIntroduce;
    }

    public String getRflag() {
        return rflag;
    }

    public void setRflag(String rflag) {
        this.rflag = rflag;
    }

    public String getRdate() {
        return rdate;
    }

    public void setRdate(String rdate) {
        this.rdate = rdate;
    }

    public String getIsThemeTour() {
        return isThemeTour;
    }

    public void setIsThemeTour(String isThemeTour) {
        this.isThemeTour = isThemeTour;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }

    public String getRimage() {
        return rimage;
    }

    public void setRimage(String rimage) {
        this.rimage = rimage;
    }

    public int getSid() {
        return sid;
    }

    public void setSid(int sid) {
        this.sid = sid;
    }
}

Seller

package cn.itcast.travel.domain;

import java.io.Serializable;

/**
 * 商家实体类
 */
public class Seller implements Serializable {
    private int sid;//商家id
    private String sname;//商家名称
    private String consphone;//商家电话
    private String address;//商家地址

    /**
     * 无参构造方法
     */
    public Seller(){}

    /**
     * 构造方法
     * @param sid
     * @param sname
     * @param consphone
     * @param address
     */
    public Seller(int sid, String sname, String consphone, String address) {
        this.sid = sid;
        this.sname = sname;
        this.consphone = consphone;
        this.address = address;
    }

    public int getSid() {
        return sid;
    }

    public void setSid(int sid) {
        this.sid = sid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getConsphone() {
        return consphone;
    }

    public void setConsphone(String consphone) {
        this.consphone = consphone;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

RouteImg

package cn.itcast.travel.domain;

import java.io.Serializable;

/**
 * 旅游线路图片实体类
 */
public class RouteImg implements Serializable {
    private int rgid;//商品图片id
    private int rid;//旅游商品id
    private String bigPic;//详情商品大图
    private String smallPic;//详情商品小图

    /**
     * 无参构造方法
     */
    public RouteImg() {
    }

    /**
     * 有参构造方法
     * @param rgid
     * @param rid
     * @param bigPic
     * @param smallPic
     */
    public RouteImg(int rgid, int rid, String bigPic, String smallPic) {
        this.rgid = rgid;
        this.rid = rid;
        this.bigPic = bigPic;
        this.smallPic = smallPic;
    }

    public int getRgid() {
        return rgid;
    }

    public void setRgid(int rgid) {
        this.rgid = rgid;
    }

    public int getRid() {
        return rid;
    }

    public void setRid(int rid) {
        this.rid = rid;
    }

    public String getBigPic() {
        return bigPic;
    }

    public void setBigPic(String bigPic) {
        this.bigPic = bigPic;
    }

    public String getSmallPic() {
        return smallPic;
    }

    public void setSmallPic(String smallPic) {
        this.smallPic = smallPic;
    }
}

Servlet

package cn.itcast.travel.web.servlet;

import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;
import cn.itcast.travel.service.impl.RouteServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "RouteServlet", value = "/route/*")
public class RouteServlet extends BaseServlet {
    private RouteService routeService = new RouteServiceImpl();

    /**
     * 分页查询
     * @param request
     * @param response
     * @throws IOException
     */
    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");
        //接受rname 线路名称
        String rname = request.getParameter("rname");
        //解决tomcat7版本request的中文乱码问题
        rname = new String(rname.getBytes("iso-8859-1"),"utf-8");

        //2.处理参数
        int cid = triadic(cidStr,0);//类别id
        int currentPage = triadic(currentPageStr,1);//当前页码，如果不传递，则默认为第一页
        int pageSize = triadic(pageSizeStr,5);//每页显示条数，如果不传递，默认每页显示5条记录

        //3. 调用service查询PageBean对象
        System.out.println("cid"+cid+"currentPage"+currentPage+"pageSize"+pageSize+"rname"+rname);
        PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname);

        //4. 将pageBean对象序列化为json，返回
        writeValue(pb, response);
    }
    public void findOne(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1.接收id
        String rid = request.getParameter("rid");
        //2.调用service查询route对象
        Route route = routeService.findOne(rid);
        //3.转为json写回客户端
        writeValue(route, response);
    }
}

Service

package cn.itcast.travel.service.impl;

import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.dao.RouteImgDao;
import cn.itcast.travel.dao.SellerDao;
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();
    @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;
        pb.setTotalPage(totalCount % pageSize == 0 ? totalPage :totalPage + 1);
        return pb;
    }

    @Override
    public Route findOne(String rid) {
        //1.根据id去route表中查询route对象
        System.out.println("来了");
        Route route =  routeDao.findOne(Integer.parseInt(rid));
        System.out.println("route::"+route.getRid());

        //2.根据route的id 查询图片集合信息
        List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());
        //2.2将集合设置到route对象
        route.setRouteImgList(routeImgList);
        System.out.println("route::"+route.getRouteImgList().get(0).getRgid());

        //3.根据route的sid（商家id）查询商家对象
        Seller seller = sellerDao.findByid(route.getSid());
        route.setSeller(seller);
        System.out.println("route::"+route.getSeller().getSname());
        return route;
    }
}

Dao

RouteDao

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 = ?";
        return template.queryForObject(sql,Integer.class,cid);*/

        String sql = " select count(*) 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 && !"null".equals(rname)){
            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 =? limit ? , ? ";
//        return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);


        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  && !"null".equals(rname)){
            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);
    }
}

旅游线路的详情展示

分析

代码实现

 后台代码

Servlet

同上

 Service

同上

SellerDao

RouterDao

同上

RouteImg

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 = ?";
        return template.queryForObject(sql,Integer.class,cid);*/

        String sql = " select count(*) 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 && !"null".equals(rname)){
            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 =? limit ? , ? ";
//        return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);


        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  && !"null".equals(rname)){
            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);
    }
}

SellerDao

package cn.itcast.travel.dao.impl;

import cn.itcast.travel.dao.SellerDao;
import cn.itcast.travel.domain.Seller;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

public class SellerDaoImpl implements SellerDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public Seller findByid(int id) {
        String sql = "select * from tab_seller where sid = ? ";
        return template.queryForObject(sql , new BeanPropertyRowMapper<Seller>(Seller.class),id);
    }
}

route-detail.css

/*商品详情页*/
.search_input {
    height: 40px;
}

.bread_box {
	width: 1188px;
    padding: 10px;
    margin: 0 auto;
}
.bread_box a{
	color: #000;
}
.prosum_box {
    width: 1188px;
    border: solid 1px #ddd;
    background: #fff;
    overflow: hidden;
    margin: 0 auto 20px;
}

.prosum_box .prosum_left {
    margin: 20px;
    overflow: hidden;
    width: 684px;
    float: left;
}

.prosum_box .prosum_left .big_img {
    width: 570px;
    height: 340px;
}

.prosum_box .prosum_left .little_img img {
    width: 110px;
    height: 70px;
    opacity: 0.6;
}

.prosum_box .prosum_left .little_img img:hover {
    opacity: 1.0;
}

.prosum_box .prosum_left .cur_img img {
    opacity: 1.0;
}

.prosum_box .prosum_left .up_img,
.prosum_box .prosum_left .down_img {
    width: 110px;
    height: 20px;
    background: #333;
}

.prosum_box .prosum_left .up_img {
    background: url("../images/arrows.jpg") no-repeat;
    background-position: 0px -20px;
}

.prosum_box .prosum_left .up_img_disable {
    background-position: 0px 0px;
}

.prosum_box .prosum_left .down_img {
    background: url("../images/arrows.jpg") no-repeat;
    background-position: 0px -60px;
}

.prosum_box .prosum_left .down_img_disable {
    background-position: 0px -40px;
}

.prosum_box .prosum_left dt {
    float: left;
    margin-right: 4px;
}

.prosum_box .prosum_left dd {
    float: left;
}

.prosum_box .prosum_left dd a {
    display: block;
    margin-bottom: 4px;
}

.prosum_box .prosum_right {
    float: left;
    width: 462px;
    margin: 20px 0px 20px 0px;
}

.prosum_box .prosum_right .pros_title {
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
    margin-bottom: 5px;
}

.hot {
	font-size: 14px;
	color: #ff4848;
}

.pros_other {
	background: #eee;
	font-size: 14px;
	padding: 10px 0 10px 10px;
	margin-top: 10px;
}
.pros_other p{
	line-height: 24px;
}
.pros_price {
	background: #eee;
	margin-top: 40px;
	padding: 10px 0 20px 10px;
}
.pros_price  .price strong{
	color: #ff4848;
	font-size: 26px;
	font-weight: normal;
}
.collect {
	margin-top: 30px;
}
.collect a {
	font-size: 14px;
    background: #ff4848;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
}
.collect .already{
	background: #ccc;
}
.collect a i{
	font-size: 16px;
    vertical-align: top;
    margin-right: 3px;
}
.you_need_konw {
	width: 1188px;
    margin: 60px auto;
}
.you_need_konw span {
	font-size: 16px;
	border-bottom: 3px solid #ffc900;
}
.notice {
	border: solid 1px #ddd;
	padding: 35px 48px;
}
.notice p {
	line-height: 24px;
	font-size: 16px;
	margin-bottom: 20px;
}

common.css

/*
* @Author: WCM
* @Date:   2018-01-27 15:13:13
* @Last Modified by:   WCM
* @Last Modified time: 2018-01-27 15:17:57
*/

/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;  
    box-sizing: border-box;
    font-family: '微软雅黑';
}

fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;  /*外面环绕线*/
}

ul, ol {
    list-style: none;
}

input {
    padding-top: 0;
    padding-bottom: 0;
      /*字体的自动识别*/
}
select, input {
    vertical-align: middle;
}

/*输入字居中显示*/
select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;  /*不可以随意拖动*/
}
img{
    display: block;
}
table {
    border-collapse: collapse; /*合并外连线*/
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
}
a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

/*头部*/

#header {
    width: 100%;
    overflow: hidden;
}

.top_banner {
    width: 1500px;
    height: 128px;
    margin: 0 auto;
}

.shortcut {
    width: 1200px;
    height: 50px;
}

.login_out, .login {  
    height: 50px;
    line-height: 36px;
    float: right;
}

.login {
    width: 205px;
    font-size: 12px;
}
.login a{
    font-size: 12px;
    color: #a1a1a1;
}
.login .collection {
    color: #ff7676;
    margin: 0 16px 0 10px;
}
.login_out a {
    color: #000;
    font-size: 12px;
    margin: 0 10px;
}

.header_wrap {
    widows: 100%;
    overflow: hidden;
}

.topbar {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}

.logo,
.search,
.hottel {
    float: left;
}

.logo a {
    display: inline-block;
}

.search {
    margin: 15px 140px 0 115px;
}

.search_input {
    float: left;
    width: 400px;
    height: 36px;
    border: 2px solid #ffc900;
    padding-left: 10px;
}

.search_input:focus {
    outline: none;
}

.search-button {
    float: left;
    width: 90px;
    height: 40px;
    background: #ffc900;
    text-align: center;
    line-height: 40px;
    color: #000;
    font-size: 18px;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size: 12px;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 12px;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 12px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 12x;
}

.hot_pic,
.hot_tel {
    float: left;
}

.hot_pic {
    margin-right: 18px;
}

.hot_time {
    color: #3d3d3f;
    font-size: 14px;
}

.hot_num {
    color: #ffc900;
    font-size: 18px;
}

.navitem {
    width: 100%;
    height: 40px;
    background: #ffc900;
}

.nav {
    width: 1200px;
    margin: 20px auto 0;
}

.nav li {
    float: left;
    margin-left: 30px;
}

.nav li a {
    color: #3d3d3f;
    font-size: 14px;
    display: inline-block;
}

.nav>li>a:focus, .nav>li>a:hover{
    background: none;
}

.nav .nav-active {
    background-color: #ffd800;
}

.nav>li>a {   
    padding: 10px 15px;
}

/*公共页尾*/


/*页尾*/
.fl {
    float: left;
}
#footer {
    width: 100%;
    background: #3d3d3f;
}

.why_select {    
    overflow: hidden;
    margin: 0 auto;
    border-bottom: solid 1px #666;
    padding: 10px 85px;
    font-family: '微软雅黑';
}

.why_select dl {
    float: left;
    margin-bottom: 0;
}

.why_select dd {
    margin: 4px 100px 0 60px;
}

.why_select h1 {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin: 0;
}

.why_select h1.title {
    line-height: 50px;
    padding-right: 25px;
}

.why_select h2 {
    font-size: 12px;
    color: #8d8d8e;
    line-height: 26px;
}

.why_select .icon {
    width: 50px;
    height: 50px;
}



.company {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: #ffc900;
    color: #3d3d3f;
    text-align: center;
    font-size: 12px;
}


/*分页样式*/
.pageNum {
    width: 100%;
    overflow: hidden;
}


.pageNum ul li {
  width: 40px;
  height: 40px;
  float: left;
  border: 1px solid #eee;
  margin-right: 10px;
  text-align: center;
  line-height: 40px;
}
.pageNum ul li.curPage {
    background-color: #ffc900;
}
.pageNum ul li a {
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 14px;
}
.pageNum ul .threeword {
  width: 75px;
}

前台代码

Route_detail.html中加载后

  1. 获取rid
  2. 发送ajax请求，获取route对象
  3. 解析对象的数据
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
</head>

<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 详情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="/">首页</a>
            <span> &gt;</span>
            <a href="#">国内游</a><span> &gt;</span>
            <a href="#">全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt>
                    <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                </dt>
                <dd id="dd">
                    <a class="up_img up_img_disable"></a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">
                    </a>
                    <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">
                    </a>
                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
                </dd>
            </dl>
            <div class="prosum_right">
               <p class="pros_title" id="rname">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
                <p class="hot" id=routeIntRoduce>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                <div class="pros_other">
                    <p>经营商家  ：<span id="sname">国旅</span></p>
                    <p>咨询电话 : <span id="consphone">400-618-9090</span></p>
                    <p>地址 ： <span id="address">程序员</span></p>
                </div>
                <div class="pros_price">
                    <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p>
                    <p class="collect">
                        <a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>

                        <a  class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>
                        <span>已收藏100次</span>
                    </p>
                </div>        
            </div>
        </div>
        <div class="you_need_konw">
            <span>旅游须知</span>
            <div class="notice">
                <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>

                <p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>

                <p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>

                <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>

                <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
                <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>

                <p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>

                <p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>

                <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>

                <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
            </div>           
        </div>
    </div>
    <!-- 详情 end -->

    <!--引入头部-->
    <div id="footer"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
    $(document).ready(function() {
        goImg();
        //自动播放
        // var timer = setInterval("auto_play()", 5000);
    });

    function goImg() {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function() {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click',function(){
            var num = $('.little_img').length;
            if((nextindex + 1) <= num){
                $('.little_img:eq('+picindex+')').hide();
                $('.little_img:eq('+nextindex+')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click',function(){
            var num = $('.little_img').length;
            if(picindex > 0){
                $('.little_img:eq('+(nextindex-1)+')').hide();
                $('.little_img:eq('+(picindex-1)+')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }
    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }

    const rname = "#rname";
    const routeIntroduce = "#routeIntroduce";
    const price = "#price";
    const sname= "#sname";
    const consphone = "#consphone";
    const address = "#address";
    const dd= "#dd";
    $(()=>{
        //1.获取rid
        let rid = getParameter("rid");
        //2.发送请求请求 route/findOne
        $.get("route/findOne",{rid:rid},function(route){
            $(rname).html(route.rname);
            $(routeIntroduce).html(route.routeIntroduce);
            $(price).html(route.price);
            $(sname).html(route.sname);
            $(consphone).html(route.consphone);
            $(address).html(route.address);

            //图片展示
            let ddstr = '<a class="up_img up_img_disable"></a>';
            //遍历routeImgList
            for(let i=0;i<route.routeImgList.length ;i++){
                let imgDisplay = i >= 4 ? "display:none" : "display:block";
                ddstr +=' <a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="'+imgDisplay+'">\n         ' +
                    '<img src="'+route.routeImgList[i].smallPic+'">\n         </a>'
            }
            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';
            $(dd).html(ddstr);
            //图片展示和切换代码调用
            goImg();
        });
    });
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq1092881420/article/details/128760762
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022