Java Web应用开发项目教程（第3版） 教案 拓展实践2-estoreSSM开发文档 2 首页和商品搜索

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