淘淘商城第五天筆記

本文格式為Word版，下載可任意編輯——淘淘商城第五天筆記傳智播客Java學(xué)院傳智.入云龍

淘淘商城第五天

1第四天內(nèi)容回想

商品添加功能的實現(xiàn)

1、富文本編輯器的使用KindEditor。

a)引入js

b)使用js代碼初始化KindEditor，需要一個textarea控件。

c)提交表單之前，需要調(diào)用sync方法，同步數(shù)據(jù)。是富文本編輯器和textArea控件

同步數(shù)據(jù)。

2、商品添加功能實現(xiàn)。

a)向商品表插入數(shù)據(jù)b)向商品描述表插入數(shù)據(jù)3、商品的規(guī)格參數(shù)。

a)使用模板的思路。

b)為類商品創(chuàng)立一個規(guī)格參數(shù)模板。

c)添加商品時，讀取模板，基于模板生成一個表單，供用戶輸入規(guī)格參數(shù)。d)使用js把規(guī)格參數(shù)轉(zhuǎn)換成json數(shù)據(jù)，保存到數(shù)據(jù)庫e)讀取規(guī)格參數(shù)，轉(zhuǎn)換成html展示到頁面。

2第五天課程計劃

1、前臺系統(tǒng)搭建

a)服務(wù)層b)表現(xiàn)層2、商城首頁展示

3、實現(xiàn)商品分類展示功能。

4、首頁內(nèi)容管理思路及cms系統(tǒng)。

傳智播客Java學(xué)院傳智.入云龍

3前臺系統(tǒng)搭建

3.1系統(tǒng)架構(gòu)分析

Taotao-portal（門戶）ControllerAndroidTaotao-managerService調(diào)用controllerHTTP調(diào)用IOS微信商城serviceTaotao-rest（服務(wù)層）ServicemapperMapperMysql查詢商品信息，pc端可以查詢，移動端也可以查看商品。下單：pc端可以下單，移動端也可以下單。

可以把業(yè)務(wù)規(guī)律提取出來，發(fā)布服務(wù)，供pc、移動端公用。好處：

1、提高代碼復(fù)用度

2、可以靈活的進(jìn)行分布式部署。3、系統(tǒng)之間耦合度低4、團(tuán)隊之間開發(fā)不沖突。

缺點(diǎn)：

1、需要發(fā)布Webservice，系統(tǒng)之間需要遠(yuǎn)程調(diào)用。2、工作量增加。

3、需要系統(tǒng)之間協(xié)作才能完成整個業(yè)務(wù)流程，系統(tǒng)之間調(diào)用變的繁雜。

需要創(chuàng)立兩個工程

服務(wù)層：taotao-rest：沒有表現(xiàn)層，只有業(yè)務(wù)規(guī)律。需要發(fā)布服務(wù)。

表現(xiàn)層：taotao-portal：只有表現(xiàn)層，沒有業(yè)務(wù)規(guī)律，不需要連接數(shù)據(jù)庫。

表現(xiàn)層和服務(wù)層通信，使用Webservice進(jìn)行通信。Restful形式的Webservice。http+json數(shù)據(jù)。

傳智播客Java學(xué)院傳智.入云龍

3.2創(chuàng)立工程

3.2.1服務(wù)層taotao-rest

使用maven管理工程。War包。

使用的技術(shù)：

1、Mybatis2、Spring

3、發(fā)布服務(wù)：cxf、springmvc

創(chuàng)立工程

框架整合

整合ssm框架。可以參考taotao-manager工程。

傳智播客Java學(xué)院傳智.入云龍

Pom文件

添加對taotao-manager-dao的依靠。添加spring的依靠配置tomcat插件4.0.0com.taotaotaotao-parent0.0.1-SNAPSHOTcom.taotaotaotao-rest0.0.1-SNAPSHOTwarcom.taotaotaotao-manager-dao0.0.1-SNAPSHOT傳智播客Java學(xué)院傳智.入云龍org.springframeworkspring-contextorg.springframeworkspring-beansorg.springframeworkspring-webmvcorg.springframeworkspring-jdbcorg.springframeworkspring-aspectsorg.springframeworkspring-context-supportjavax.servletservlet-apiprovidedjavax.servletjsp-apiprovidedorg.apache.tomcat.maventomcat7-maven-plugin

傳智播客Java學(xué)院傳智.入云龍

請求數(shù)據(jù)的js位置：

傳智播客Java學(xué)院傳智.入云龍

4.2Js跨域4.2.1什么是跨域

Js為了安全有一個限制，不允許跨域訪問。1、假使兩個url的域名不同2、Url一致，端口不同也是跨域3、Ip不同也是跨域

在taotao-portal中不能使用ajax直接調(diào)用taotao-rest的服務(wù)。

4.2.2解決跨域的問題

可以使用jsonp解決跨域的問題。

1、在js中不能跨域請求數(shù)據(jù)，js可以跨域請求js片段。

2、可以把數(shù)據(jù)包裝成js片段。可以把數(shù)據(jù)使用js方法來包裝，形成一條方法的調(diào)用語句。3、可以使用ajax請求js片段，當(dāng)js判斷到達(dá)瀏覽器會被馬上執(zhí)行。

4、在瀏覽器端，先創(chuàng)立好回調(diào)方法，在回調(diào)方法中通過參數(shù)可以獲得請求的數(shù)據(jù)。Taotao-restTaotao-portaljsonAjax請求json數(shù)據(jù)Ajax請求jsJs，其中包含json1、請求js數(shù)據(jù)調(diào)用js方法，js執(zhí)行，2、響應(yīng)js要求此方法已經(jīng)定義。3、取出jsonjson

前期準(zhǔn)備：

1、需要把js的回調(diào)方法先寫好。

2、做ajax請求時，需要把回調(diào)方法的方法名傳遞給服務(wù)端。3、服務(wù)端接收回調(diào)方法名，把數(shù)據(jù)包裝好，響應(yīng)給客戶端。

json傳智播客Java學(xué)院傳智.入云龍

5發(fā)布商品列表查詢服務(wù)

5.1分析

獲得一個分類列表的數(shù)據(jù)。從tb_item_cat表中取數(shù)據(jù)。

可以創(chuàng)立一個pojo描述樹形列表的節(jié)點(diǎn)，其中包含三個屬性u\\n\\i。U：urlStringN：nameStringI：itemsListpublicclassCatNode{@JsonProperty(\)privateStringurl;@JsonProperty(\)傳智播客Java學(xué)院傳智.入云龍

}privateStringname;@JsonProperty(\)privateListitems;publicStringgetUrl(){}publicvoidsetUrl(Stringurl){}publicStringgetName(){}publicvoidsetName(Stringname){}publicListgetItems(){}publicvoidsetItems(Listitems){}this.items=items;returnitems;=name;returnname;this.url=url;returnurl;publicclassItemCatResult{}publicvoidsetData(Listdata){}this.data=data;publicListgetData(){}returndata;privateListdata;

5.2Dao層

從tb_item_cat表中取數(shù)據(jù)，單表查詢，可以使用逆向工程生成的代碼。

傳智播客Java學(xué)院傳智.入云龍

5.3Service層

返回結(jié)果：ItemCatResult參數(shù)：沒有

業(yè)務(wù)規(guī)律：根據(jù)parentid查詢子節(jié)點(diǎn)列表，并遞歸調(diào)用。

@ServicepublicclassItemCatServiceImplimplementsItemCatService{@AutowiredprivateTbItemCatMapperitemCatMapper;@OverridepublicItemCatResultgetItemCatList(){}privateListgetItemCatList(LongparentId){//根據(jù)parentId查詢列表TbItemCatExampleexample=newTbItemCatExample();Criteriacriteria=example.createCriteria();criteria.andParentIdEqualTo(parentId);//執(zhí)行查詢Listlist=itemCatMapper.selectByExample(example);ListresultList=newArrayList();for(TbItemCattbItemCat:list){//如果是父節(jié)點(diǎn)if(tbItemCat.getIsParent()){CatNodenode=newCatNode();node.setUrl(\+tbItemCat.getId()+\);//如果當(dāng)前節(jié)點(diǎn)為第一級節(jié)點(diǎn)if(tbItemCat.getParentId()==0){node.setName(\//調(diào)用遞歸方法查詢商品分類列表ListcatList=getItemCatList(0l);//返回結(jié)果ItemCatResultresult=newItemCatResult();result.setData(catList);returnresult;href='/products/\+tbItemCat.getId()+\+tbItemCat.getName()+\);}else{}node.setItems(getItemCatList(tbItemCat.getId()));//把node添加到列表resultList.add(node);node.setName(tbItemCat.getName());

傳智播客Java學(xué)院傳智.入云龍

}}}returnresultList;}else{}//假使是葉子節(jié)點(diǎn)Stringitem=\+tbItemCat.getId()+\+tbItemCat.getName();resultList.add(item);

5.4Controller

響應(yīng)一個json數(shù)據(jù)。判斷callback參數(shù)是否為空，假使為空正常返回json數(shù)據(jù)，假使不為空，支持jsonp調(diào)用。

需要使用@ResponseBody注解。

支持jsonp兩種方式：第一種：直接響應(yīng)字符串

@Controller@RequestMapping(\)publicclassItemCatController{}@AutowiredprivateItemCatServiceitemCatService;@RequestMapping(value=\,produces=MediaType.APPLICATION_JSON_VALUE+\)@ResponseBodypublicStringgetItemCatList(Stringcallback){}ItemCatResultresult=itemCatService.getItemCatList();if(StringUtils.isBlank(callback)){}//假使字符串不為空，需要支持jsonp調(diào)用//需要把result轉(zhuǎn)換成字符串Stringjson=JsonUtils.objectToJson(result);returncallback+\+json+\;//需要把result轉(zhuǎn)換成字符串Stringjson=JsonUtils.ob