一、背景
完成了先前的第一個案例新聞頭條類，其中核心的功能主要是新聞主頁和新聞詳情頁的內容讀取和展示、交互，其中涉及的前端和後端的編碼開發工作量較小，作爲第二個案例項目經過思考選擇難度高一些的電商項目，經過篩選選定生鮮電商，目前的電子商務從網絡銷售、新零售(線上線下服務融合)、到家電商(生鮮類、服務類、外賣類)等，到現在的即時類生鮮電商。目前生鮮電商就像當年的百團大戰一樣，生鮮電商的因爲服務對象、產品特殊性、產品消耗，從供應鏈、配送、倉儲等多個方面都是比較重的，所以擴展和複製的速度較慢。到家電商也是未來高即時性需求的一個特定的趨勢，和美團外賣的地位同樣重要。閒話不多說，說說整個開發和設計過程吧。
二、頁面設計：
1、整體的頁面設計的開發過程頁面部分和頁面中的元素分類參考主要來自京東生鮮H5和淘寶生鮮H5，因爲從一個電商產品的維度完全重新設計會比較耗時，因爲整個電商的環節從主頁、分類頁、商品頁、支付、訂單、倉儲、配送等等各個環節特別多，考慮到時間關係，暫時只設計實現主頁、商品詳情和訂單的請購提交模擬。
2、生鮮電商的主頁：主要涉及包括輪播圖、商品主題分類、商品搶購頁面入口、商品購買的入口頁面。（備註：部分的圖片和圖標信息截取是淘寶生鮮和京東生鮮）僅做學習項目案例參考。
3、生鮮電商的商品頁：這要涉及輪播圖、產品詳情和商品展示、搶購的商品的價格等信息。
4、生鮮電商的商品下單頁面：主要涉及訂單的提交的頁面信息，模擬訂單提交，訂單提交涉及 異步消息發送提交。
三、案例開發介紹
1、項目基礎信息：
1.1、項目名稱：生鮮電商全棧實踐案例（H5版本）仿京東生鮮和淘寶生鮮。
1.2、技術選型：
1.2.1、後臺技術選型：springboot2.1.1+mybatis+mysql5.5+JDK1.8+TOMCAT9，其中springboot集成了配套spring、springmvc、spring-mybatis、mysqljdbc等相關的依賴包的組合。
1.2.2、後臺開發工具：eclipse的springboot定製版STS.exe(Spring Tool Suite 3.9.4)+maven3.6.1
1.2.3、前端技術選型：bootstrap3.3.7+jQuery2.1.4+CSS3+HTML+JAVASCRIPT
1.2.4、前端開發工具和測試：sumblime3.1.1+tomcat9
1.2.5、數據庫選擇是mysql5.5.62 windows和linux版本，數據庫鏈接和管理工具：navicat12.0中文版。
1.2.6、消息中間件 RocketMQ4.3.2 .
1.3、數據模型
1.3.1、後臺數據模型的設計：
product
-- 創建產品信息表
create table product
(
prod_id varchar(25) not null, -- 產品ID,主鍵
prod_name varchar(255) not null, -- 產品名稱
prod_type_id varchar(25) not null, -- 產品類型ID ，1001 水果、1002 肉類、1003 海產、1004 糧油、1005 蛋類
price_miao bigInt, -- 秒殺價格，單位默認是分
price_old bigint, -- 原價，單位默認是分
prod_stock_num int, -- 秒殺商品的庫存
prod_parameter_info varchar(128) , -- 產品銷售參數信息
prod_face_img varchar(80), -- 封面圖：
prod_lunbo_img varchar(256), -- 輪播圖：
prod_detail_img varchar(512) -- 詳情圖：
);
1.4、前臺開發：
1.4.1、前臺的開發過程頁面設計過程中，主要是選擇bootstrap作爲H5端基礎的頁面樣式，其中輪播採用了Bootstrap-Plugin：輪播（Carousel）插件，商品的價格、參數、標題、詳情圖、輪播圖 來自數據庫中，通過jquery的ajax後臺服務請求獲取後通過jquery動態更新頁面，其中商品詳情頁面的頁面滾動事件、top到頂處理使用了到jQuery封裝的瀏覽器 windows和doucument中scrollTop()函數信息，以及錨點對應的座標位置信息等，div.offset().top。同時包括倒計時的信息也異步刷新採用jQuery定時更新，並設定頁面定時設計任務setInterval(updateEndTime, 1000);
1.5、後臺開發：
1.5.1、核心的開過程：POJO->DAO->Service->Controller相關的設計和實現即可。【先構建數據層、再開發服務層、最後開發控制層】大大提升開發效率。
1.5.2、POJO和DAO層：採用mybati提供的逆向工程的插件MBG，修改逆向工程的配置文件generatorConfig.xml，自動根據關聯數據庫中定義的實體表自動生成pojo實體類、mapper*.xml文件以及mybatis對應resultmap等信息，將相關的pojo和mapper等相關自動生成的代碼插入我們自己工程中即可。案例中主要採用的是 product表。
1.5.2、Service層：服務層先定義 接口，然後定義服務實現類，並加入service註解
服務1：主頁商品的清單獲取服務。從產品表中獲取所有的產品服務的josn數組信息集合，主要使用逆向工程myMapper官方類中selectAll()方法。
服務2：商品詳情的信息獲取服務。根據產品ID獲取獲取對應的產品的josn信息(產品標題、庫存、參數、價格等)，主要使用逆向工程myMapper官方類中selectByPrimaryKey(prodId)方法。
服務3：商品下單的信息的消息發送服務。主要是先後臺啓動nameserv和broker，然後啓動消費者的發送訂單下單消息，訂單下單成功從物流、配送、售後、統計等等的服務都可以通過消息消費進行處理。
1.5.3、Controller層：從服務層獲取的POJO對象的數據，通過REST的風格的方式進行暴露，提交給springmvc中的dispatcher控制過濾器，控制器層返回的數據按照josn對象數組的方式進行返回給前臺。
1.5.4、上線部署：
1.5.4.1、rocketMQ4.3.2 內存啓動JVM參數需要調整，因爲虛擬機空間有限。
1.5.4.2、rocketMQ4.3.2 經常會出現no route info等信息報錯，需要時刻注意消息中間件集羣服務解析器、和消息中轉器、啓動是否正常。
1.5.4.3、因爲先前的案例新聞和電商屬於不同的工程，tomcat使用springboot多端口部署時，需要在properties文件中增加 spring.jmx.default-domain=工程名稱，否則多個springboot項目不能在同一個tomcat下運行。
1.6、開發收穫：
1.6.1、前臺收穫：這次的前端的樣式的複雜度相對高一些，主要新使用的技能輪播圖、top滾動以及錨點、倒計時等第一次使用。在前端的樣式中因爲手機端的屏幕寬比差異較大，儘量在組件的使用過程中使用 寬度、margin、padding百分比的機制，這樣不至於屏幕中的內容，儘量少使用具體的高度和寬度 px 信息。頁面在渲染過程需要和通過後臺獲取數據後再進行dom操作，有時候服務器的反應慢，會感知前臺的體驗不是很好，後續可以思考如何優化。
1.6.2、後臺收穫：這次主要新增的技術內容核心是rocketmq，消息中間件對於電商類高負載的的系統是非常重要。先對整體的rocketmq做了一個初步的瞭解，包括 集羣服務器、消息中轉器、生產者和消費、集羣化部署方式分類（單機版、雙MASTER、異步多Master多Slave、同步多Master多Slave），以及快速的入門案例、可視化控制檯console等，其中在開發過程中，經常碰到route_info not found錯誤。整個rockctMQ在集羣化部分和分佈式的能力感覺很強大，但是操控起來配置的參數、莫名的報錯信息也比較多。在本案例中只是在springboot初步實現了，訂單提交時，訂單的消息生產的模擬過程，訂單提交後，可以讓配送、庫存等其他系統進行消費和調用。
1.6.3、總體收穫：對於電商項目不管是前端的複雜度和後端的複雜度都還是比較高的，特別是後端的 高併發的技術架構中消息中間件的體系還是蠻複雜的，配置複雜度、包括異常問題定位、穩定性和可靠性監控和異常處理，rocketmq技術組件本身就是一個併發編程、服務端編程的高級案例，包括jvm參數調優等，希望後續在實際工作中能有機會，深入的去讀一下rocketmq的源碼信息和做相應的總結。
案例信息的地址展示：http://49.234.9.176:8080/yijymall/index.html 請使用手機瀏覽器 訪問或者 使用PC端瀏覽器手機模擬訪問。
案例信息圖片信息展示：
