JavaWeb - 仿小米商城（5）：商品详情展示

举杯邀影

已于 2022-05-18 19:12:37 修改

阅读量1.2k

点赞数 1

文章标签： java json javascript

于 2022-05-17 19:12:59 首次发布

本文链接：https://blog.csdn.net/xia_tian69/article/details/124827873

版权

JavaWeb - 仿小米商城(5):商品详情展示

1 功能描述接上篇 JavaWeb - 仿小米商城（4）：商品列表形式本篇博客将分析和实现小米商城商品详情内容的查询和展示。如以下H5页面所示：

2 功能分析

2.1 功能逻辑抽象

详情展示功能在逻辑上并不复杂：在商品列表界面每当点击商品 <img>标签或商品名称时，都会向后端提交一个 GET 请求来获取本商品数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内容。

查询商品详情内的功能需要面向数据库中的另一张表 tb_goods，为了区分不同类型的数据查询业务以及代码的维护性和扩展性。在开发时基于三层架构体系建立对应的 GoodsServlet 类、GoodsService 接口和实现类、GoodsDao 接口和实现类

3 代码实现

3.1 前端

3.1.1 修改商品a链接地址

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HX8nL2Rf-1652785655545)(C:\Users\30361\AppData\Roaming\Typora\typora-user-images\image-20220516182715257.png)]$

3.1.2 编写goodsDetail.html代码

前端在加载<header>内容时便向后端提交异步请求。在商品详情页根据传递过来的id，发出请求向 Servlet获取本商品json数据

html 的<script>标签中定义以下 jQuery 代码：

<script type="text/javascript">
$(document).ready(function () {
   
var gid = getParams("gid");
$.get("goods.do?action=showGoodById", "gid=" + gid, function (result) {
   
if (result.flag === true) {
   
//设置标题上的链接信息
$("#tip").attr("href","getGoodsListByTypeId?typeid="+
result.data.typeid);
$("#tip").text(result.data.name);
//设置大图地址和悬停提示
$("#picImg"