黑马旅游网编写练习(7)--某一旅游线路详情展示

黑马旅游网编写练习(7)–某一旅游线路详情展示

在分页展示的页面中，我们点击某一个旅游，想要查看详细信息，则点击了查看详情后，会跳转到该旅游路线对应的详细信息页面。接下来对该详细信息页面的查询与展示。
想要查看不同旅游线路对应相应的详细界面，我们首先观看一下数据库中两个数据表之间的关系。如下图所示：
旅游路线与旅游详情表格关系图

旅游页面对应的表格内容是tab_route；详细页面中的一些信息（标题，价格）也在这个表格中；详情页面中的图片位于tab_route_img表格中，该表格与tab_route表格通过rid关联；详情页面中的商家信息位于tab_seller表格中，该表格通过sid与tab_route关联。

分析
当点击了查看详情后，会跳转到route_detail.html页面。若要该页面的内容是那一条旅游路相对应的内容，则首先需要通过一个参数来联系这三张表格；通过对这三个表格关系的分析，我们只有两个选择，第一个选择是传递sid，第二个选择是传递rid；接下来我们详细分析这两个选择方案。
方案1：选择传递sid
若传递sid。则我们可以通过sid直接查询表格tab_seller，从而获取商家信息；但是我们不能通过sid获取tab_route_img表格的信息；所以需要通过sid获取rid，再通过rid获取tab_route_img表格信息；但是由于sid有很多个，而rid只有1个，也就是说在表格中，一个sid，可能获取到很多个rid；（一个商家可能有多条旅游路线），那么就不能准确地获取到该线路对应的图片了；所以传递sid参数不行。

方案2：选择传递rid
若传递rid。一个rid可以查询到该路线对应的多张图片；同样也可以查询到该线路对应的一个商家sid；根据该商家的sid可以查询到商家的所有信息。所以传递rid参数可以实现三张表格数据的对应关系。

参数rid传递的前端实现

首先在前端点击产看详情按钮处添加rid参数的传递；具体实现代码如下：

    // 在route_list.html拼接字符串处添加rid参数<p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +

接下来在route_detail.html中编写入口函数，接收rid参数，并向服务器发送Ajax请求：

    $(function () {// 获取rid参数var rid = getParameter("rid");// 向服务器发送Ajax请求；获取Route对象；并将对应数据展示到页面中。$.post("route/findOne",{rid:rid},function (route) {// 将响应的数据展示到页面中});});

接下来编写后端查询数据，并返回Route对象的代码。

后端查询旅游路线的详细信息

首先我们在与Route相关的Servlet，service，dao中添加方法；先来实现servlet的findOne方法，代码的主要内容如下：

    /*** 根据rid查询旅游路线的详细信息，响应Route对象给客户端* @param request* @param response* @throws IOException*/public void findOne(HttpServletRequest request, HttpServletResponse response) throws IOException {// 接收ridString rid_str = request.getParameter("rid");// 判断rid是否为空if(rid_str == null || rid_str.length() == 0){System.out.println("rid为空，请求错误");return;}int rid = Integer.parseInt(rid_str);// 调用service层方法获取Route对象Route route = service.findOne(rid);// 将Route对象序列化为json，并响应给客户端responseJson(response,route);}

接下来编写service层的代码，service层需要通过rid去查询数据库中的三个表，并将表中的信息封装到Route对象中；对于数据库中三张表的查询，需要分别用三个dao对象进行查询，保持良好的对应关系。每张表都是通过id查询表中的全部内容，只不过有些内容是很多行，需要用集合存储，而有些数据是单独的一行，只需要用一个对象存储即可。首先编写三张表的查询代码。

先为图片查询创建一个RouteImgDao对象，在其中编写查询方法，具体代码如下：

    // 定义jdbc连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 通过rid查询route_img表中该路线的图片信息* @param rid* @return*/@Overridepublic List<RouteImg> findRouteImgByRid(int rid) {// 定义存储旅游路线的详细图片集合List<RouteImg> list = null;// 定义sqlString sql = "select * from tab_route_img where rid = ? ";try {// 执行sqllist = template.query(sql, new BeanPropertyRowMapper<RouteImg>(RouteImg.class), rid);} catch (DataAccessException e) {//e.printStackTrace();  // 查询图片数据失败System.out.println("RouteImgdao查询图片数据出错！");}return list;}

然后为商家查询定义一个SellerDao对象，在其中编写查询方法，具体代码如下：

    // 定义jdbc连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 通过sid查询seller表中该路线的商家信息，返回Seller对象* @param sid* @return*/@Overridepublic Seller findSellerBySid(int sid) {// 定义存储旅游路线的商家对象Seller seller = null;// 定义sqlString sql = "select * from tab_seller where sid = ? ";try {// 执行sqlseller = template.queryForObject(sql, new BeanPropertyRowMapper<Seller>(Seller.class), sid);} catch (DataAccessException e) {//e.printStackTrace();  // 查询页面数据失败System.out.println("Sellerdao中通过sid查询商家的信息出错！");}return seller;}

最后在已经编写过的RouteDao中加入通过rid查询方法，方法具体代码如下：

    /*** 根据rid查询route表中该路线的信息，返回Route对象* @param rid* @return*/@Overridepublic Route findRouteByRid(int rid) {// 定义存储旅游路线的记录对象Route route = null;// 定义sqlString sql = "select * from tab_route where rid = ? ";try {// 执行sqlroute = template.queryForObject(sql,new BeanPropertyRowMapper<Route>(Route.class),rid);} catch (DataAccessException e) {//e.printStackTrace();  // 查询页面数据失败System.out.println("Routedao中通过rid查询route表中该路线的信息出错！");}return route;}

dao层编写完毕后，我们在service层调用相应的方法，完成三张表的查询，最后将查询的数据全部封装到Route对象中返回即可；该方法具体代码如下：

    /*** 查询旅游详细信息方法，将数据封装到Route对象中返回* @param rid* @return*/@Overridepublic Route findOne(int rid) {// 调用dao层RouteImgDao对象方法，通过rid查询route_img表中该路线的图片信息RouteImgDao routeImgDao = new RouteImgDaoImpl();List<RouteImg> routeImgList = routeImgDao.findRouteImgByRid(rid);// 调用dao层根据rid查询route表中该路线的信息Route route = dao.findRouteByRid(rid);// 获取route中商家标识sidint sid = route.getSid();// 调用dao层SellerDao对象方法，通过sid查询seller表中该路线的商家信息SellerDao sellerDao = new SellerDaoImpl();Seller seller = sellerDao.findSellerBySid(sid);// 封装Route对象route.setRouteImgList(routeImgList);route.setSeller(seller);return route;}

至此，后端的数据查询代码已经编写完毕，接下来需要完成的是前端将响应的json数据填充到相应的位置即可。

前端数据信息的展示

前端一些静态信息的展示不难，只要取出数据放到对应标签体中即可；然而页面中有一个图片的轮播；该方法是动态的，而在页面代码中，是在加载时执行该方法；而我们所编写的入口函数，是在页面加载完毕，最后才执行的，所以存在一个方法执行的先后问题，我们需要将图片轮播代码封装为一个函数，在我们的入口函数中进行一下调用；该方法我们将其封装为goImg方法，其具体内容如下：

    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;}});}

然后是在入口函数中将Ajax请求相应的数据进行展示，具体代码如下：

    $(function () {// 获取rid参数var rid = getParameter("rid");// 向服务器发送Ajax请求；获取Route对象；并将对应数据展示到页面中。$.post("route/findOne",{rid:rid},function (route) {// 将响应的数据展示到页面中// 展示标题和详细介绍$(".pros_title").html(route.rname);$(".hot").html(route.routeIntroduce);// 展示商家信息var seller = route.seller;$("#sname").html(seller.sname);$("#consphone").html(seller.consphone);$("#address").html(seller.address);// 展示价格$("#price").html(route.price);// 展示图片var routeImgList = route.routeImgList;// 展示大图$(".big_img").attr("src",routeImgList[0].bigPic);var dd_img = '<a class="up_img up_img_disable"></a>';// 遍历图片，只展示4张，多余的设为隐藏for (var i = 0; i < routeImgList.length; i++) {var img;if(i < 4){img = ' <a title="" class="little_img" data-bigpic="'+routeImgList[i].bigPic+'">\n' +'                        <img src="'+routeImgList[i].smallPic+'">\n' +'                    </a>';}else{img = '<a title="" class="little_img" data-bigpic="'+routeImgList[i].bigPic+'" style="display:none;">\n' +'                        <img src="'+routeImgList[i].smallPic+'">\n' +'                    </a>';}dd_img += img;}dd_img += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';$("#route_img").html(dd_img);//调用图片展示和切换goImg();});});

至此，某一个旅游线路的详细数据查询与展示页面已经实现了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/22468.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

世界上唯一7星级酒店-阿联酋迪拜的Burj Al Arab旅店

世界上唯一7星级酒店-阿联酋迪拜的Burj Al Arab旅店

全世界最贵的酒店&#xff0c;全世界曾经最高的酒店在迪拜。阿联酋迪拜的Burj Al-Arab酒店。 阿联酋迪拜的Burj Al-Arab酒店。 迪拜是阿拉伯联合酋长国的第二大城市。20世纪50年代&#xff0c;它还是阿拉伯湾一个朴素的海滨小镇&#xff0c;到了90年代以后&#xff0c;迪拜发生…
阅读更多...
三亚自由行八天七晚旅行攻略

三亚自由行八天七晚旅行攻略

**文中报价为两人费用。**所有总支出低于1W 建议&#xff1a; 1、 住宿不要在一个地方住&#xff0c;三亚湾、亚龙湾等各住几天。 2、 带防晒霜和晒后修复霜&#xff0c;还有手机防水袋。 3、 自带泳衣&#xff0c;三亚买比较贵。 4、 直飞三亚比较好&#xff0c;海口转比较费时…
阅读更多...
黑马旅游网-注册用户（二）

黑马旅游网-注册用户（二）

目录 一、注册用户-业务流程分析 1.页面效果 2.业务流程分析 二、注册用户-前端功能实现 修改register.html 1.校验用户名 2.校验密码 3.检验邮箱 4.使用ajax提交数据 5.完整代码参考 三、注册用户-后端功能实现 创建​​​​​​​RegisterUserServlet 创建UserServ…
阅读更多...
黑马旅游网-旅游分类线路分页显示（七）

黑马旅游网-旅游分类线路分页显示（七）

目录 一、先查旅游分类所有内容 二、查询分页数据 三、实现后端代码 RouteServlet RouteServiceImpl​​​​​​​ RouteService RouteDaoImpl RouteDao PageBean 四、分页与数据展示 修改route_list.html 修改header.html 五、测试 一、先查旅游分类所有内容 点…
阅读更多...
ChatGPT最有实力的竞争对手Claude也开放API申请了

ChatGPT最有实力的竞争对手Claude也开放API申请了

申请地址&#xff1a;https://www.anthropic.com/product 或者点击“阅读原文 ”直接申请
阅读更多...
ChatGPT与低代码平台谁更适合快速开发

ChatGPT与低代码平台谁更适合快速开发

近来&#xff0c;关于生成式AI技术即将颠覆各个行业的预测在网络上随处可见。虽然生成式AI技术在自然语言处理、文本生成等领域已经取得了令人瞩目的成果&#xff0c;但是在低代码平台开发领域&#xff0c;尤其是在企业内部应用方面&#xff0c;其影响并不明显。 低代码平台作…
阅读更多...
我曾做过陈士成，也做过孔乙己，还做过阿Q

我曾做过陈士成，也做过孔乙己，还做过阿Q

一、 我现在是陈士成&#xff0c;陈士成现在是我。为什么这么说呢&#xff1f; 那年那天&#xff0c;天刚微微亮&#xff0c;似乎还在打着哈欠。我和父亲去得很早&#xff0c;为的就是在“小升初的考试成绩榜单”前面占一个有利的位置。我不记得当时穿的厚还是不厚&#xff0c;…
阅读更多...
码农版孔乙己

码农版孔乙己

改变自己 也许有一天你能改变这个世界&#xff0c;但是请在改变世界之前&#xff0c;先让自己存活下来&#xff0c;看到一篇文章分享一下不知道你们能从中看出什么呢 听人家背地里谈论&#xff0c;孔乙己原来也读过研&#xff0c;但终于没有实习经历&#xff0c;又没关系内推&a…
阅读更多...
浅谈“孔乙己的长衫“是脱不下来还是难脱下？

浅谈“孔乙己的长衫“是脱不下来还是难脱下？

名人说&#xff1a;往者不可谏&#xff0c;来者犹可追。——《论语微子篇》 创作者&#xff1a;Code_流苏(CSDN) ★温馨提示&#xff1a;以下仅代表个人观点&#xff0c;不代表其它任何人看法。 目录 〇、缘由一、社会对于学历和职业之间的关系认知是怎样的&#xff1f;二、学历…
阅读更多...
Unity 蒙皮动画 SkinnedMesh 使用GPU Instance

Unity 蒙皮动画 SkinnedMesh 使用GPU Instance

GPU Instance合批技术是不支持 SkinnedMeshRender的&#xff0c;不过可以转换为Mesh Render以支持GPU Instance. 0x00 前言 我想很多开发游戏的小伙伴都希望自己的场景内能渲染越多物体越好&#xff0c;甚至是能同时渲染成千上万个有自己动作的游戏角色就更好了。 但不幸的是…
阅读更多...
Unity毛发系统TressFX Exporter

Unity毛发系统TressFX Exporter

Unity 数字人交流群&#xff1a;296041238 一&#xff1a;在Maya下的TressFX Exporter 插件安装步骤&#xff1a; 1. 下载Maya的TressFX Exporter插件 下载地址&#xff1a;TressFX Exporter 链接&#xff1a;https://github.com/Unity-China/cn.unity.hairfx.core/tree/m…
阅读更多...
vscode配置go开发环境，插件超时问题解决

vscode配置go开发环境，插件超时问题解决

今天想试下golang&#xff0c;用goland太贵所以打算配置vscode来试一试&#xff0c;但是发现许多插件安装超时&#xff0c;查阅资料说是配置一下环境变量开启代理就好&#xff0c; go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.io,direct 但是尝试后发现依然没…
阅读更多...
解决IDEA插件安装慢、超时、不成功问题

解决IDEA插件安装慢、超时、不成功问题

解决IDEA插件安装慢、超时、不成功问题 1.修改本地hosts文件&#xff0c;打开文件位置&#xff1a; Windows 系统 Hosts 文件路径&#xff1a;C:\Windows\System32\drivers\etc\hosts 用工具打开hosts文件 2.打开国内插件的节点IP地址 http://tool.chinaz.com/speedtest/pl…
阅读更多...
chatgpt赋能python：Python如何突破VIP限制

chatgpt赋能python：Python如何突破VIP限制

Python如何突破VIP限制 在这个数字内容时代&#xff0c;我们经常使用各种网站和应用程序来获取视频、音乐、软件等数字资源。但是&#xff0c;某些资源可能受到VIP限制&#xff0c;这意味着我们需要付费才能获得完整的访问权限。但是&#xff0c;如果你了解Python编程&#xf…
阅读更多...
武汉总部裁掉九成35岁以上员工？小米最新回应→

武汉总部裁掉九成35岁以上员工？小米最新回应→

上一篇&#xff1a;00后太猛了&#xff0c;正强势整顿职场 导读&#xff1a;小米方面表示&#xff0c;在社交媒体平台上陆续出现有关小米武汉总部35岁以上员工只保留10%的信息&#xff0c;经查皆为谣言。 5月14日&#xff0c;微博端有消息称小米武汉总部正式裁掉90% 35岁以上员…
阅读更多...
来上海一个月的记录、思考和感悟

来上海一个月的记录、思考和感悟

作者 | gongyouliu 编辑 | gongyouliu 从4月3号早上来上海&#xff0c;到今天差不多整整一个月了&#xff0c;也是自己正式从杭州离职创业&#xff08;我更愿意称之为自由职业者&#xff0c;毕竟我没有招聘全职员工&#xff0c;有两个朋友业余时间在帮我&#xff09;的第一个月…
阅读更多...
Prompt learning 教学[案例篇]：文生文案例设定汇总，你可以扮演任意角色进行专业分析

Prompt learning 教学[案例篇]：文生文案例设定汇总，你可以扮演任意角色进行专业分析

Prompt learning 教学[案例篇]&#xff1a;文生文案例设定汇总&#xff0c;你可以扮演任意角色进行专业分析 1.角色扮演 行为Prompt写法“牙医”““我想让你扮演一名牙医。我会向你提供有关寻找牙科服务&#xff08;例如 X 光、清洁和其他治疗&#xff09;的个人的详细信息。…
阅读更多...
桌面管理，Windows自带工具！很强！

桌面管理，Windows自带工具！很强！

这两天看到自己桌面上的快捷方式图标越来越多&#xff0c;真是折磨&#xff0c;有时候找个软件找半天&#xff08;悄悄bb一句&#xff0c;主要是挡住我的壁纸了&#xff09;&#xff0c;真的是很令人难受&#xff01;就想着整理一下桌面&#xff0c;如下是用windows自带的工具整…
阅读更多...
基于GMap.NET库实现的Windows桌面地图工具软件分享

基于GMap.NET库实现的Windows桌面地图工具软件分享

0 前言 由于工作中经常和地图、GPS坐标转换、GPS轨迹查看等内容相关&#xff0c;经常要借助一些在线网站和工具来查看地图和位置等&#xff0c;在一次偶然的机会中了解到一个GMap.NET开源的桌面地图库和基于GMap.NET实现的MapDownloader地图下载工具&#xff0c;于是也想实现一…
阅读更多...
小伙用AI“复活”奶奶引争议 科技边界在哪里(图)

小伙用AI“复活”奶奶引争议 科技边界在哪里(图)

小伙用AI“复活”奶奶引争议 科技边界在哪里(图) 上海00后用AI“复活”奶奶引发巨大争议&#xff1a;科技的边界在哪里。(图片来源&#xff1a;视频截图) 上海00后小伙用AI“复活”奶奶&#xff0c;还原其生前的音容笑貌&#xff0c;却引发巨大争议&#xff0c;人们在思考&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发