淘淘商城5

從今天開始進入前臺，前面基本上是拿後臺管理作熱身的。就把以前學的系統的複習了一下，從今天開始進入前臺。

今天作一、前臺系統搭建(分佈式環境下(看是如何架構的))　　二、展現前臺首頁　　三、展現完了實現一個功能，左邊的商品分類展現功能

前臺系統搭建

前臺系統就是淘淘商城網站了，以前一直作後臺系統，後臺系統和前臺系統有關係，關係是在數據庫層面創建起來的，前臺系統與後臺系統是分開的。關係就是用的僅僅是同一個數據庫，前臺系統要單首創建

要想展現前臺首頁，就是一個網頁，是網頁就是一個網站就是一個web工程。咱們要搭建一個web工程怎麼建？直接建立一個web工程就能夠，或者使用maven直接建立一個war工程也能夠。可是咱們要考慮，如今的電商如淘淘商城它不是一個小網站，除了pc端還有別的（手機端，微信，ios什麼的）

優勢：

一、開發前臺和開發服務層能夠分開，下降系統耦合度。　　二、開發團隊能夠分開，提升開發效率　　三、系統分開能夠靈活的進行分佈式部署。

缺點：服務之間通訊使用通訊接口（之前只是調用方法），開發工做量提升（對於咱們程序員來講咱們的價值就體現出來了，有活幹了，齜牙），但對於老闆就是缺點了，爲了解決網站的高併發的問題，成本花的也值。

既然前臺架構是把前臺服務層和前臺門戶這塊分開，咱們就須要建立兩個web工程。服務層發佈一個服務供其它的門戶調用，服務層沒有表現層只須要提供一個調用的接口，門戶(表現層)沒有業務邏輯只用調用服務層來實現功能，其它的Android、IOS、微信均可以調用服務層。

前臺系統分爲兩部分：一部分是服務層web工程，功能就是發佈服務；一部分是表現層，展現頁面，沒有業務邏輯。全部的業務邏輯就是調用服務層的服務。前臺系統=服務層+表現層

前臺系統>服務層工程搭建

工程建立

搭建前臺系統就要先搭建服務層，有了服務層前臺纔有的掉，只搭門戶沒有服務前臺仍是跑不起來。服務層也是一個web工程，也要用maven。其實咱們也能夠建立一個pom工程（後臺的manager不就是這麼幹的），而後服務層和門戶繼承這個pom工程，也能夠分開，可是比較麻煩。

左側空白處右鍵----->新建Maven Project，選√，自定義模板

 

使用到的技術

工程建立好了，它使用的技術：要連數據庫因此用mybatis；spring；還須要發佈服務使用(讀:C恰F)或springmvc均可以(springmvc框架也能夠發佈服務)，咱們不強調使用哪一個框架發佈服務，只要把服務發佈出來了就行了。既然仍是使用的這三個框架，那麼就須要整合框架，首先把jar包依賴過來，taotao-manager也是用的是這三個框架，因此能夠參考一下，把它下面mapper,pojo,service,web裏面的jar包依賴添加進來

pom文件

依賴了上面的mapper，到此到層就依賴完了，服務層還須要使用spring框架，參考taotao-manager-service。剩下依賴spring的略

web.xml

web.xml在建立打成war包工程後，若是沒有這個文件，會報錯，拷貝以前taotao-manager-web裏面的web.xml作一個攔截修改

 框架整合

taotao-manager-web下前面有作好的，參考一下

如今就整合好了，整合好了要想啓動工程，還須要配置一個tomcat插件。tomcat插件不配置也好使，須要在rest工程的pom文件中配置，可是它默認啓動運行在8080端口，並且工程名是當前工程的工程名。不配也能夠，如今在這個文件中配置一個，由於咱們須要多個系統同時跑就須要多個tomcat，多個tomcat就須要它運行的端口號不一樣，（去manager的pom把tomcat插件拷過來build部分），

把以前的pojo(pojo不會報錯，它沒有依賴)maven install一下到本地倉庫，而後mapper安裝。一系列安裝下來它報錯要求安裝taotao-manager,安裝過程當中它測試圖片服務器最終報錯太麻煩，如今咱們想讓它跳過對圖片服務器的測試直接安裝

taotao-manager右鍵Run As選擇Maven build輸入命令：install -DskipTests便可跳過測試直接安裝，安裝一個旗下4個都SUCCESS安裝

 下面少了一步，要把出現的defautl刪除後添加

 起來了沒有報錯，可是咱們看不到由於尚未jsp頁面，即使訪問localhost:8081出現404也證實它起來了

前臺系統>門戶搭建

剛纔已經把服務系統搭起來了，要想展現首頁還須要門戶，還要建立一個taotao-portal，門戶是什麼意思？門戶就是入口，對於網站來講就是首頁，來建立門戶系統

使用的技術

一、spring（不連數據庫，只調用服務層，因此不用mybatis）

二、springmvc(用struts也能夠，通用的，有人說struts慢，實際上是struts標籤慢)

三、Jstl、jQuery

四、門戶系統至關於客戶端，服務層至關服務端，客戶端要調用服務就須要http協議，在咱們學習webservice的時候可能rest服務只用瀏覽器調用模擬了一下，調出來了就完事了，這時瀏覽器就至關於客戶端。咱們真正調用服務返回結果應該是在代碼中，在瀏覽器中不行，那麼這時須要     httpclient     這個技術（使用java代碼模擬瀏覽器，發送一個請求，獲得一個結果）

建立工程

咱們這個工程是一個門戶工程，無可厚非確定是一個web工程，

 配置工程與框架整合

框架整合這塊如今沒有mybatis了，只須要把springmvc和spring的配置下（參考taotao-manager-web配置，文件從這拷貝）

框架整合好了，還要配置一個tomcat插件。要啓動這個工程，須要在portal的pom文件中添加一個tomcat插件

要想展現首頁得有頁面，導入

要想展現webapp/jsp/index.jsp淘淘商城首頁，外面直接訪問不到，因此這裏就要寫一個controller。

 taotao-portal右鍵run as--->maven build...輸入clean tomcat7:run

商品分類展現功能

工程建立完了（兩個獨立的系統建立好了），首頁展現出來了，如今要作一個商品分類展現的功能。

如今看首頁index.jsp源碼，這個首頁是扒拉京東的，jsp能夠讀一下，不建議去讀它的js，由於這個js比較複雜，並且是通過壓縮後的js（壓縮完了不會換行，變量名也會改變，比喻原來有意義的變量名都會改變成沒有意義的變量名，abcd之類的，讀起來比較麻煩，這些js都是壓縮後而後又格式化出來的，讀起來比較晦澀，可是要能找到是哪的問題）

像京東首頁這麼大一個頁面，至少也得作一個月多。最初作一個簡單的版本，後來慢慢地增長功能不停的維護，最後可能誰也不知道里面進了什麼功能，可能換了好幾茬人了。如今從新訪問下首頁，F12抓包看看。

　　當鼠標滑動到鏈接上觸發 mousemove 事件。頁面作一個 ajax 請求，請求 json 數據包含分類信息，獲得 json 數據後初始化分類菜單，展現。 那麼這個json數據格式究竟是什麼樣的呢？咱們作一下測試，先不讓它請求8081/rest/itemcat/all?。。。先把這一行註釋掉，把下面的一行URL_Serv打開，而後把事先準備好的error文件夾下面的商品分類數據格式.txt複製一份(刪除兩邊括號)更名爲category.json（與上面url請求對應）粘貼到webapp下面。

 太難看了能夠把那個category.json複製一份，打開參考資料裏提供的JsonView文件夾再打開JsonView.exe程序，而後粘進去再點擊format

 使用ajax訪問本工程的json數據

把上面請求的url打開後測試下，地址欄從新刷新頁面，而後看network，當鼠標放在分類上是觸動了mousemove事件，而後發送ajax請求，響應獲得category.json，鼠標放在上面確實有分類內容了。只要能模擬出這種效果就能夠了(這個是使用靜態數據，未來把這個變成動態的就能夠了)

問題：爲何地址欄訪問localhost:8082首頁能夠展現出來？

答：在web.xml裏面有一個歡迎頁index.html，（先在controller找不到對應的/）地址就作了這個請求localhost:8082/index.html，這個請求被springmvc攔截（*.html），攔截後才處處理器映射器裏面找/index對應的url，這個方法返回index，這個index再加上視圖解析器的前綴和後綴找到對應頁面展現出來

數據需從taotao-rest服務層後臺系統來

如今首頁商品分類能夠展現出來了，看似沒有問題，可是數據應該從後臺系統調用服務得來，以前的作法是本身查本身taotao-portal中顯示的json數據。

既然直接調用taotao-rest，把category.json文件拷貝到taotao-rest的web-info下面。

 如今要求訪問localhost:8082/category.json它會自動調用localhost:8081/category.json，而後改代碼後瀏覽器測試

 Ajax誇域請求

Js不能跨域，出於安全考慮，js設計時不能夠跨域請求，若是瀏覽器出現上面的錯誤說明js跨域請求了。

什麼是跨域？一、域名不一樣時　　二、域名相同，端口不一樣時　　平時訪問都是域名相同、端口相同時訪問的通。

使用jsonp解決跨域問題

什麼是jsonp?

jsonp原理

jsonp就是利用了js的漏洞，js跨域請求不能請求數據，可是能夠請求腳本。category.getDateService()方法已近寫好了，而後把rest工程下面的category.json文件作修改做爲category.getDateService這個方法的參數，即

 

 測試一下，瀏覽器localhost:8081

如今既然jsonp能夠解決js跨域這個問題，那咱們右側展現的分類數據就不該該是靜態數據了，應該是從數據庫取了

從數據庫中取商品分類列表

前面只是用  靜態數據(category.json文件)  模擬了一下，知道jsonp怎麼調了下面查數據庫

dao層

是一個單表查詢，直接可使用逆向工程生成的代碼，dao完事

Service層

查詢全部商品分類，生成前臺頁面要求的json數據格式。返回pojo。看了返回數據的結構分析後得要建立兩個pojo。以前的pojo有可能被其它項目所使用，因此建立在common中，這個pojo其它工程不大可能用。放到rest工程中。

一、分類列表的節點。包含u、n、i屬性。　　二、返回值pojo。包含data屬性是一個list類型　　（代碼較多，略）

controller層

接收頁面傳遞過來的參數。參數就是方法名稱。返回一個json數據，須要把json數據包裝成一句js代碼。返回一個字符串。

參數：回調方法名稱　　返回值：字符串

方法一

注意咱們如今是服務，服務有必要參考頁面調用的js嗎？其實沒有必要，咱們是開發服務的團隊，固然接口實現你能夠跟他們打好招呼，或者說你作完了給人說我接口是什麼你直接調就能夠了，你沒有必要去徵求別人的意見，由於你是開發服務的，別人調你的。咱們作什麼別人就得調什麼，少廢話，愛調不調。

寫好了地址欄找到這個圖標，如今有兩個tomcat，選擇關閉重啓rest，而後地址欄訪問：localhost:8081/rest/itemcat/list

 加上紅框內的東西，再重啓rest訪問就不會亂碼了

方法二

 上面的方法是使用字符串拼接，還有一種方法要求springmvc4.1版本之後，因此以前的springmvc是不支持的，咱們這個恰好4.1

 先把rest關閉，把方法一的controller代碼註釋掉。

 改了代碼後，從新啓動刷新地址欄和以前同樣。如今咱們獲得了數據格式，如今要修改lib-v1.js文件裏面的調用了。

 出現這種狀況，要麼改版面，要麼只展現左邊欄位14個（遞歸時有14個就不取了，代碼略）