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