搭建商品詳情頁面工程、實現商品詳情頁面展示

搭建商品詳情頁面工程

其實商品詳情與搜索都是獨立的工程,我們以京東爲例,當我們搜索到某商品後,點擊那個商品鏈接,進入商品詳情頁面時,可以在地址欄看到"item.jd.com",很明顯不是search工程了,這是專門用來展示商品詳情的工程。

我們也需要這麼一個展示商品詳情的工程,現在我們就新建一個taotao-item-web工程,與我們建taotao-search-web工程一樣,新建一個Maven工程,前面幾步操作我就不囉嗦了,大家可以參考以前搭建web工程的操作,需要提醒一點的是,到下圖這一步時,打包方式要選擇成"war"方式。

既然與taotao-search-web都是web工程,我們可以參考taotao-search-web工程進行配置,首先是配置pom.xml文件,我們把taotao-search-web工程的pom.xml文件的依賴拷貝過來,然後稍作修改,修改後pom.xml文件的內容如下,其中依賴的接口工程由原來的taotao-search-interface修改爲taotao-manager-interface,因爲商品詳情肯定是要查詢商品服務的。還有就是最後配置的tomcat啓動端口改爲8086,因爲8081到8085都已經被佔用了。

下面配置下resources,我們把taotao-search-web工程的src/main/resources目錄下的resource和spring目錄拷貝到taotao-item-web工程的src/main/resources目錄下,其中resource目錄下的resource.properties文件內容刪光,以備以後使用該文件

下面打開springmvc.xml,修改下掃描包掃描的目錄,修改爲com.taotao.item.controller(這個包我們要在taotao-item-web工程新建),引用dubbo服務名稱要改爲"taotao-item-web"

下面我們需要把taotao-search-web工程的web.xml拷貝到taotao-item-web工程下(當然,我們需要先建一個WEB-INF目錄),拷貝過來後需要修改的地方如下

下面我們需要把靜態資源文件放到工程下面,靜態資源文件大家可以到http://download.csdn.net/detail/u012453843/9841698這個地址進行下載。下載完後解壓,將css、js、images放到webapp目錄下,將jsp目錄放到WEB-INF目錄下。

下面我們依次啓動taotao-manager、taotao-content、taotao-search、taotao-portal-web、taotao-search-web工程(前提是啓動完了5個服務:redis、solr、image、zookeeper、activemq)。啓動好之後,我們訪問淘淘商城首頁,搜索我們上節課添加的華爲P10手機,然後點擊它進入詳情頁面,會發現如下圖所示的錯誤,這是由於訪問的工程不正確造成的。

我們找到taotao-search-web工程的search.jsp文件,在下圖標示的地方將原來的相對路徑改爲絕對路徑,就是前面加上"http://localhost:8086/"

修改完後保存,刷新搜索工程頁面,然後再點擊手機進入詳情頁面,可以看到已經變爲8086了。只是由於商品詳情工程還沒有開發完也沒有啓動,因此現在還無法訪問。

這樣,商品詳情工程我們便搭建好了。

實現商品詳情頁面展示

上節課我們一起學習了搭建商品詳情工程,這節課我們一起實現商品詳情展示。

首先來看一下商品詳情頁面代碼,可以看到商品一般屬性在tbItem實體類中都是存在的,只是圖片需要特殊處理,因爲tbItem實體類中圖片的字段存儲的是以","分隔的圖片地址的字符串,因此要將字符串轉換成數組才行,而tbItem實體類沒有images屬性,這就需要我們再新建一個pojo類,該類要繼承自tbItem,只是處理一下圖片即可。商品描述是在實體類tbItemDesc當中。

那麼我們把pojo放到什麼工程下?有的同學可能會想到要放到taotao-common工程下,這其實是不行的,因爲這個pojo要繼承tbItem實體類,而這個實體類是在taotao-manager-dao工程中,taotao-manager-dao工程引用了taotao-common工程,如果把pojo放到taotao-common工程中就需要讓taotao-common工程依賴taotao-manager-dao工程,這樣一來,就會造成循環依賴,這會報錯的,因此我們不能把它放到taotao-common工程當中。比較合理的位置是放到taotao-item-web工程當中。如下圖所示。

寫完了pojo類,下面我們來寫接口,由於商品和商品詳情在不同的表,我們寫兩個接口,分別獲取商品詳情和商品描述,其中獲取商品詳情的接口已經寫好了(下圖getItemById),現在我們要做的便是再寫一個獲取商品描述的接口(下圖getItemDescById)。taotao-manager-interface. com.taotao.service ItemService.java

寫完了接口,現在我們來實現getItemDescById接口
之所以可以通過主鍵來查詢商品描述,是因爲在商品描述表中也把商品ID作爲了主鍵

寫完了接口,下面我們需要在taotao-item-web工程中引用itemService的dubbo服務

下面我們來寫一下Controller,新建一個ItemController類

寫完了taotao-item-web工程代碼,現在我們依次啓動taotao-manager、taotao-content、taotao-search、taotao-manager-web、taotao-portal-web、taotao-search-web工程,在啓動taotao-item-web工程之前,由於taotao-manager工程做了修改,因此需要重新安裝到本地Maven倉庫(工程右鍵---->Run As----->Maven install)。

然後我們再啓動我們剛寫好的taotao-item-web工程,這裏再說一遍怎麼使用tomcat7插件啓動一個新的工程,我們在taotao-item-web工程上右鍵------->Run As------->Maven build…在彈出的對話框中的Goals一欄輸入:clean tomcat7:run,然後點擊"Apply",然後點擊"Run"。

啓動完後,我們訪問淘淘商城首頁,搜索"華爲P10",如下圖所示,回車。

索到的結果如下圖所示。我們點擊搜索到的那個商品。

詳情如下圖所示,發現正常查詢到商品詳情了!!
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章