#x1f31f;推荐给大家我的专栏《电商项目实战》。

#x1f3af;#x1f3af;

一、商品详情

当我们点击商品的时候需要展示对应的商品详情首先在首页商品页写入后端的接口

controller代码

goodsService;RequestMapping(/ByIdSelect)public

String

goodsService.getById(vo.getGid());model.addAttribute(g,g);return

proDetail;}}

hrefcss/proList.css//headbody!------------------------------head------------------------------#include

common/top.html!-----------------address-------------------------------div

classaddressdiv

href${ctx}/page/flowerDer.html装饰摆件/aspan//spana

href${ctx}/page/proList.html干花花艺/aspan//span#--注意1${goods.goodsTitle!}只能判断goodsTitle属性是否为空不能判断goods对象是否为空2${(goods.goodsTitle)!}既可以判断goods对象是否为空也可以判断goodsTitle属性是否为空--a

href#

classon${(g.goodsTitle)!}/a/div/div!-----------------------Detail------------------------------div

classdetCondiv

data-srcimg/temp/proDet01_big.jpgimg

data-srcimg/temp/proDet02_big.jpgimg

data-srcimg/temp/proDet03_big.jpgimg

data-srcimg/temp/proDet04_big.jpg/div--/divdiv

classfr

classtitleh4${(g.goodsTitle)!}/h4p${(g.goodsName)!}/pspan${(g.goodsPrice)!}/span/divdiv

classsmallImg

data-srcimg/temp/proBig01.jpg/pp

classflimg

data-srcimg/temp/proBig02.jpg/pp

classflimg

data-srcimg/temp/proBig03.jpg/pp

classflimg

data-srcimg/temp/proBig04.jpg/p/divp数量nbsp;nbsp;库存span${(g.goodsStock)!}/span件/pdiv

classnum

data-gid${(g.gid)!}加入购物车/p/a/div/div/div/div/divdiv

classintroMsg

flp馨***呀/pp不好意思评价晚了产品很好价格比玻璃品便宜没有我担心的杂色发货快包装好全5分/pdiv

classclearfixpimg

srcimg/temp/eva05.jpg/p/divpspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp么***周/pp花瓶超级棒我看图以为是光面的收货发现是磨砂但感觉也超有质感很喜欢。

磨砂上面还有点纹路不过觉得挺自然的不影响美观。

包装也很好绝对不会磕碎碰坏好评/ppspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp馨***呀/pp不好意思评价晚了产品很好价格比玻璃品便宜没有我担心的杂色发货快包装好全5分/pdiv

classclearfixpimg

srcimg/temp/eva05.jpg/p/divpspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp么***周/pp花瓶超级棒我看图以为是光面的收货发现是磨砂但感觉也超有质感很喜欢。

磨砂上面还有点纹路不过觉得挺自然的不影响美观。

包装也很好绝对不会磕碎碰坏好评/ppspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp馨***呀/pp不好意思评价晚了产品很好价格比玻璃品便宜没有我担心的杂色发货快包装好全5分/pdiv

classclearfixpimg

srcimg/temp/eva05.jpg/p/divpspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp么***周/pp花瓶超级棒我看图以为是光面的收货发现是磨砂但感觉也超有质感很喜欢。

磨砂上面还有点纹路不过觉得挺自然的不影响美观。

包装也很好绝对不会磕碎碰坏好评/ppspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp馨***呀/pp不好意思评价晚了产品很好价格比玻璃品便宜没有我担心的杂色发货快包装好全5分/pdiv

classclearfixpimg

srcimg/temp/eva05.jpg/p/divpspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp么***周/pp花瓶超级棒我看图以为是光面的收货发现是磨砂但感觉也超有质感很喜欢。

磨砂上面还有点纹路不过觉得挺自然的不影响美观。

包装也很好绝对不会磕碎碰坏好评/ppspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp馨***呀/pp不好意思评价晚了产品很好价格比玻璃品便宜没有我担心的杂色发货快包装好全5分/pdiv

classclearfixpimg

srcimg/temp/eva05.jpg/p/divpspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/divdiv

classper

flp么***周/pp花瓶超级棒我看图以为是光面的收货发现是磨砂但感觉也超有质感很喜欢。

磨砂上面还有点纹路不过觉得挺自然的不影响美观。

包装也很好绝对不会磕碎碰坏好评/ppspan2016年12月27日08:31/spanspan颜色分类大中小三件套不含花/span/p/div/div/div/div/divdiv

classmsgR

srcimg/temp/see01.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href#dldtimg

srcimg/temp/see02.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href#dldtimg

srcimg/temp/see03.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href#dldtimg

srcimg/temp/see04.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/a/div/div/divdiv

classbottomdiv

srcimg/temp/next.png/span/divdiv

classimgCon

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like01.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like02.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like03.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like04.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

classlastdldtimg

srcimg/temp/like05.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/a/divdiva

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like01.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like02.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like03.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

href${ctx}/page/proDetail.htmldldtimg

srcimg/temp/like04.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/aa

classlastdldtimg

srcimg/temp/like05.jpg/dtdd【最家】复古文艺风玻璃花瓶/dddd193.20/dd/dl/a/div/div/div/div/div!--返回顶部--#include

srcjs/jquery.SuperSlide.2.1.1.js

typetext/javascript

typetext/javascriptjQuery(.bottom).slide({titCell:.hd

ul,mainCell:.bd

.likeList,autoPage:true,autoPlay:false,effect:leftLoop,autoPlay:true,vis:1});/script/body

/html效果展示

商品详情页面引入了一个cart.js,里面是有关该所有的点击事件方法

$(function(){/**************数量加减***************/$(.num

num

parseInt($(this).siblings(span).text());if(num1){$(this).attr(disabled,disabled);}else{num--;$(this).siblings(span).text(num);//获取除了货币符号以外的数字var

price

$(this).parents(.number).prev().text().substring(1);//单价和数量相乘并保留两位小数$(this).parents(.th).find(.sAll).text((num*price).toFixed(2));jisuan();zg();}});$(.num

num

parseInt($(this).siblings(span).text());if(num5){confirm(限购5件);}else{num;$(this).siblings(span).text(num);var

price

$(this).parents(.number).prev().text().substring(1);$(this).parents(.th).find(.sAll).text((num*price).toFixed(2));jisuan();zg();}});//计算总价function

jisuan(){var

input[typecheckbox]:checked).length;if(len0){$(#all).text(parseFloat(0).toFixed(2));}else{$(.th

input[typecheckbox]:checked).each(function(){//获取小计里的数值var

sAll

$(this).parents(.pro).siblings(.sAll).text().substring(1);//累加allparseFloat(sAll);//赋值$(#all).text(all.toFixed(2));})}}//计算总共几件商品function

zg(){var

input[typecheckbox]:checked).parents(.th).find(.num

span);var

index.length;if(len0){$(#sl).text(0);}else{index.each(function(){zslparseInt($(this).text());$(#sl).text(zsl);})}if($(#sl).text()0){$(.count).css(background,#c10000);}else{$(.count).css(background,#8e8e8e);}}/*****************商品全选***********************/$(input[typecheckbox]).on(click,function(){var

$(this).hasClass(checkAll);if(sf){if(sc){$(input[typecheckbox]).each(function(){

this.checkedtrue;

zg();jisuan();}else{$(this).checkedtrue;

var

$(input[typecheckbox]:checked).length;var

len1

$(input).length-1;if(lenlen1){$(input[typecheckbox]).each(function(){

this.checkedtrue;

}zg();jisuan();}}else{if(sc){$(input[typecheckbox]).each(function(){

this.checkedfalse;

zg();jisuan();}else{$(this).checkedfalse;var

len

input[typecheckbox]:checked).length;var

len1

$(input).length-1;if(lenlen1){$(.checkAll).attr(checked,false);}zg();jisuan();}}});/****************************proDetail

加入购物车*******************************/$(.btns

.cart).click(function(){//获取购物车上的商品IDlet

gidthis.dataset.gid;//获取商品数量let

num$(div

span.fl).text;//发起请求$.post(/cart/add,{gid},resp{},json)});//删除购物车商品$(.del).click(function(){//单个删除if($(this).parent().parent().hasClass(th)){$(.mask).show();$(.tipDel).show();index

$(this).parents(.th).index()-1;$(.cer).click(function(){$(.mask).hide();$(.tipDel).hide();$(.th).eq(index).remove();$(.cer).off(click);if($(.th).length0){$(.table

.goOn).show();}})}else{//选中多个一起删除if($(.th

input[typecheckbox]:checked).length0){$(.mask).show();$(.pleaseC).show();}else{$(.mask).show();$(.tipDel).show();$(.cer).click(function(){$(.th

input[typecheckbox]:checked).each(function(j){index

$(this).parents(.th).index()-1;$(.th).eq(index).remove();if($(.th).length0){$(.table

.goOn).show();}})$(.mask).hide();$(.tipDel).hide();zg();jisuan();})}}})$(.cancel).click(function(){$(.mask).hide();$(.tipDel).hide();})//改变商品规格

$(.pro

$(this).addClass(on).append(html).parents(.th).siblings(.th).find(.pro

dd).removeClass(on).find(.edit).remove();

$(.proDets).show();

$(#editindex).prev().text(result);

$(.proDets).hide();

$(#editindex).parent(dd).removeClass(on).find(.edit).remove();

});

我们的用户购物车数据放在数据库太耗费数据库的资源了我们可以将数据放入redis进行一个时限判断如果一周内没有进行数据访问就加入数据库并清除缓存。

IRedisService

{HashOperationsString,String,GoodsVo

operationsredisTemplate.opsForHash();String

bigKeyConstants.REDIS_CART_PREFIX

user.getId();//根据用户Id查询所有的购物车信息ListGoodsVo

values

operations.values(bigKey);return

values;}

CookieUtils.getCookieValue(request,

user

redisService.loadUser(token);//获取用户购物车商品信息ListGoodsVo

goodsVos

redisService.loadCart(user);//根据商品Id查询对应商品ListInteger

ids

goodsVos.stream().map(GoodsVo::getGid).collect(Collectors.toList());ListGoods

goods

g.getGid())).findFirst().orElse(null);if

(gv

{//将该商品g的属性赋值给GoodsVosBeanUtils.copyProperties(g,

gv);}}System.out.println(goodsVos);model.addAttribute(item,

goodsVos);return

因为我们redis中只有商品的id所以需要将所有商品的id拿到数据库中查询将该商品的图片信息标题等查询出来利用BeanUtils将属性加入到goodsVos中方便前端页面显示

三、优化细节部分

!--------------------------------------cart---------------------

div

mt!-----------------logo-------------------!--div

classlogoh1

srcimg/temp/cartTop01.png/h1/div--!-----------------site-------------------div

classsitep

classfr继续购物gt;/a/p/div!-----------------table-------------------div

classtable

classtrdiv商品/divdiv单价/divdiv数量/divdiv小计/divdiv操作/div/div#--有数据就显示--#if

item??#list

classflp${(g.goodsName)!}/pp颜色分类:/pp${(g.goodsType)!}/p/dd/dl/a/divdiv

classprice${(g.goodsPrice)!}/divdiv

classnumberp

href#2删除/a/div/div/#list#elsediv

classgoOn空空如也~a

idsl0/small件商品/spanspan合计:nbsp;small

/div

!----------------mask-------------------

div

!-------------------mask内容-------------------

div

data-srcimg/temp/proDet01_big.jpgimg

data-srcimg/temp/proDet02_big.jpgimg

data-srcimg/temp/proDet03_big.jpgimg

data-srcimg/temp/proDet04_big.jpg/div/divdiv

classfldiv

data-srcimg/temp/proBig01.jpg/pp

classflimg

data-srcimg/temp/proBig02.jpg/pp

classflimg

data-srcimg/temp/proBig03.jpg/pp

classflimg

data-srcimg/temp/proBig04.jpg/p/div/divdiv

classchangeBtn

首先我们不止需要清除浏览器上的cookie还需要清除redis中保存的用户信息所以在Redis的service层定义一个删除的方法

清除用户数据void

{//根据token删除对应的键redisTemplate.delete(Constants.REDIS_USER_PREFIX

token);}

CookieUtils.getCookieValue(request,

userToken);redisService.logout(token);//清除cookieCookieUtils.deleteCookie(request,response,userToken);CookieUtils.deleteCookie(request,response,nickname);return

redirect:/;}

清除浏览器cookie的同时也清除redis中的数据避免资源浪费

3.参数解析器

通过这几天的编写不知道大家发现没有我们很多方法中都有获取用户的token信息可以说这段代码是重复的我们可以将其优化掉

UserArgumentResolver

supportsParameter(MethodParameter

parameter)

parameter.getGenericParameterType()

Object

resolveArgument(MethodParameter

parameter,

webRequest.getNativeRequest();//从请求中获取cookieString

token

CookieUtils.getCookieValue(request,

userToken);User

redisService.loadUser(token);return

user;}

这个解析器的作用是判断控制器方法的参数是否为User类型如果是则会在处理请求之前执行resolveArgument方法。

在resolveArgument方法中它会通过HttpServletRequest获取请求中的cookie然后调用redisService的loadUser方法根据cookie中的token加载对应的用户信息。

最后返回解析得到的User对象作为控制器方法的参数。

WebConfig

userArgumentResolver;Overridepublic

void

addArgumentResolvers(ListHandlerMethodArgumentResolver

resolvers)

{resolvers.add(userArgumentResolver);}}