版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
电商第六天:
商品详情:https://item.jd.com/
商品详情demo
https://item.jd.com/7437762.html
https://item.jd.com/100004772462.html
https://item.jd.com/100001009384.html
https://item.jd.com/100002380994.html
https://item.jd.com/xxx.html {静态页面?NO }
xxx.html 不是静态页面!
xxx.html 是什么?
xxx 是skuId
.html 请求路径
xxx.html 相当于一个请求路径也就是@RequsestMapping("xxx.html")
// 利用springMVC 中的知识!
@RequsestMapping("{skuId}.html")
public String item(@Pathvariable String skuId){
// 如何获取skuId
// 数据保存
// 根据skuId 查询商品的信息 并保存,给前台页面使用!
return "item";
}
难点分析:
1. 商品的名称,价格,重量的显示 skuInfo
2. 商品图片 skuImage
3. 销售属性
3.1 显示并锁定销售属性值
3.2 点击不同的销售属性值的时候,实现商品切换功能
技术摸板:Thymeleaf
Thymeleaf 简介
比Jsp: .jsp 文件组成{html + jstl ,el}
借助tomcat 来运行
在页面渲染的时候,在后台必须保存数据才能保证页面正常运行
Thymeleaf : 直接运行
比Freemarker:.ftl {el}
商品详情开发
https://item.jd.com/
1. 创建一个项目 gmall-item-web 后台模块gmall-manage-service
修改pom.xml application.properties
2. 导入静态资源,页面
3. 功能开发
bean,mapper,service,service.impl, controller
4. 页面渲染
启动gmall-manage-servie ,gmall-item-web
5. 安装redis 为了明天使用!商品详情优化!
5.1 导入安装包并解压
5.2 创建一个安装目录
mkdir -p /usr/local/redis
5.3 编译
make
5.4 安装
make install PREFIX=/usr/local/redis
5.5 修改配置文件
cp /root/redis-3.2.8/redis.conf /usr/local/redis/bin/
61 bind 改成 *
128 no -- yes
6. 商品详情销售属性
6.1 显示并锁定销售属性值
只显示销售属性,销售属性值
sql:
select sa.id ,sa.spu_id, sa.sale_attr_name,sa.sale_attr_id,
sv.id sale_attr_value_id,
sv.sale_attr_value_name
from spu_sale_attr sa inner join spu_sale_attr_value sv
on sa.spu_id=sv.spu_id and sa.sale_attr_id=sv.sale_attr_id
where sa.spu_id=58
锁定销售属性值
skuId : 表示一个商品 在skuSaleAttrValue 表中有skuId,并且有销售属性销售属性值!
sql:
select sa.id ,sa.spu_id, sa.sale_attr_name,sa.sale_attr_id,
sv.id sale_attr_value_id,
sv.sale_attr_value_name,
if(ssav.sku_id is NULL, 0, 1) ischecked
from spu_sale_attr sa inner join spu_sale_attr_value sv
on sa.spu_id=sv.spu_id and sa.sale_attr_id=sv.sale_attr_id
LEFT JOIN sku_sale_attr_value ssav ON
ssav.sale_attr_id = sa.sale_attr_id AND
ssav.sale_attr_value_id = sv.id AND
ssav.sku_id = 33
where sa.spu_id=58;
功能开发:
bean,mapper,service,service.impl, controller
6.2 点击不同的销售属性值的时候,实现商品切换功能
功能分析:
页面的ajax 请求:根据页面选择的两个销售属性值 得到一个唯一的skuId!
根据skuId 从新请求 {skuId.html}
如何得不到唯一的skuId ! 商品详情页面不会发生变化!
功能开发:
如何确定两个销售属性值是否能够得到唯一的skuId!
在这个表中sku_sale_attr_value
需要在后台拼接一个json 字符串 {"114|117":"35" } 该json 字符串 可以先组成一个map 集合
key = 114|117
value = 35
map.put(key,value);
最后将map 转换为json 字符串!
sql:
SELECT * FROM sku_sale_attr_value ssav , sku_info si WHERE ssav.sku_id = si.id AND si.spu_id = 58;
bean,mapper,service,service.impl, controller
6.2.1 在后台存储json 字符串!
6.2.2 将后台的json 字符串作为隐藏域保存到前台页面中,