JAVA实现查看详情功能_【JavaWeb】111:详情页面的实现
今天是刘小爱自学Java的第111天。
感谢你的观看,谢谢你。
话不多说,开始今天的学习:
我们浏览网页时看到的数据无外乎两种:静态数据和动态数据。
静态数据是将数据给写死了,需要修改时得去改对应的某个页面。
而动态数据是需要去数据库查询的,其数据是随着数据库中的数据变化而变化的。
对于我们后台开发来说,打交道最多的肯定就是动态数据了。所以有业务需求时,不妨先分析页面中的数据与数据库中的表关系。
流程分析清楚了,写代码也会事半功倍。
一、业务分析
我们先来看下需要实现的具体业务:
点击"查看详情",会出现和该页面相关的各种详细信息,具体如下图:
我们需要搞清楚三个问题:
我根据什么参数去数据库查询?
我怎么查询,查询哪些数据表?
我查询到的返回值是什么?
这三个问题搞清楚了,写代码也就很简单了。
右键“查看详细“,选择检查,可以在控制台上快速定位对应的页面。
我们发现它是跳转了route.detail.html页面,而route对应的就是数据库中的一张表。
在跳转页面时将rid这个参数拼接到路径中,向服务器发送请求时通过该参数查询数据。
那查询那些数据表呢?返回值又是什么?
该页面中的数据可以将其分为两大块:基本信息和图片信息,其对应的数据表一共有4张。
我们逐个分析:
①tab_route表
最核心的一张表,基本信息都在这张表里面。
事实上我们需要的还有tab_category表中的cname数据,以及tab_seller表中的数据。
一张tab_route表上查询的数据是不够的,不过该表中有两个字段:cid和sid。
对应着tab_category和tab_seller这两张表。
所以使用多表关联查询数据,其结果由多张表的数据组成,相当于是一张新的表。
这些查询数据在Java中对应的是什么?
就可以用一个Map集合来接受查询结果。
②tab_route_img表
根据rid来查询出对应的图片,这张表在Java中对应的也就是routeImg这个实体类。
因为一个rid可以查询出多行数据,所以返回的是一个集合。
这些数据在Java中对应的是什么?
也就是装有多个routeImg对象的集合。
业务分析完毕,就可以编写代码了,无外乎就是这么几个步骤:
前端发送请求,后台接受请求查询并处理数据再响应,前端接受响应数据并渲染。
对应RouteServlet中的queryRouteDetail()方法,请求参数为rid。
二、后台代码编写
1web层
说来说去无外乎就是核心三个步骤:
①获取请求数据
getParameter()方法:使用该方法获取具体某个请求数据。
getParameterMap()方法:获取多个请求数据时,就使用该方法。
②Service层处理数据
包括转换数据为json格式,都可以在Service层中去处理。
③响应数据
不用多说,固定写法,只不过有时候也会使用到重定向这些。
2Service层
前面也分析过,前端需要的数据有两块:基本信息和图片信息,都需要去数据库查询。
所以分别对应了两个查询方法:
①查询基本信息
在Java中数据表对应着一个Java实体类,但是此处查询是多表查询,数据由多张表组成。
所以这里使用Map集合接受数据。
②查询图片信息
对应tab_route_img这张表,在Java中查询结果对应RouteImg这个实体类。
③封装处理数据到map中
以前我们会创建一个Map封装数据。但现在因为①中有现成的Map,直接将②中的数据封装进①中即可。
④转换层json数据并返回
不用多说,固定写法。
3Dao层
①查询页面基本信息
既然返回值是Map,那么使用jdbcTemplate的queryForMap()方法即可。
其中这里需要主动处理一个异常。
②查询页面的图片信息
查询结果是一个装有RouteImg对象的集合,使用query()方法。
三、前端页面解析
1基本信息解析
前端解析无外乎就是:
取出响应数据,如果响应数据为集合,则遍历取出。如果不是,则使用键值对直接取出。
确定使用什么选择器,定位页面中对应的标签,再将数据动态添加进该标签。
①获取响应数据
如果信息很少,那自然可以很轻松地将后台响应数据的key值记下来。
但如果信息很多,记不住,可以在控制台上输出,再通过F12查看,一一对应了填写。
②使用选择器定位页面
如果一个页面很多行代码,我们想在页面中找到对应标签挺浪费时间的。
这里就可以使用鼠标右键,点击检查,在控制台上就可以快速定位对应的页面。
这时就可以确定用什么选择器定位该标签。
上图中大多数都可以用层级选择器来定位,如果不行,可以选择在页面上添加一个id,再通过id选择器也是可以的。
选择器确定之后,再使用html()方将数据动态添加就好了。
2图片渲染
因为服务器响应的图片数据是集合,所以需要先使用each()方法将其遍历,再动态拼接。
当然还有关于那个小图片动画效果的实现,这种代码我们后台人员是很难将其写出来的。
所以要么就是找前端人员帮忙写,要么就是网上找模板了,我这边就不说明了。
最后
谢谢你的观看。
如果可以的话,麻烦帮忙点个赞,谢谢你。
JAVA实现查看详情功能_【JavaWeb】111:详情页面的实现相关推荐
- java如何查看调用记录_查看Java记录
java如何查看调用记录 JEP 359 (可在JDK 14中用作预览功能)将记录引入Java. 记录是对普通数据聚合建模的简单方法. 一个简单的范围记录如下所示: record Range( int ...
- java 1.8新增功能_睡觉时:新增的Java 8新增功能
java 1.8新增功能 自Java 8推出以来,最有趣的功能是什么? Java 8最近庆祝了它的第一个生日,其主要版本已经在一年多以前了. 这当然值得庆祝. 自从最初的Java 8版本问世以来,已经 ...
- java如何实现登陆功能_利用javaweb实现登陆功能!
利用javaweb实现一个小的登陆界面!如图所示, :登陆结果如图所示 :如果不成功,结果如图所示 :话不多说,请看下面实现的代码,首先,我们做了一个html的login.html的登陆页面,其代码如 ...
- java实现续打功能_浅谈报表工具的打印方案
报表工具除了基本的绘制报表,完成数据呈现(也就是让终端用户能看到报表),打印也是报表的基本功能之一. 当前报表工具很多,可以按地域.开闭源等划分,包括有杰表.水晶.Style Report.birt. ...
- java实现团购功能_[Java教程]jquery组件团购倒计时功能
[Java教程]jquery组件团购倒计时功能 0 2014-05-12 12:00:04 本文网址:http://www.shaoqun.com/a/90954.html *特别声明:以上内容来自于 ...
- java 文档比较功能_[原创]java在线比较两个word文件
一.项目背景 开发文档管理系统或OA办公系统的时候,实现在线处理word文档的功能比较容易,但是也经常会有客户提出文档版本管理的需求,这就需要同时在线打开两个word文件,对比两个不同版本的word文 ...
- java程序实现剪刀石头布功能_基于JAVA的剪刀石头布游戏设计——Java课程设计报告_...
基于JAVA的剪刀石头布游戏设计 1剪刀石头布游戏设计思路阐述 在设计游戏时,我们要充分考虑到剪刀石头布游戏的特性,以及多种技术的实现: ⑴构造创建服务器端和客户端 ⑵创建输入输出流 ⑶编写服务器端处 ...
- java实现续打功能_银行存折套打续打功能--报表如何记录上次打印的位置
在实际项目中,经常会遇到打印的需求,而对于打印的特殊需求也越来越多,例如需要记录上次打印位置,当前打印时根据上次的打印位置继续打印的功能,像银行的存折的数据每次打印都不是用新的纸张,而是根据上次打印的 ...
- 手机的java软件有哪些功能_手机有哪些软件可以练习JAVA?
这里介绍一个手机软件-AIDE,相当于手机上的Java集成开发环境,可以直接编辑运行Java程序,除此之外还可以开发简单的安卓应用和手机小游戏,下面我简单介绍一下这个软件的安装和使用: 1.首先,下载 ...
最新文章
- 5.JasperReports学习笔记5-其它数据生成动态的报表(WEB)
- Adobe Bridge 2021中文版
- java 像素级碰撞检测,» 像素级碰撞检测类
- 一份完整的 MySQL 开发规范,进大厂必看!
- MongoDB学习day05--MongDB开启权限验证,创建用户
- 【Nacos】Nacos MySQL 配置后无法登录 愚蠢的问题
- cloudstack基础知识
- 深入分析SQL字符串限制长度漏洞
- 基金教父约翰博格的创业史
- SpringBoot调用腾讯云短信服务
- Android 8.0系统透明主题适配解决办法
- VMware安装macOS High Sierra V10.13.6完整版
- 【Java】多线程(以java webcam实现视频功能为例)
- 测绘工程本科生如何入门GNSS算法 - 引言
- 如何测试微信文件传输的这个功能,说出测试点,还有测试类型,以及测试用例
- Android 常用 Manager的总结
- 面向对象程序设计实践(C++)——二维向量
- Object-C iOS纯代码布局 一堆代码可以放这里!
- 项目服务端的创建(丛林战争项目)
- 米联客 ZYNQ/SOC精品教程 S01-CH04 VIVADO创建工程之流水灯
热门文章
- 分享5个免费的在线 SQL 数据库环境,简直太方便了!
- 每日一皮:史上最直观的单向循环链表,还不懂算我输!
- 微服务架构面试送送送命题!
- 【福利】赠书:Spring Cloud与Docker微服务架构实战(第2版)
- linux脚本或关系表达,Shell运算符:Shell算数运算符、关系运算符、布尔运算符、字符串运算符等...
- windows mysql 主从_mysql读写分离实战二-windows 上mysql主从数据库搭建及问题总结
- python查看环境路径
- VC env.Please set `DISTUTILS_USE_SDK=1`
- Windows 无法启动 NVIDIA Display Container LS 服务
- win10 远程登录 每次需要输密码