Java Web應(yīng)用開發(fā)項(xiàng)目教程（第3版） 教案 拓展實(shí)踐2-estoreSSM開發(fā)文檔 2 首頁(yè)和商品搜索

2首頁(yè)和商品搜索1運(yùn)行效果1.1首頁(yè)首頁(yè)顯示全部商品，分頁(yè)。1.2商品搜索按照商品名進(jìn)行模糊查詢，對(duì)查詢結(jié)果分頁(yè)，下圖是根據(jù)“鞋”查詢的結(jié)果。2首頁(yè)布局系統(tǒng)首頁(yè)index.jsp(已提供)貼到pages文件夾下。首頁(yè)采用div布局，頁(yè)面代碼如下。在css的作用下會(huì)呈現(xiàn)上、左、中、下的效果。其中的“中部”即id為“content”的div將根據(jù)用戶不同的操作，動(dòng)態(tài)呈現(xiàn)不同的頁(yè)面。除了個(gè)別情況下的頁(yè)面整體刷新，絕大部分情況下，頁(yè)面僅有content–div更換內(nèi)容。將使用ajax局部刷新技術(shù)。例如：用戶點(diǎn)擊“搜索”時(shí)，content-div“顯示按商品名進(jìn)行模糊查詢的結(jié)果。用戶點(diǎn)擊“注冊(cè)”時(shí)，content-div“顯示注冊(cè)表單。3顯示全部商品和商品搜索的思路(1)首頁(yè)和商品搜索結(jié)果頁(yè)面均是對(duì)查詢結(jié)果進(jìn)行顯示，因此使用同一個(gè)頁(yè)面showProducts.jsp展示。(2)依靠search參數(shù)區(qū)分是首頁(yè)，還是商品搜索，如果search參數(shù)是空，則查詢所有商品，如果不是空，則是模糊查詢。(3)查詢所有商品和“搜索”，均先查詢count(*)，記下頁(yè)數(shù)、總記錄數(shù)（頁(yè)面需要顯示這些數(shù)據(jù)，查一次就行了）。然后轉(zhuǎn)發(fā)給showProductList方法。(4)showProductList方法，根據(jù)頁(yè)號(hào)計(jì)算此次查詢的起始記錄號(hào)，進(jìn)行分頁(yè)查詢。“select*fromtb_productlimita,5”表示查詢tb_product表，從第a個(gè)記錄開始取5條記錄。將查詢結(jié)果組織成list，存儲(chǔ)在request中，轉(zhuǎn)發(fā)給showProducts.jsp頁(yè)面顯示。(5)showProducts.jsp頁(yè)面遍歷list，顯示在頁(yè)面中。當(dāng)用戶點(diǎn)“上一頁(yè)”“下一頁(yè)”時(shí)，將新頁(yè)號(hào)提交到showProductList方法，再次查詢下一組數(shù)據(jù)。4動(dòng)態(tài)更新content–div內(nèi)容的思路所有請(qǐng)求均通過調(diào)用js函數(shù)來(lái)提交，使用ajax從服務(wù)器取得數(shù)據(jù)，設(shè)置到div中，參考示例如下：functionshowAllProducts(){ $.ajax({ url:'showAllProducts.do',//查詢所有商品 type:'get', success:function(responseText){//responseText里存儲(chǔ)的是查詢到的所有商品頁(yè)面 $('#content').html(responseText); //將所有商品頁(yè)面嵌入divcontent中 } }); }5Product實(shí)體類Product實(shí)體類和tb_product表對(duì)應(yīng)，注意該類的屬性命名，由于啟動(dòng)了mybatis駝峰映射，字段名是a_xyz_mn，屬性名必須叫做aXyzMn，寫完后請(qǐng)仔細(xì)核對(duì)。Set和get方法請(qǐng)自行生成。6ProductDao接口ProductDao包含三個(gè)方法：(1)根據(jù)商品名、起始記錄號(hào)、記錄數(shù)進(jìn)行查詢，如果沒有商品名，查詢所有商品(2)按照商品id，查詢商品(3)根據(jù)商品名進(jìn)行查詢，返回記錄數(shù)，如果沒有商品名，查詢所有商品數(shù)量這個(gè)映射文件對(duì)應(yīng)的接口7Product.xml這個(gè)映射文件對(duì)應(yīng)的接口模糊查詢的第二種寫法返回從第start個(gè)記錄開始的limit條記錄如果用戶名不為空，添加模糊查詢條件接口里的方法名模糊查詢的第二種寫法返回從第start個(gè)記錄開始的limit條記錄如果用戶名不為空，添加模糊查詢條件接口里的方法名8ProductService接口包含三個(gè)方法，和dao里的三個(gè)方法對(duì)應(yīng)。9ProductServiceImpl類ProductServiceImpl類實(shí)現(xiàn)ProductService接口，注意為其加@Service注解，以及自動(dòng)注入ProductDao。11ProductController類每頁(yè)記錄數(shù)可以自行調(diào)整每頁(yè)記錄數(shù)可以自行調(diào)整將查詢中的商品列表存在request中，showProducts頁(yè)面可以取得。將查詢中的商品列表存在request中，showProducts頁(yè)面可以取得。Base元素可以設(shè)置頁(yè)面中所有相對(duì)路徑的基準(zhǔn)，href中的el表達(dá)式表示web應(yīng)用的根目錄。本例中就是/estore-ssm/。Base可以作用在超鏈接、圖片、css鏈接，Base元素可以設(shè)置頁(yè)面中所有相對(duì)路徑的基準(zhǔn)，href中的el表達(dá)式表示web應(yīng)用的根目錄。本例中就是/estore-ssm/。Base可以作用在超鏈接、圖片、css鏈接，js鏈接，表單提交路徑等位置。（jsp中的include，forward等不適用）加上這句后，免去了到處寫絕對(duì)路徑的麻煩。文檔中使用相對(duì)路徑只要相對(duì)于應(yīng)用根目錄寫就行了，而且不會(huì)出現(xiàn)相對(duì)路徑疊加問題。查詢所有商品和商品搜索的請(qǐng)求均進(jìn)入此方法，先算記錄數(shù)和總頁(yè)數(shù)轉(zhuǎn)發(fā)到showProductList.do，將頁(yè)數(shù)和總記錄數(shù)傳過去，頁(yè)號(hào)為1商品搜索的search表單項(xiàng)傳過來(lái)，如果為空，則是查詢所有商品為index.jsp補(bǔ)充幾個(gè)js函數(shù)，詳見注釋。13web.xml的welcome頁(yè)面Web.xml配置起始頁(yè)面為index.do，用戶輸入:8080/estore-ssm時(shí)，會(huì)提交到:8080/estore-ssm/index.do。首頁(yè)展示流程如下：index.do由ProductController的index方法處理，跳轉(zhuǎn)到index.jsp。index.jsp頁(yè)面加載后（$(document).ready），調(diào)用js函數(shù)showAllProducts，提交請(qǐng)求'showAllProducts.do'，查詢所商品，結(jié)果嵌入div。14商品搜索表單商品搜索findProductsByName.jsp，表單提交到j(luò)s函數(shù)searchProducts，由ajax發(fā)送請(qǐng)求，表單本身不直接提交。查詢結(jié)果顯示在div（不完全刷新index.jsp）。查詢關(guān)鍵字表單項(xiàng)search，js里會(huì)按id查詢關(guān)鍵字表單項(xiàng)search，js里會(huì)按id取值，作為url的參數(shù)15head欄“首頁(yè)”超鏈接“首頁(yè)”超鏈接提交到j(luò)s函數(shù)showAllProducts()，查詢所有商品，結(jié)果顯示在div（不完全刷新index.jsp）。16商品展示頁(yè)面showProducts.jspshowProducts.jsp已提供，將其貼到webRoot/pages/product文件夾下。16.1jsp頁(yè)面開頭引入jstl標(biāo)簽庫(kù)showProducts.jsp頁(yè)面的html部分已經(jīng)給出，功能實(shí)現(xiàn)自己補(bǔ)充，jsp文件中的java代碼將全部由el和jstl實(shí)現(xiàn)。引入jstl標(biāo)簽庫(kù)引入jstl標(biāo)簽庫(kù)16.2查詢結(jié)果展示先判斷查詢結(jié)果是不是空的，如果是空的，提示用戶。如果不是空，使用forEach循環(huán)，每一件商品的畫一行，顯示商品的各項(xiàng)信息。${productList}表示取出某一范圍中名稱為productList的屬性值。如果沒有指定哪一個(gè)范圍的productList，所以它會(huì)依序從Page、Request、Session、Application范圍查找。假如途中找到productList，就直接回傳，不再繼續(xù)找下去，但是假如全部的范圍都沒有找到時(shí)，就回傳null。如果想明確指定從request中取屬性，可以使用${requestScope.productList}如果想明確指定從session中取屬性，可以使用${sessionScope.productList}如果productList長(zhǎng)度為0，提示沒有符合條件的商品如果productList長(zhǎng)度為0，提示沒有符合條件的商品顯示商品的名字，商品圖片名要拼接到img路徑中。顯示商品的名字，商品圖片名要拼接到img路徑中。如果discount是0，顯示市場(chǎng)價(jià)（原價(jià)）。如果是1，顯示市場(chǎng)價(jià)（原價(jià)）和銷售價(jià)（現(xiàn)價(jià)），對(duì)productList列表進(jìn)行循環(huán)，每次取出一個(gè)商品對(duì)象，命名為product16.3分頁(yè)導(dǎo)航分頁(yè)導(dǎo)航欄，從請(qǐng)求參數(shù)中取出總頁(yè)數(shù)、總記錄數(shù)、當(dāng)前頁(yè)號(hào)顯示在頁(yè)面上。點(diǎn)擊“下一頁(yè)”時(shí)將頁(yè)號(hào)+1，點(diǎn)擊“上一頁(yè)”時(shí)將頁(yè)號(hào)-1，調(diào)用js函數(shù)nextAndPrevious。調(diào)用js函數(shù)nextAndPrevious，傳遞4個(gè)參數(shù)這里用的都是${param.***}，后面介紹了${調(diào)用js函數(shù)nextAndPrevious，傳遞4個(gè)參數(shù)這里用的都是${param.***}，后面介紹了${param.***}和${***}的區(qū)別，請(qǐng)仔細(xì)閱讀${param.pageNum}和${pageNum}的區(qū)別如下：（1）${pageNum}相當(dāng)于：request.getAttribute(“pageNum”);//以request存儲(chǔ)屬性為例session.getAttribute(“pageNum”);//以session存儲(chǔ)屬性為例使用下面語(yǔ)句放入的屬性都可以使用${pageNum}取出：request.addAttribute(“pageNum”,20);session.addAttribute(“pageNum”,20);controller里的：modelAndView.addObject(“pageNum”,20);（2）${param.pageNum}相當(dāng)于request.ge