電商Web平臺開發(fā) 教案 項目六 商城前臺開發(fā)

《電商web云平臺開發(fā)》課程教案教學(xué)模塊項目六電商web平臺課時數(shù)5教學(xué)班級主講教師教學(xué)目的和要求知識目標(biāo)1.了解Java程序語言；2.理解SSM框架下開發(fā)功能的流程；3.認(rèn)識MySQL數(shù)據(jù)庫及SQL語句；4.理解前端各個功能的實現(xiàn)步驟。能力目標(biāo)1.能夠獨立完成前臺用戶的注冊/登錄功能開發(fā)；2.能夠獨立完成前臺商品列表及展示頁功能開發(fā)；3.能夠獨立完成前臺購物車相關(guān)功能開發(fā)；4.能夠獨立完成前臺訂單管理功能開發(fā)；5.能夠獨立完成個人信息管理功能開發(fā)。素養(yǎng)目標(biāo)1.通過商城項目前臺的開發(fā)，讓學(xué)生了解商城系統(tǒng)的業(yè)務(wù)邏輯與開發(fā)要求。教學(xué)手法1.在理論知識講解中，教師以講述法、討論法、提問法為主，激發(fā)學(xué)生的學(xué)習(xí)興趣，讓學(xué)生主動參與到學(xué)習(xí)中去，主動探索，積極思考問題，從而對相關(guān)知識概念理解掌握。2.在實踐學(xué)習(xí)中，教師以演示法、指導(dǎo)法為主，讓學(xué)生在實踐操作中發(fā)現(xiàn)問題，教師及時予以指導(dǎo)，使其能夠?qū)⑺鶎W(xué)知識靈活運用到實踐操作之中，掌握相關(guān)技能知識的操作。3.在教學(xué)實踐中，教師應(yīng)以學(xué)生為主體，充分發(fā)揮學(xué)生的自主能動性。并且教師也應(yīng)充分利用多媒體教學(xué)方式及網(wǎng)絡(luò)課程資源，使課堂教學(xué)活動更加生動活躍，學(xué)生能夠積極參與其中。教學(xué)重難點重點：1.前臺用戶注冊登錄各類說明；2.后臺用戶管理中各類說明；3.前臺購物車管理各類說明。難點：1.前臺訂單管理；2.個人信息管理。教學(xué)要點設(shè)計1.通過講解與實操演示前臺用戶注冊登錄、前臺商品列表展示及詳情頁、購物車管理，讓學(xué)生掌握controller、service、Mapper及實體類的代碼編寫，實現(xiàn)前臺用戶登錄和注冊功能，能夠獨立實現(xiàn)前臺的商品列表展示及詳情頁及購物車管理的開發(fā)。（135分鐘）2.通過講解和實操演示前臺訂單管理相關(guān)內(nèi)容，讓學(xué)生了解取消訂單的業(yè)務(wù)邏輯要和數(shù)據(jù)庫發(fā)生怎樣的交互，并通過實操演示的讓學(xué)生完成前臺訂單管理模塊的代碼編寫；以講授的方式向?qū)W生講解個人信息管理，讓學(xué)生掌握修改用戶信息、個人頭像上傳、以及加載用戶個人信息的方法。（90分鐘）教學(xué)過程任務(wù)一前臺用戶注冊登錄【預(yù)備知識】一、前臺用戶注冊登錄的業(yè)務(wù)邏輯梳理用戶在前端提交注冊申請后，數(shù)據(jù)發(fā)送到服務(wù)端對應(yīng)的注冊接口，服務(wù)端程序先以接收到的用戶名稱為條件進(jìn)行數(shù)據(jù)庫查詢，如果未查詢到數(shù)據(jù)則證明該用戶未注冊過，將接收到的數(shù)據(jù)全部添加到用戶對象中，然后查詢默認(rèn)會員等級添加到用戶對象，再向用戶對象中添加注冊即送的10積分，然后調(diào)用用戶注冊的DAO層接口執(zhí)行注冊的SQL語句，然后將執(zhí)行結(jié)果返回給前端。用戶在前端提交登錄申請后，數(shù)據(jù)發(fā)送到服務(wù)端對應(yīng)的登錄接口，登錄接口調(diào)用業(yè)務(wù)層的方法，先以接收的用戶名稱為查詢條件查詢用戶表，如果未查詢到用戶則直接返回“用戶不存在”的信息到前端，如果數(shù)據(jù)庫中有該用戶的信息，將接收到的用戶密碼加密以后與查詢到的密碼進(jìn)行比較，如果不同則向前端返回“用戶名密碼或錯誤”信息，如果密碼相同再判斷查詢到用戶的賬戶狀態(tài)，確認(rèn)賬戶沒有被禁用以后再返回登錄成功信息到前端。二、前臺用戶注冊登錄的服務(wù)端程序執(zhí)行流程1.用戶在瀏覽器端申請注冊或登錄時，前端程序會根據(jù)設(shè)置的服務(wù)器訪問地址訪問服務(wù)器端的程序接口；2.服務(wù)器端程序的UmsMemberController類負(fù)責(zé)接收和響應(yīng)客戶端的請求，其中定義了前臺用戶注冊和登錄的接口。3.UmsMemberController類中的接口調(diào)用了UmsMemberService接口中的業(yè)務(wù)方法，UmsMemberService接口中定義了前臺用戶注冊和登錄的業(yè)務(wù)方法，而UmsMemberServiceImpl則實現(xiàn)了前臺用戶注冊和登錄的具體業(yè)務(wù)邏輯。4.UmsMemberServiceImpl業(yè)務(wù)邏輯中調(diào)用了UmsMemberMapper中的前臺用戶注冊和登錄的數(shù)據(jù)庫方法，而UmsMemberMapper.xml映射文件則實現(xiàn)了前臺用戶注冊和登錄方法的SQL語句。5.執(zhí)行完業(yè)務(wù)方法后UmsMemberController類將執(zhí)行結(jié)果返回給瀏覽器端，執(zhí)行結(jié)果如：登錄成功、密碼錯誤等。【任務(wù)實施與準(zhǔn)備】步驟1.數(shù)據(jù)庫創(chuàng)建會員表（ums_member）及字段步驟2.創(chuàng)建實體類UmsMenber步驟3.創(chuàng)建UmsMemberController類并編寫注冊接口步驟3.1：創(chuàng)建會員注冊方法步驟3.2：創(chuàng)建UmsMemberService接口步驟3.3：創(chuàng)建UmsMemberServiceImpl類步驟3.4：創(chuàng)建UmsMemberMapper接口類步驟3.5：創(chuàng)建UmsMemberMapper.xml映射文件【拓展知識】一、修改密碼功能實現(xiàn)步驟1.在UmsMemberController類中編寫修改密碼的接口updatePassword；步驟2.編寫修改密碼的實現(xiàn)類。任務(wù)二前臺商品列表展示及詳情頁【預(yù)備知識】一、前臺商品列表展示及詳情頁的業(yè)務(wù)邏輯梳理前臺商品列表展示功能需要將商品信息查詢出來后返回到前端頁面，但是要注意商品列表查詢一般是有條件進(jìn)行排序的，比如按商品相關(guān)度、新品、銷量、價格從低到高等。另外查詢商品信息時需要將商品關(guān)鍵字、品牌信息、分類信息作為參數(shù)進(jìn)行查詢，然后判斷商品的上架狀態(tài)，只能將已上架的商品返回給瀏覽器端。獲取商品詳情頁信息的業(yè)務(wù)需要先根據(jù)商品ID查詢該商品的基本信息，如果查詢到的商品信息不為空，再獲取該商品的品牌信息，如果該商品的類別不為空，再查詢該商品的屬性與屬性值信息，然后獲取商品的SKU庫存信息后再根據(jù)商品的價格設(shè)置狀態(tài)設(shè)置商品的會員價格、階梯價格與滿減價格，最后再獲取該商品可用的優(yōu)惠券信息后返回給前端。二、前臺商品列表展示及詳情頁的服務(wù)端程序執(zhí)行流程1.用戶在瀏覽器端訪問商品列表或商品詳情頁時，前端程序會根據(jù)設(shè)置的服務(wù)器訪問地址訪問服務(wù)器端的程序接口；2.服務(wù)器端程序的PmsProductController類負(fù)責(zé)接收和響應(yīng)客戶端的請求，其中定義了前臺商品列表展示及詳情頁的接口。3.PmsProductController類中的接口調(diào)用了PmsProductService接口中的業(yè)務(wù)方法，PmsProductService接口中定義了前臺商品列表展示及詳情頁的業(yè)務(wù)方法，而PmsProductServiceImpl則實現(xiàn)了前臺商品列表展示及詳情頁的具體業(yè)務(wù)邏輯。4.PmsProductServiceImpl業(yè)務(wù)邏輯中調(diào)用了PmsProductMapper中的前臺商品列表展示及詳情頁的數(shù)據(jù)庫方法，而PmsProductMapper.xml映射文件則實現(xiàn)了前臺商品列表展示及詳情頁方法的SQL語句。5.執(zhí)行完業(yè)務(wù)方法后PmsProductController類將SQL執(zhí)行結(jié)果所返回的商品列表信息及商品詳情頁信息返回給瀏覽器端，瀏覽器端程序解析這些數(shù)據(jù)，將其展示在網(wǎng)頁中?！救蝿?wù)實施與準(zhǔn)備】一、前臺商品列表展示及詳情頁步驟步驟1.數(shù)據(jù)庫中創(chuàng)建商品信息表（pms_product）；步驟2.創(chuàng)建數(shù)據(jù)庫實體類（PmsProduct）；步驟3.創(chuàng)建查詢方法；步驟4.創(chuàng)建search方法；步驟5.實現(xiàn)search方法；步驟6.實現(xiàn)detail方法；步驟7.定義detail接口；步驟8.實現(xiàn)detail接口?！就卣怪R】一、動態(tài)代理Mapper每一個Mapper接口都有現(xiàn)基本的CRUD方法，為了不重復(fù)編寫CRUD方法，開發(fā)人員可以提前開發(fā)一個公共的接口并定義通用的接口方法，再創(chuàng)建一個新的Mapper時就可以直接繼承該公共接口，大大提高了代碼開發(fā)的效率。二、商城首頁功能實現(xiàn)商城的首頁需要獲取很多信息，比如首頁廣告、推薦品牌、秒殺信息、新品推薦、人氣推薦、推薦專題等，如果每一個模塊的信息獲取都要與服務(wù)器進(jìn)行一次交互，則會占用很多資源。在實際的開發(fā)中，將需要返回給首頁的信息進(jìn)行一次封裝，然后整體返回給前端則會節(jié)省很多的服務(wù)器開銷。任務(wù)三購物車管理【預(yù)備知識】一、前臺購物車管理的業(yè)務(wù)邏輯梳理添加商品到購物車功能的實現(xiàn)需要先判斷購物車中有沒有商品，如果沒有商品則直接新增商品到購物車，或者修改購物車信息，將新商品添加至購物車對象。獲取某個會員的購物車列表功能首先需要對查詢到的結(jié)果進(jìn)行分頁，因為用戶的購物車中商品可能過多，然后按照分頁或排序條件等進(jìn)行購物車中的商品查詢。獲取某個會員的購物車列表滿減信息需要根據(jù)商品的ID進(jìn)行滿減信息的查詢，然后將查詢的結(jié)果返回給前端。修改購物車中某個商品的數(shù)量功能需要先根據(jù)商品ID獲取該商品信息，然后再根據(jù)商品ID修改其數(shù)量，數(shù)量參數(shù)通過前端進(jìn)行傳遞。刪除購物車中的某個商品功能需要根據(jù)商品ID執(zhí)行刪除方法對應(yīng)的SQL語句，然后將刪除結(jié)果返回給前端。二、前臺商品列表展示及詳情頁的服務(wù)端程序執(zhí)行流程1.用戶在使用購物車管理相關(guān)功能時，前端程序會根據(jù)設(shè)置的服務(wù)器訪問地址訪問服務(wù)器端的程序接口；2.服務(wù)器端程序的OmsCartItemController類負(fù)責(zé)接收和響應(yīng)客戶端的請求，其中定義了前臺添加商品到購物車、獲取某個會員的購物車列表、獲取某個會員的購物車列表滿減信息、修改購物車中某個商品的數(shù)量、刪除購物車中的某個商品的接口。3.OmsCartItemController類中的接口調(diào)用了OmsCartItemService接口中的業(yè)務(wù)方法，OmsCartItemService接口中定義了前臺添加商品到購物車、獲取某個會員的購物車列表、獲取某個會員的購物車列表滿減信息、修改購物車中某個商品的數(shù)量、刪除購物車中的某個商品的業(yè)務(wù)方法，而OmsCartItemServiceImpl則實現(xiàn)了前臺添加商品到購物車、獲取某個會員的購物車列表、獲取某個會員的購物車列表滿減信息、修改購物車中某個商品的數(shù)量、刪除購物車中的某個商品的具體業(yè)務(wù)邏輯。4.OmsCartItemServiceImpl業(yè)務(wù)邏輯中調(diào)用了OmsCartItemMapper中的前臺添加商品到購物車、獲取某個會員的購物車列表、獲取某個會員的購物車列表滿減信息、修改購物車中某個商品的數(shù)量、刪除購物車中的某個商品的數(shù)據(jù)庫方法，而OmsCartItemMapper.xml映射文件則實現(xiàn)了前臺添加商品到購物車、獲取某個會員的購物車列表、獲取某個會員的購物車列表滿減信息、修改購物車中某個商品的數(shù)量、刪除購物車中的某個商品方法的SQL語句。5.執(zhí)行完業(yè)務(wù)方法后OmsCartItemController類將SQL執(zhí)行結(jié)果所返回的信息返回給瀏覽器端，瀏覽器端程序解析這些數(shù)據(jù)，將其展示在網(wǎng)頁中或執(zhí)行其他業(yè)務(wù)邏輯?！救蝿?wù)實施與準(zhǔn)備】步驟1.創(chuàng)建購物車表（oms_cart_item）；步驟2.創(chuàng)建實體類OmsCartItem；步驟3.編寫添加商品到購物車方法；步驟4.定義add接口；步驟5.實現(xiàn)add方法；步驟6.編寫獲取某個會員的購物車列表方法；步驟7.編寫list接口；步驟8.實現(xiàn)list接口；步驟9.編寫獲取某個會員的購物車列表滿減信息方法步驟10.定義selectFullList接口；步驟11.實現(xiàn)selectFullList方法；步驟12.編寫修改購物車中某個商品的數(shù)量方法；步驟13.定義updateQuantity方法；步驟14.實現(xiàn)updateQuantity接口；步驟15.編寫刪除購物車中的某個商品方法；步驟16.定義delete方法；步驟17.實現(xiàn)delete接口。【拓展知識】一、獲取包含促銷活動信息的購物車列表業(yè)務(wù)實現(xiàn)獲取包含促銷活動信息的購物車列表實現(xiàn)需要先獲取購物車中用戶選中的物品，然后根據(jù)這些物品計算購物車中的促銷活動信息。二、根據(jù)會員ID、商品ID和規(guī)格獲取購物車中商品根據(jù)會員ID、商品ID、規(guī)格獲取購物車中商品的業(yè)務(wù)實現(xiàn)需要先創(chuàng)建一個Map集合，然后將會員ID、商品ID、商品規(guī)格、刪除狀態(tài)Put到Map集合中，然后調(diào)用根據(jù)條件查詢購物車中商品信息的映射方法，再判斷查詢結(jié)果不為空的情況下將查詢結(jié)果返回給前端。任務(wù)四前臺訂單管理【預(yù)備知識】一、前臺訂單管理的業(yè)務(wù)邏輯梳理用戶購買時生成訂單確認(rèn)信息功能需要先判斷商品庫存是否足夠，如果足夠則減少商品庫存和SKU庫存，再根據(jù)商品合計、運費等計算應(yīng)付金額，再將其轉(zhuǎn)化為訂單信息插入數(shù)據(jù)庫。獲取用戶的訂單列表功能需要根據(jù)用戶ID和刪除狀態(tài)來進(jìn)行數(shù)據(jù)查詢，將查詢到的用戶訂單列表返回到前端進(jìn)行展示。獲取用戶訂單詳情功能需要以用戶的ID為參數(shù)，調(diào)用獲取訂單詳情的SQL語句，將查詢到的訂單信息返回給前端展示。取消訂單功能需要先查詢用戶是否未付款，如果未付款則修改訂單狀態(tài)為取消，然后根據(jù)訂單狀態(tài)恢復(fù)商品庫存，恢復(fù)優(yōu)惠券狀態(tài)，返還使用的積分，修改積分記錄。確認(rèn)收貨功能需要根據(jù)訂單ID修改訂單的狀態(tài)、確認(rèn)收貨狀態(tài)、確認(rèn)時間，然后添加贈送的積分，最后將確認(rèn)收貨狀態(tài)返回給前端。用戶刪除訂單功能需要根據(jù)訂單的ID，修改訂單的刪除狀態(tài)，然后將刪除結(jié)果返回給前端，前端不展示刪除狀態(tài)為“已刪除”的訂單。二、前臺訂單管理的服務(wù)端程序執(zhí)行流程1.用戶在使用訂單管理相關(guān)功能時，前端程序會根據(jù)設(shè)置的服務(wù)器訪問地址訪問服務(wù)器端的程序接口；2.服務(wù)器端程序的OmsOrderController類負(fù)責(zé)接收和響應(yīng)客戶端的請求，其中定義了前臺訂單管理的接口。3.OmsOrderController類中的接口調(diào)用了OmsOrderService接口中的業(yè)務(wù)方法，OmsOrderService接口中定義了前臺訂單管理的業(yè)務(wù)方法，而OmsOrderServiceImpl則實現(xiàn)了前臺訂單管理的具體業(yè)務(wù)邏輯。4.OmsOrderServiceImpl業(yè)務(wù)邏輯中調(diào)用了OmsOrderMapper中的前臺訂單管理的數(shù)據(jù)庫方法，而OmsOrderMapper.xml映射文件則實現(xiàn)了前臺訂單管理的SQL語句。5.執(zhí)行完業(yè)務(wù)方法后OmsOrderController類將SQL執(zhí)行結(jié)果所返回的信息返回給瀏覽器端，瀏覽器端程序解析這些數(shù)據(jù)，將其展示在網(wǎng)頁中或執(zhí)行其他業(yè)務(wù)邏輯?！救蝿?wù)實施與準(zhǔn)備】步驟1.數(shù)據(jù)庫創(chuàng)建訂單表（oms_order）；步驟2.創(chuàng)建實體類（OmsOrder）；步驟3.創(chuàng)建生成訂單確認(rèn)信息；步驟4.定義confirmOrder方法；步驟5.實現(xiàn)confirmOrder方法；步驟6.編寫按狀態(tài)分頁獲取用戶訂單列表方法；步驟7.定義list方法；步驟8.實現(xiàn)list方法；步驟9.編寫根據(jù)ID獲取訂單詳情方法；步驟10.定義getDetail方法；步驟11.實現(xiàn)getDetail方法；步驟12.編寫用戶取消訂單方法；步驟13.定義cancelOrder方法；步驟14.實現(xiàn)cancelOrder接口；步驟15.編寫用戶確認(rèn)收貨方法；步驟16.定義confirmReceiveOrder方法；步驟17.實現(xiàn)confirmReceiveOrder方法；步驟18.編寫用戶刪除訂單方法；步驟19.定義deleteOrder方法；步驟20.實現(xiàn)deleteOrder方法。【拓展知識】一、超時自動取消訂單功能訂單的超時取消功能實現(xiàn)需要先查詢超時及未支付的訂單及訂單詳情，然后再批量修改訂單狀態(tài)為交易取消，還原庫存、積分、優(yōu)惠券的使用狀態(tài)。二、自動確認(rèn)收貨功能自動確認(rèn)收貨功能的實現(xiàn)需要先查詢到達(dá)收貨時間的訂單，然后批量更改訂單狀態(tài)為交易成功，再贈送積分。任務(wù)五個人信息管理【預(yù)備知識】一、個人信息管理的業(yè)務(wù)邏輯梳理修改用戶信息需要以用戶的ID為參數(shù)，執(zhí)行修改用戶表的SQL語句，SQL語句中執(zhí)行修改操作,條件為用戶ID，要修改的值為前端傳遞來的目標(biāo)值，然后將修改結(jié)果返回給前端。個人頭像上傳需要獲取上傳頭像路徑，然后創(chuàng)建文件夾，調(diào)用靜態(tài)文件的上傳方法進(jìn)行圖片上傳，最后將上傳成功的圖片信息返回到前端。獲取用戶信息需要根據(jù)當(dāng)前的用戶ID進(jìn)行查詢，然后將獲取到的用戶信息返回給前端進(jìn)行展示。二、個人信息管理的服務(wù)端程序執(zhí)行流程1.用戶在使用個人信息管理相關(guān)功能時，前端程序會根據(jù)設(shè)置的服務(wù)器訪問地址訪問服務(wù)器端的程序接口；2.服務(wù)器端程序的OmsOrderController類負(fù)責(zé)接收和響應(yīng)客戶端的請求，其中定義了個人信息管理的接口。3.OmsOrderController類中的接口調(diào)用了OmsOrderService接口中的業(yè)務(wù)方法，OmsOrderService接口中定義了個人信息管理的業(yè)務(wù)方法，而OmsOrderServiceImpl則實現(xiàn)了個人信息管理的具體業(yè)務(wù)邏輯。4.OmsOrderServiceImpl業(yè)務(wù)邏輯中調(diào)用了OmsOrderMapper中的個人信息管理的數(shù)據(jù)庫方法，而OmsOrderMapper.xml映射文件則實現(xiàn)了個人信息管理的SQL語句。5.執(zhí)行完業(yè)務(wù)方法后OmsOrderController類將SQL執(zhí)行結(jié)果所返回的信息返回給瀏覽器端，瀏覽器端程序解析這些數(shù)據(jù)，將其展示在網(wǎng)頁中或