文章目录

• 1、详情功能---界面展示
• 2、详情功能--后台代码
• • RouteServiceTest
  • 扩展Route实体类
  • Seller.java
  • RouteImg.java
  • RouteService
  • 查找路线数据RouteDao.java
  • 查分类CategoryDao.java
  • 查询商家数据SellerDao.java
  • 查找图片RouteImgDao.java
  • RouteDetailServlet
  • Mybatis中扫描映射文件
• 3、详情功能--前台代码
• • route_detail.jsp页面

1、详情功能—界面展示

2、详情功能–后台代码

RouteServiceTest

@Test
    public void test03() throws JsonProcessingException { 
        //业务，根据 路线的rid查找 路线的数据，商家的数据，分类的数据，收藏的数据
        RouteService routeService = new RouteService();
        int rid = 1;
        Route route = routeService.findRouteById(rid);
        System.out.println(route);
    }

需要返回的route对象内部包含 路线的数据，商家的数据，分类的数据，图片的数据

扩展Route实体类

    //分类数据
    private Category category;
    //商家数据
    private Seller  seller;
    //图片数据
    private List<RouteImg> imgList;

Seller.java

public class Seller { 
    private int sid;//商家id
    private String sname;//商家名称
    private String consphone;//商家电话
    private String address;//商家地址
    }

RouteImg.java

public class RouteImg { 
    private int rgid;//商品图片id
    private int rid;//旅游商品id
    private String bigPic;//详情商品大图
    private String smallPic;//详情商品小图
    }

RouteService

(1)通过分析，数据来自四个表，所以可以考虑2，或者3查询方案
(2)使用Mybatis其实核心 是开发者的sql能力。

# rid =1
# 路线表 tab_route
# 商家表 tab_seller
# 图片表 tab_route_img
# 分类表 tab_category
select * from tab_route r where r.rid =1 ;

select * 
from tab_route r,tab_seller s
where r.rid =1 
and r.sid=s.sid ;

# 方式1：内连接查询的话，因为出现重复的数据，放弃
select * 
from tab_route r,tab_seller s,tab_route_img i
where r.rid =1 
and r.sid=s.sid 
and r.rid = i.rid;

# 方式2：内连接查询的话，必须一对一 
# 一个路线属于一个商家, 一个路线属于一个分类
# 一个路线可以包含多个图片

select * 
from tab_route r,tab_seller s,tab_category c
where r.rid =1 
and r.sid=s.sid 
and r.cid = c.cid;

# 还差图片数据
select * from  tab_route_img i where i.rid=1;

#方式3： 详情数据来自四个表，拆成四个查询语句

select * from tab_route r where r.rid = 1; #路线
select * from tab_seller s where s.sid = 1; #商家数据
select * from  tab_route_img i where i.rid=1;#图片数据
select * from  tab_category c where c.cid =1;#分类数据 

    public Route findRouteById(int rid) { 
        //数据来自四个表，执行四个查找方法
        //路线数据
        RouteDao routeDao = MySessionUtils2.getMapper(RouteDao.class);
        Route route =routeDao.findOneByRid(rid);

        //分类数据
        CategoryDao categoryDao = MySessionUtils2.getMapper(CategoryDao.class);
        Category category = categoryDao.findOneByCid(route.getCid());
        //设置给route对象
        route.setCategory(category);

        //商家数据
        SellerDao sellerDao = MySessionUtils2.getMapper(SellerDao.class);
        Seller seller = sellerDao.findOneBySid(route.getSid());
        //设置给route对象
        route.setSeller(seller);

        //图片数据 XxxxDao
        RouteImgDao routeImgDao = MySessionUtils2.getMapper(RouteImgDao.class);
        List<RouteImg> list= routeImgDao.findAllImgByRid(route.getRid());
        route.setImgList(list);
        return route;
    }

查找路线数据RouteDao.java

 //select * from tab_route r where r.rid = 1;
    Route findOneByRid(int rid);

<!--    //select * from tab_route r where r.rid = 1;-->
<!--    Route findOneByRid(int rid);-->
   <select id="findOneByRid" parameterType="int" resultType="route">
       select * from tab_route r where r.rid =#{ rid};
   </select>

查分类CategoryDao.java

  //select * from tab_category c where c.cid =1;
    Category findOneByCid(int cid);

<!--    //select * from tab_category c where c.cid =1;-->
<!--    Category findOneByCid(int cid);-->
    <select id="findOneByCid" parameterType="int" resultType="category">
        select * from  tab_category c where c.cid =#{ cid}
    </select>

查询商家数据SellerDao.java

public interface SellerDao { 
     //select * from tab_seller s where s.sid = 1;
     Seller findOneBySid(int sid) ;
}

<!--    //select * from tab_seller s where s.sid = 1;-->
<!--    Seller findOneBySid(int sid) ;-->
    <select id="findOneBySid" parameterType="int" resultType="seller">
        select * from tab_seller s where s.sid =#{ sid};
    </select>

查找图片RouteImgDao.java

public interface RouteImgDao { 
    //select * from tab_route_img i where i.rid=1;
    List<RouteImg> findAllImgByRid(int rid);
}

RouteDetailServlet

@WebServlet("/routedetail/*")
public class RouteDetailServlet extends BaseServlet { 

    // /routedetail/find
    public  void find(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        //1 接收请求，获取参数
        //业务，根据 路线的rid查找 路线的数据，商家的数据，分类的数据，图片的数据
        String ridStr = request.getParameter("rid");
        int rid = 1; //"1"
        try { 
            rid = Integer.parseInt(ridStr);
        } catch (NumberFormatException e) {  //Ctrl+Alt+T
            e.printStackTrace();
        }
        //2 处理参数
        RouteService routeService = new RouteService();

        Route route = routeService.findRouteById(rid);

        //3 响应浏览器
        String json = toJson(200,route);
        response.getWriter().println(json);

    }

}

Mybatis中扫描映射文件

	<mappers>
       <mapper resource="com/wzx/dao/UserDao.xml"/>
        <mapper resource="com/wzx/dao/CategoryDao.xml"/>
        <mapper resource="com/wzx/dao/RouteDao.xml"/>
        <mapper resource="com/wzx/dao/SellerDao.xml"/>
     </mappers>

3、详情功能–前台代码

route_detail.jsp页面

查看详情连接添加rid

<p><a href="route_detail.jsp?rid='+route.rid+'">查看详情</a></p>\n

route_detail.jsp页面
将 route_detail.html转 route_detail.jsp
获取上个页面传过来的rid
使用rid发送请求获取json
先显示详情页面的所有文字
再使用循环拼接详情页的图片

<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">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/getParameter.js"></script>
    <script type="text/javascript">
        $(function () { 
            ///route_detail.jsp?rid=3
            var rid = getParameter("rid")
            // 当前页面需要取得 由【查看详情】传过来的rid
            $.get('routedetail/find?rid=' + rid, function (data) { 
                // 发请求 给 routedetail/find?rid=3 可以获取rid对应的json数据
                if (200 == data.code) { 
                    //console.log(data.data)
                    var route = data.data;
                    // 并json数据的值 赋给当前的标签 html() $(id)
                    $("#category").html(route.category.cname)
                    $("#rname").html(route.rname)
                    $("#title").html(route.rname)
                    $("#introduce").html(route.routeIntroduce)
                    $("#sname").html('商家名称:' + route.seller.sname)
                    $("#consphone").html('商家电话' + route.seller.consphone)
                    $("#address").html('地址' + route.seller.address)
                    $("#price").html(route.price)
                    //图片
                    //左侧一张大图
                    $('#big_img').attr('src', route.rimage)
                    //右侧多张小图 前四张可见，第五张起，需要点击才可见
                    var alist = '';
                    //向上的箭头
                    alist += '<a class="up_img up_img_disable"></a>'

                    var list = route.imgList
                    for (var i = 0; i < list.length; i++) { 
                        var routeImg = list[i]
                        //
                        var a = ''
                        if(i<4){  //前四张
                            a = '<a title="" class="little_img" data-bigpic="'+routeImg.bigPic+'" >\n' +
                                ' <img src="'+routeImg.smallPic+'">\n' +
                                ' </a>'
                        }else{ 
                            a = '<a title="" class="little_img" data-bigpic="'+routeImg.bigPic+'" style="display:none;" >\n' +
                                ' <img src="'+routeImg.smallPic+'">\n' +
                                ' </a>'
                        }

                        alist+=a //将多个a标签拼接
                    }

                    //向下的箭头
                    alist += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>'


                    $('#small_imgs').html(alist)

                    //给小图添加事件
                    clickImgs()
                }

            }, "json")

        })
    </script>
</head>