天貓整站 Springboot

詳細開發步驟,點擊瞭解:https://how2j.cn/k/tmall_springboot/tmall_springboot-1799/1799.html?p=81777

天貓整站 Springboot 版本，就是這樣一個實踐項目。我會帶着大家，從零開始，把整個項目構建出來。

成熟的項目規劃與設計:本教程作者，也就是我~ 有8年企業開發管理經驗，7年教學經驗，曾參與管理開發幾十個商業項目。將展示如何合理設計與規劃這樣一個規模的電商項目，既做到功能豐富，又讓開發節奏有條不紊。

基於Springboot 框架技術:本項目使用 Springboot 框架進行系統設計與開發，同學們可以觀察並模仿到 Springboot 是如何成熟，並高效率地實現各種業務場景的。

由淺入深:以動手爲主，代碼驅動，從簡單功能開始，逐一展開，配合圖文視頻講解，由淺入深，迭代開發，享受一個項目的從無到有的構建過程

典型場景:一個完整的JAVA WEB應用包含的各種典型商務應用場景的需求，展示相應的解決思路與辦法

簡歷中的亮點:一份能獲得面試機會的簡歷，必須要有項目經驗的。踏踏實實地把這個項目跟完，讓簡歷多一個亮點，多一項談資，多一層砝碼，多一些薪水

一:技術準備

爲了完成這個J2ee項目，需要掌握如下技術，當然也可以以本項目爲驅動，哪裏不懂，學哪裏，其實這也是最好的學習方式(帶着目標去學習)
1. Java
Java基礎和 Java中級的大部分內容
2. 前端
html, CSS, Javascript, JSON, AJAX, JQuery ,Bootstrap, Vue.js
3. 框架部分
spring springmvc springboot
4. 中間件
redis, nginx, elasticsearch, shiro
5. 數據庫：
MySQL
6. 開發工具
Intellij IDEA,Maven

二:開發流程

模仿天貓整站是一個比較大的項目，將按照商業項目的開發流程有條不紊的一一展開：
1. 需求分析
首先確定要做哪些功能，需求分析包括前臺和後臺。
前臺又分爲單純要展示的那些功能-需求分析-展示，以及會提交數據到服務端的哪些功能-需求分析-交互。

2. 表結構設計
接着是表結構設計，表結構設計是圍繞功能需求進行，如果表結構設計有問題，那麼將會影響功能的實現。除了表與表關係，建表SQL語句之外，爲了更好的幫助大家理解表結構以及關係，還特意把表與頁面功能一一對應起來

3. 原型
接着是界面原型，與客戶溝通順暢的項目設計流程裏一定會有原型這個環節。藉助界面原型，可以低成本，高效率的與客戶達成需求的一致性。同樣的，原型分爲了前臺原型和後臺原型。

4. 後臺-分類管理
接下來開始進行功能開發，按照模塊之間的依賴關係，首先進行後臺-分類管理功能開發。嚴格來說，這是開發的第一個功能，所以講解的十分詳細，不僅提供了可運行的項目，還詳細解釋了其中用到的HTML 包含關係，以及每個具體的功能：查詢，分頁，增加，刪除，編輯，修改。把每個細節都掰的很細，可以更好的理解，消化和吸收。在把後臺-分類管理喫透之後，後續的其他後臺管理功能，做起來就會更加順暢。

5. 後臺-其他管理
在把後臺-分類管理消化吸收之後，就可以加速進行後臺其他頁面的學習。

6. 前臺-首頁
前臺也包括許多功能，與後臺-分類管理類似的，首先把前臺-首頁這個功能單獨拿出來，進行精講。前臺-首頁消化吸收好之後，再進行其他前臺功能的開發。

7. 前臺無需登錄
從前臺模塊之間的依賴性，以及開發順序的合理性來考慮，把前臺功能分爲了無需登錄即可使用的功能，和需要登錄才能訪問的功能。建立在前一步前臺-首頁的基礎之上，開始進行一系列的無需登錄功能開發。

8. 前臺需要登錄
最後是需要登錄的前臺功能。這部分功能基本上都是和購物相關的。因此，一開始先把購物流程單獨拿出來捋清楚，其中還特別註明了購物流程環節與表關係，這樣能夠更好的建立對前端購物功能的理解。隨着這部分功能的開發，就會進入訂單生成部分，在此之前，先準備了一個訂單狀態圖，在理解了這個圖之後，可以更好的進行訂單相關功能的開發。

9. 總結
最後總結整個項目的項目結構，都實現了哪些典型場景，運用了哪些設計模式，把學習到的知識都沉澱下來，轉換，消化，吸收爲自己的技能

三:本地演示

1 : 下載並運行

學習一個項目，首先要確保這個項目是可以跑得起來的，這樣有助於建立學習的信心。不然像百度那樣，搜到很多的教程，跑都跑不起來，那不是耽擱時間嘛。
同時，也爲了方便同學觀看演示效果，準備了一個無需安裝JDK,無需配置TOMCAT,無需安裝配置數據庫的可運行演示。
how2j 模仿天貓整站 springboot版本地演示啓動思路：
1. 因爲springboot 版用到了 redis 和 elasticsearch，所以啓動過程，請務必按照順序啓動
2. 不同軟件之間存在兼容問題，如果您本機已經裝有了 redis或者 elasticsearch 或者 kibana, 但是版本不對，請暫停本機版本，使用我提供的版本
3. 啓動順序請按照批處理前的序號，依次啓動
3.1 1-redis.bat
3.2 2-elasticsearch.bat
3.3 3.kibana.bat
3.4 4-tomcat.bat

2 : 訪問地址

考慮到同學的機器上已經有tomcat，可能已經佔用了80,8080端口，所以這個Tomcat是用了9090端口，避免和其他端口衝突。
請訪問如下地址：
前臺演示：

http://127.0.0.1:9090/tmall_springboot/home

後臺管理：

http://127.0.0.1:9090/tmall_springboot/admin_category_list

雖然看上去和how2j 的官網演示：

http://how2j.cn/tmall

http://how2j.cn/tmall/admin

用戶感受上一樣，但是在技術上是不一樣的，其中一個重要改動是做了前後端分離，數據都是通過 axios.js 封裝 ajax 到服務端取的數據，然後再由 vue.js 把數據展示開。

3 : nginx

接下來進行 nginx 的配置和啓動。
爲什麼不像其他幾個步驟一樣搞一個 5-nginx.bat 呢？
因爲 nginx 要做動靜分離，必須配置路徑纔可以使用。不像其他幾個步驟，站長已經做了鋪墊，直接點擊就可以用了。
這裏使用 nginx 主要做兩件事：
1. nginx 採用80端口，反向代理到上述tomcat的9090端口。這樣用戶訪問的時候，就訪問80端口
2. 動靜分離，對於圖片，css,js 等等一系列靜態資源，都直接走 nginx，而不再通過 tomcat了。

4 : nginx.conf 配置文件

打開nginx目錄下的 nginx.conf 配置文件。
1. 反向代理配置。這個已經配置好了，無需改動

proxy_pass http://127.0.0.1:9090;

2. 動靜分離，這個動靜分離我提供的路徑是：

location ~\.(css|js|png|ttf|woff|woff2|eot|svg|map|jpg|gif)$ {

root E:/project/tomcat_with_jdk_hsqldb_springboot/tomcat-8.5.23/webapps;

}

這個路徑，每個學習的同學都不一樣，所以要根據自己情況，把它修改爲自己的路徑，一定要是 tomcat的 webapps 目錄哦。代碼比較複製代碼

5 : 啓動nginx

啓動方式：從控制檯切換到 nginx 所在目錄：

E:\project\tomcat_with_jdk_hsqldb_springboot\nginx

啓動命令：

start nginx

6 : 訪問測試

訪問地址使用80，也就無需顯方指定端口號了：
前臺演示：

http://127.0.0.1/tmall_springboot/home

後臺管理：

http://127.0.0.1/tmall_springboot/admin_category_list

7 : 動靜分離測試

比如訪問地址：

http://127.0.0.1/tmall_springboot/img/category/83.jpg

可以看到圖片，但是並不能確定，這個圖片到底是 nginx 直接訪問到的，還是tomcat 那裏來的。
這個時候，關閉9090端口的 tomcat, 再訪問這個地址，發現依然可以訪問，說明靜態資源都是從 nginx 這裏訪問的了。
當然，關閉 9090 端口的tomcat之後，也就只有靜態資源可以訪問了，其他的業務數據就沒法用了。