day08(商品詳情頁SKU聯(lián)動(dòng)+FreeMarker模版頁面靜態(tài)化)

1、模擬京東（8）課程回顧：1、前臺(tái)系統(tǒng)的品牌展示品牌的修改或者添加時(shí)。將品牌信息保存到redis中品牌從redis獲?。╤ash：idname）redis內(nèi)存數(shù)據(jù)庫（支持的最大的閥值：8Gkey-value：使用較少的key會(huì)定期清理、使用較少的key持久化到磁盤上。）windowredis啟動(dòng)redis服務(wù)數(shù)據(jù)沒有了（沒有持久化到磁盤上）開發(fā)環(huán)境：安裝Linux上。redis單線程listfifo2、條件是篩選品牌篩選：需要判斷是否已選了價(jià)格價(jià)格篩選：需要判斷是否已選了品牌service實(shí)現(xiàn)類處理：條件信息封裝SolrQuery對(duì)象中。1、brandIdsetFQ（“brandId:”+bar

2、ndId）2、price切割length=2100TO200else1600TO*展示已選條件map（key,value）fn:length（map）將已選過的條件隱藏empty3、ActiveMQ介紹和使用概念：消息隊(duì)列（消息中間件MOM）。Apache的產(chǎn)品。使用最廣泛（穩(wěn)定）。通信方式：異步通信。JMS：Javamessageservicejms支持消息中間件供應(yīng)商（ActiveMQ）,spring支持jms。ActiveMQjmsspring整合。jms發(fā)送消息方式：1、pointtopoint（點(diǎn)對(duì)點(diǎn)）生產(chǎn)者生產(chǎn)消息（queue1）消費(fèi)者（queue1）監(jiān)聽容器取出消息（將消息消費(fèi)處

3、理業(yè)務(wù)）2、p/s（消息的訂閱與發(fā)布）：生產(chǎn)者生產(chǎn)消息-T可以被多個(gè)消費(fèi)者消費(fèi)名詞1、jsmtemplate：發(fā)送消息到容器中2、生產(chǎn)者：生產(chǎn)消息3、消費(fèi)者：需要監(jiān)聽mq容器。如果有自己的消息需要進(jìn)行消費(fèi)。ActiveMQ工作的原理本項(xiàng)目的使用場景p2p1、商品上架isShow2、service-product:生產(chǎn)者。將id發(fā)送mq3、將商品保存到solr中交給service-solr服務(wù)（消費(fèi)者）去執(zhí)行。課程計(jì)劃：1、去商品詳情頁（單品頁）2、sku的聯(lián)動(dòng)效果3、freemarker的介紹4、商品詳情頁的頁面靜態(tài)化1去商品詳情頁1.1分析1、點(diǎn)擊圖片時(shí)，根據(jù)商品的id查詢數(shù)據(jù)2、查詢的數(shù)據(jù)

4、：product（商品信息）3、查詢的數(shù)據(jù)：sku（庫存信息）1.2修改jsp頁面的請(qǐng)求路徑on.click=open(/product/detail?id=$product.idr)ns區(qū)仙函申心亦丄則Jrredihml先lolr.nH-；.db.prapHn贋燉弓.pEpertiH上、x2BrrHrM.ri.375lR/bwnnjcTs-*pgfcJiiac-ofifi-seirtce-cmsrdfloa亡curvewrappern1.3搭建cms工程1.3.1copy一些配置文件.pHnanlJLn:-jipDrl-ir:旳HjjaefSCvLIxispafT-hr-7|WtwifffJ

5、rl-pfKlHlFSfijrlin|ir豈baifiari-viVMM-bufvrpknrCD.-Li=-jls和*亡氓卻/1柏辭pOi.*1?rc/mflini!avx.irc/mah/4耳mnfig廉a(chǎn)pplkad占Bpplir-Btiun1.3.2編輯web.xmlxmlns:xsi=fittp:/wiknk1-.w-J.org/L/Ul/XTilL3e/iejns-mstanaenxsi:schsmaLccat：ion=n，httpj/jHava.suncoisi/Dnal/ns/ja17aee?rrp:/Jaw-svn.jrraI/nb/J*vsee/weh-app2弓-兗占!-一

6、ing一ggixf丄件一一*CQntBKtConfigL匚ationcJ_asspath:spring-configjmlDEgspringframework.web.context-ContesctIioaderLisrener|1.4編寫service接口、實(shí)現(xiàn)類1.4.1編寫CmsService接口定義的方法：1、根據(jù)商品的id查詢商品信息2、根據(jù)商品的id查詢庫存列表publicinterfaceCmsServicey1*3Title:selectProductByIdDescription:根據(jù)主鍵査詢商品信息paramid3工巳七nrn3returnProductthrowspub

7、licProductselectEroductByldLongid)3Ti七丄點(diǎn)：selectSkuListByProductIdSDesaription:根據(jù)商品id查詢庫存列表|param,productidreturn3returnListthrowspublicListselectSkuListByProductld(LongproductHcJgBSdubbo全旨揶羽捐-A1.4.2編寫cms的實(shí)現(xiàn)類EielIo-L3_oFrodLuu七bfd1ec=tFrodviutByIdl匚口npid.)fFx-ociu.ct：|pjtodlu.c：七peodluLC：t-M-siipjpex

8、-b?d#E?xJ_nn.is匸氏口Vt匚日jzsturnprodlu-ctEon立旦疋旻雖富背Title:.se-l-ec：七呂託口工i.曰-tEiirmirodhJLC；七工du/口Descrp-ccjn:根擁;商品id査甸盜存列賽f/pHgpAitprocLud11cLPItLk.r11wsescn.xtic:aft.匕s匕acpoct.service.,czms-czms-So-zrv=c-#saXwcztSktilaftByFr口duct1tti&LloLkBtselectsJizuLibtBvProdluct-13(Lonapr&3uctla藝1y=iyawB3cu.Qij.ci)

9、jaleu.Quaxy_crAa-tdC1irteraa.i：-l1Dxoclu.ct:Id.E1_ToCpEod.xici七工已jZid-o-1Ictiq-slcuIM3a.ppait.-q_acb：ByEscampLci(sIctiQus.fv/for(SlcuLskti匸bku.B/ili?ECo_or.HI5t3.更新:查詢庫存大于0的SkuQueryquery=newS/ftjQtjer)-);/查詢厘存大于8的|query.createCriteria().andProductldEquaLTo(productId).andStockGreaterThan&);1.5配置dubbo

10、服務(wù)配置服務(wù)提供方：cms配置服務(wù)消費(fèi)方：portaldubbo;referenceid=pj：cxJLrc7：tE_rvi.c：mnintsrface=ncn.itejtBbabasportserics-proiLrct.Prcxfu-ctSi口rl=duhbo:/127.O.D.lD38Dnchec上duhbo:refer-enaei:.=-cJ.Qr5srTlc,&interfac&=-cn-itcast2?巻上?總宇日工亡方曰工礦衛(wèi)忑口匸加匚占UorojrWEdiurl=Udubbo/127Q.0r1;2030check=fjlsedubbo;referenceid=searchSsr

11、vieg*int曰匚facs=cjiiteasS,haJ?jsportrservice,solr-SearcnSBrvic：i口1二心衍uhmu上=占ee/A1.6編寫controller去商品詳情頁&ReqnestMapping(/product/detail1)publicStringdetail(Longid.Modelmodel)/商品信息Productproduct=cmsService.selectProductByld(id;model.acldAtLrihuLe(T,prjc1lcLt,tprodiicL);/庫存信息Listskus=cmsService.selectSknL

12、lstByProductId(idmodel.addAttribute(T,sku.sT,Tskus);returnT,produ.c:tT,;1.7jsp頁面回顯顏色：亡丄ass=r,urwclass=“刮已id=waolorsfforEachitems=skusvar=oijrTivclass-anclic.-ncolarToRed(this*Sslcu.匚丄oridUimadata-img=src=/Inag&s/53fj34t2d2N0t371atj2002.Ing/&丄務(wù)沓三徉掙heightn25nwidths25sku.CQlor|.named-商品信息：|inigdata-ini

13、g=nlalt=*src=pic：width=*50nheight1.8顏色重復(fù)1.8.1bug182set需要重新equals和hashcode方法對(duì)Color(id)重寫equals和hashcode方法。juctContifoller.java盾searchjsp凰productjspEdubbo-consumeif.xml0ColorJavaKsb.appendfaerialVersLonUID=ri!append(sezjfaZVezr-sioial/JD)*append(;/rat;urnsibatoString(;/TOC o 1-5 h zOverride/piibXzLuin

14、thm呂hCodte(J|/finalirrtprim=31;zzlntresul匸二1;暮result=prime*result十(id=null)?0:id.hashCode)ireturnresuit;&Overridepiiblicbooleanequals(Objectobj)if-tliJLsj)returntruG;If(obj=null)returnEalse;if(getClass!=cbjg巳tCIlassfreturnfalse;Colorother=(Color)obj;If(id=null)if(other亍日！=nullretnmfalse;)elseifI.!id

15、&qn曰丄s(DthEi;idi?曰七urnfalse;183將顏色信息放到set容器中（不能存放重復(fù)元素）*去商品詳情頁*7ReqiieLMapping(T,/producL/cieLdll1)publicStringdstail(LongidfModelmodel)/商品言息Productproduct=cmsService.selecProductByld(id)；model.addAttribute(productT,tproduct);/庫存言息Listskus=cmsService.selectSkuListByProductId(id);model.addAttribute(r,

16、ski_;sT,skus;/防止頓色重復(fù)，啟到met亭器中SPtcolors=newHaRh.Spt:();for(Sku.sku.:skua)colors.add(sku.getColor();returnT,productT,1.8.4jsp頁面的顏色回顯Cdivi：=prchoose-co丄ojtclas5=llchoose-co丄or一sJiduJ)p-chooseldiv匚_已35=叼七“選盤且匚百elass=Hddflic=flcoIors,ITtLref=njvcript:;Fcolo工.nameFimgdata-img=nlFsrc=/-Ltnags/S3fddo2N0b7丄&

17、rib匚002.*懐匚三Jolor.nams2sku的聯(lián)動(dòng)效果2.1選擇顏色操作/進(jìn)擇跟邑權(quán)亦EuncitioncalorTinRadl(t.args-rcalorld)/2wsisasfii麗適定癥色耳空$(s,fealorsdiv11aremov&Class(select&d1*):/1袴迭務(wù)的JS色眶孔紅/Starget).attrCc?lass?itemselectedwj?$(targetaddclasstHselect-sdB,);n-iiffisafe.顧詼煩邑匸的尺毋vartitmL=!iH用于械尺舊慣息csforEachitens=H$(atusvaEskuifcolorId

18、S(5kui.calorldl/WU藤麵色下國尺咼亶別html=十!S+,/4腳ffitffl尺碼虐邕5(,!#slzg51!).htFil(htmlf2.2選擇尺碼確定尺碼后就確定了一條sku,確定了sku后就可以填充價(jià)格。/選擇尺碼操作|functionsizeToRed(targe七尸size)/2、切換丘碼框?qū)⒅斑x定的尺碼青空$(T，#三_1藝吃占divT,).rem口7匕匚丄耳占占(占匕丄etsbeci),/1、選擇尺碼后將尺碼框變紅S(targetJ.addClass(T,selectedJ;/3、確定丘碼氐就已經(jīng)確定了一條mkm那蟲就可以填帝價(jià)格if(cld=1$sku.col

19、orId1&size=?sku.EizE)/填充忙格S(T,非hhq-prir：pT,J,htm(S-tku-rriA)進(jìn)入詳情頁默認(rèn)選擇第一個(gè)顏色下的第一個(gè)尺碼/頁面初始化默認(rèn)選擇第一個(gè)顏色點(diǎn)擊事件$(function-3(T,#81orsdiv:first11).trigger(click;r,gEtitriL二八；冊(cè)Ifl梧足同E整varflag-truej/畀去ifcolorld=!Ssku.colar：IdFfH*：諄&叵TBR!：ir(flag)htsnldivcl-asa-nz.traaLestTld-n5.sizeF*ca=liDk-nBizTcRedIthi-Sj15Ieku

20、T+!Cahr*f=rajavascript:;titls=H$ku.jjizoJSnIm.a1zaJa+1,flagEalBej英ifl開至5C#bbs-price-)hcml(5iskunpriceJJelaethtmli二B1+15ska.bies+a最終varcld;/送擇顏色操作fLLnctic-ncolorToRed(t玄旳已JcolorIdL)cld=colorld;H2.切換額色框稱之前選定的顏色清空eitcolcrsdiv).removeclass(sslected1:H1、將選擇的藪芭框變紅(target).attr(clisariteirselected)；5二淞旺己二,

21、addclass(sel&ctsd);Hm_確.：運(yùn)顧色后，加載潼顏色工的尺碼varntmL=1；/用尸拼按尺碼信啟.varflsg=-rue;/開關(guān)-：zorEachitejnE=$(s：if(cclorld=szu.eu-orli；1)|/力口載該顏色=一的尺何二甩*if(flag)htinL-=1div匚1mss=:izwzne-bLe匚ted1*id=l+rwWumhrsf-avaGrJr:；-jrls=v：sku-?tf:只#：；-?s-bflag=false;/IZ-/填充價(jià)格?(itbbi-pi-ce；.htit.l(skii.rlwe*)slse-html-=+rahrsf-a

22、vs?crjp:；r.irls+skn.5iz-?：k-：.?=-se-r/c:zrZa匚上/4.拼接所有的尺碼怡息$fis.zui；).html(htit.l:;3freemarker介紹3.1概念FreeMarker是一款模板引擎：即一種基于模板和要改變的數(shù)據(jù)，并用來生成輸出文本（HTML網(wǎng)頁、電子郵件、配置文件、源代碼等）的通用工具。它不是面向最終用戶的，而是一個(gè)Java類庫，是一款程序員可以嵌入他們所開發(fā)產(chǎn)品的組件。FreeMarker是免費(fèi)的，基于Apache許可證2.0版本發(fā)布。其模板編寫為FreeMarkerTemplateLanguage（FTL、html、txt），屬于簡單、

23、專用的語言。需要準(zhǔn)備數(shù)據(jù)在真實(shí)編程語言中來顯示，比如數(shù)據(jù)庫查詢和業(yè)務(wù)運(yùn)算，之后模板顯示已經(jīng)準(zhǔn)備好的數(shù)據(jù)。在模板中，主要用于如何展現(xiàn)數(shù)據(jù)，而在模板之外注意于要展示什么數(shù)據(jù)。模板+數(shù)據(jù)輸出（將數(shù)據(jù)展示在靜態(tài)頁）。3.2原理模板+數(shù)據(jù)模型=輸出我們準(zhǔn)備模板、準(zhǔn)備數(shù)據(jù)，通過Freemarker提供的類將模板生成靜態(tài)頁，并再該靜態(tài)頁上填充我們準(zhǔn)備好的數(shù)據(jù)。3.3語法jsp：遍歷listemptyftl：遍歷list$keyword!3.4demo入門程序publiccla.5sFrnDemoFilefile=newFile(pathname)1?ConfigurationconfigiiraLt-ioi

24、i二no-wconfiguration(;configurationsetDirectoryForTemplateLoading(file);門麴噸板Templatetemplareconfigur且匸iQngEt;!1巳mp丄已t巳fh巳丄JLo.htm丄T;/擁謝堀Listusers二newArrayListo();Usernserl=newUser();userlsetId(1;userlsetName(iufb);usersadid(user1;Useruser2newUser(7user2呂巳tld(2fuser2-setName;users曰已已(lls已工;2;MaprootMa

25、p二newHasKMpO();rootMapput(11usersMjrusers);/植板+埶拒一一一輸出帰有刪的魁writerout=nowFileWrixsr(pathnaLme+word.html./ummsfrootMapfout7/魚過欖板.拒輸站口rd.htm1迭-卜SystemrootMap,Longid;實(shí)現(xiàn)類：publicalassStaticiageServicsimp1implementsSta匸丄心卩占且與客工叮icQf汁*1不希JgriEErConfiguration.b郅么我f|呢耍注入匚2ssprijiggiSfreemarkez-fiiiF匸meiMm工k日匸

26、ConfigiL匸包工對(duì)8;套B5匚口nfiguitiatioiL3“freeMarkerCanEigurerj?兇4、ireeMarkerConfig-ur/WEE-INF/ftl/損板*/privateConfigurationconfigurarion;publicvoidsetFzssMarkeeConfigurer(FreeMarksrConfIgurertzssHarkerConigursr)(this.configuration=fre&MarkerConfigurer-geConfLgfurat:ion(;privateServletContext-servl&tCantext

27、;/注入mm工*丄包七|2匕!1匸9盍七縈取【頁目氏|再買路輕mOverridepublicvoidsetServletContext:(ServletConrexthervletConteact)fthisservletContext-=ssrvietContext-fDescription:生圈&態(tài)帀的具解現(xiàn)root-Kapparamidseecm-it-csst;kiahmx工匸servicecmsstaricPages&rvicetindex(javaut.11Mapoverridepublicvoidirtdex(MaproctMap,Longid)/1.Configuration,

28、/淮卡r*oLiliiguathnam：j=,r7li_；nl/roducL/1-LJ+.j-LtiiiLM;/:Hi-nr/訣.-*冃4陥匸F=rvtContextSxir.greal!一servletContsxt.s-Realfpa-hnaiaa);F二丄三i_w二tiewFil=(r=_?a七上).；F1?parent?2-J.jstParantFile(;1(!paz-ii.F_e.exists/JIlfF?G/.74/prci-LCL/；?：:元IF衣丟訶汪pn-.Fr：.rr：-iir-in：i-C1-3irVnnir3r&f4.3將靜態(tài)服務(wù)交給spring管理二FadcaeE叩

29、.33NaviAl商三senbobsspct-bgriporeri?:i.：oH-bdtjQGpMT-pojc|pAiAiIj.-rihj口門；匕babaspcft-partaJpa-eTTtjCiibabMpobabsspc*t-HH-vice-buw;圮常江f1babipEvt:-kh-otiblF.r.ntJO/b.1禪立r：/lTUirjdA*出cn-fcra-stbabMpoFt-SEriittjcm-sQpCrnsServiCBrrnjffVJ曲bEPBgrviEmpLjdivk禪思tKjmaifVfwourcei*LtccflfigJ$flPpicationCaniw.it-ni

30、HpfMr.吟羊phSon匚“dt-wanjii：”??；4ipEcdtiDnCantK-jt-tfAnsacti罡dubbciprovid?fmnlJ$nedii-Kml西fidf.ifVll胃slatrpdQfe祕r口idfrieil|因dbprpp*ti曲Ic-Sprapertiep即rjdD&-conH9.xnil片spiirq-canRgjjiJprapeztyname-=11tsffbm曰nACoe-anid丹bisfits七口豆史*m耳HgmHscsnsr*lasjncnJ.匕CLiiS七jbabjport-jzgnzsss-agsSrtuCujEcoJd1-jsjtag-tZJ.

31、jtejl7VEe占nid=cferauJressagreLlsi;enerConcainerclaaB=oEgsprlngrrdnekor.JjeSjIlscene-TjCeTaulEKessageLlscenerContproEegrtynam&=pCMn&etionFicfiaryr&f=intf2eConn&2tiojiF&Cprapeirtyname-mejsageLJ.rt=n=-r*refwcmjCuJtojnMejjtfg=-ii5tener/1-窗歸一尉:TQE或區(qū)工亍仇日旳巳=JEUJJ：C_10nW&niE?T審曲已=pEdJLi：?CjnfACproEGftynama=

32、ppubSuhBcMlf!flvalu&=ptr-us!74.4.2自定義消息監(jiān)聽器GvearridBpubli0voidonMessage：(Messagem.c-ssage-1-/flmsaaag:ftAz11veMCrre-xtMe55i3.geactLvsMe-xtMeaaageitAct1vsMQTextMeaaage)nierisage;飆:WEtry(Stringid=act-iveMTexCM&99agegetText);E4aptringPObjectsraatMapnewHaabiHap-O);/驅(qū)眾堀商翩剣3、岸徉l(xiāng)*!5-顏邑伯口/阿腿案爵-：I一-二一-：IPr#：1

33、1|r-亠.：丿”rootMap.put(，npraducproduct;/屋存為需軍Lists-kLLf=on=Eqrvii=e_sc-1c-ct-SkuLit.EyCiirciciLLUtLdJlriciStDukMDzrGiThNnZlDHCilILong-jpmjrMfijXojigfid)lixstMapput(skua,l!Fskus;/E：*|SeLcolors=jiswHa.sh已匸3H*forSkus-ku:kus)cclcis.addfsKu.gsGColox?roozMapput(colorsrcolor日?ataticPaijeSarvLce.indew(rtNaprLong,pars&Lc?ncr(id?Jicratch(EMCBptione)a.prinrSraekTrace();4.5更新service-product/solr中的ActiveMQ配置文件solr：5自走義消息監(jiān)聽需z處理從列中的消息beanz_d=austomMessa.geLlsten&rclass=ffcn.itcast.bbaspGbeanz_d=nd&fultressgeListenerContsinernclass=org.sprpropertyname=,fcon