SSM框架项目【米米商城】26-37 商品界面的展示

开始时间：2022-03-03
课程链接：米米商城

实现商品界面层

controller中设置
ProductInfoAction

package BUPT.controller;

import BUPT.pojo.ProductInfo;
import BUPT.service.ProductInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@Controller
@RequestMapping("/prod")
public class ProductInfoAction {
    //显示全部商品不分页
    @Autowired
    ProductInfoService productInfoService;

    @RequestMapping("/getAll")
    public String getAll(HttpServletRequest request) {
        List<ProductInfo> list = productInfoService.getAll();
        request.setAttribute("list",list);
        return "product";
    }
}

再写service包中的ProductInfoService接口
以及其实现类

package BUPT.service;

import BUPT.pojo.ProductInfo;

import java.util.List;

public interface ProductInfoService {
    List<ProductInfo> getAll();
}

package BUPT.service.impl;

import BUPT.mapper.ProductInfoMapper;
import BUPT.pojo.ProductInfo;
import BUPT.pojo.ProductInfoExample;
import BUPT.service.ProductInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductInfoServiceImpl implements ProductInfoService {
    //在业务逻辑层中，一定会有数据访问层的对象，Spring来new出来
    @Autowired
    ProductInfoMapper productInfoMapper;

    @Override
    public List<ProductInfo> getAll() {
        //没有条件直接new一个放进去就行
        return productInfoMapper.selectByExample(new ProductInfoExample());
    }
}

然后修改前端页面
在main.jsp层里面设置跳转位置到getAll.action

<a href="${pageContext.request.contextPath}/prod/getAll.action" target="myright" >
								<li class="two"><span class="glyphicon glyphicon-book" style="color: white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;商品管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
							</a>

其中

target="myright"

<!--下部分右边-->
<div id="bright">
<iframe frameborder="0" scrolling="yes" name="myright" width="1235px" height="700px" ></iframe>
</div>

为了防止跳转界面后将整个页面刷新，就看不到管理系统左侧的导航栏了

此时单机商品管理就可以弹出显示界面了


但目前所有的信息都在一页，我们接下来要给他进行分页处理

分页处理

所需要注意完善的几点
当前页显示的5条数据的集合
页码的导航显示（总共多少页）
当前是第几页
当前页的页码背景显示
每页显示5条数据

工欲善其事必先利其器，我们上面提到过一个插件 pagehelper
这里就可以用上了，去看他的源码，这些我们需要完成的内容都可以灵活实现
我们在ProductInfoService中再创一个接口，用于实现分页内容的封装，获取封装对象

package BUPT.service;

import BUPT.pojo.ProductInfo;
import com.github.pagehelper.PageInfo;

import java.util.List;

public interface ProductInfoService {
    List<ProductInfo> getAll();

    PageInfo splitPage(int pageNum, int pageSize);
}

实现类里面也添加该接口的重写，SQL语句的书写还是使用example语句来写
获取语句和接收返回list对象的过程和Admin那一块基本一致

    @Override
    public PageInfo splitPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        ProductInfoExample example = new ProductInfoExample();

        //设置排序 按主键大小来排
        //select * from product_info order by p_id desc;
        example.setOrderByClause("p_id desc");
        List<ProductInfo> list = productInfoMapper.selectByExample(example);
        //将查到的集合封装金pageInfo对象中
        //给了一个list后就封装到pageInfo里面
        PageInfo<ProductInfo> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }

此时再去写controller
在ProductInfoAction中添加

    //显示第一页的五条记录
    @RequestMapping("/split")
    public String split(HttpServletRequest request) {
        PageInfo info = productInfoService.splitPage(1, PAGE_SIZE);
        //这里setAttribute的name是根据前端来的，统一变量名
        request.setAttribute("info", info);
        return "product";
    }

通过request将info的内容传到product里面

在product.jsp中实现
1 2 3 4 页 的显示

<c:forEach begin="1" end="${info.pages}" var="i">
    <c:if test="${info.pageNum==i}">
        <li>
            <a href="javascript:ajaxsplit(${i})"
               style="background-color: grey">${i}</a>
        </li>
    </c:if>
    <c:if test="${info.pageNum!=i}">
        <li>
            <a href="javascript:ajaxsplit(${i})">${i}</a>
        </li>
    </c:if>
</c:forEach>

这段语句中，实现的是
如果当前显示的是第一页，那么第一页是深灰色
如果鼠标悬停在了第二页第三页或第四页上，那么该数字背景会呈现浅灰色

而右下角实现 总共 XX页，当前XX页
则是如下书写

<li style=" margin-left:150px;color: #0e90d2;height: 35px; line-height: 35px;">总共&nbsp;&nbsp;&nbsp;<font
		style="color:orange;">${info.pages}</font>&nbsp;&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<c:if test="${info.pageNum!=0}">
		当前&nbsp;&nbsp;&nbsp;<font
		style="color:orange;">${info.pageNum}</font>&nbsp;&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	</c:if>
	<c:if test="${info.pageNum==0}">
		当前&nbsp;&nbsp;&nbsp;<font
		style="color:orange;">1</font>&nbsp;&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	</c:if>
</li>

获取pages和pageNum，得到这两个数据

翻页处理

当选中的页码发生变化时，实现数据显示页的局部刷新，对应的导航条也要刷新


继续在ProductInfoAction中添加

    //Ajax翻页处理
    @ResponseBody
    @RequestMapping("/ajaxSplit")
    public void ajaxSplit(int page, HttpSession session) {
        PageInfo info = productInfoService.splitPage(page, PAGE_SIZE);
        //刷新时session中携带的info
        session.setAttribute("info",info);
    }

然后在product.jsp中
实现分页的Ajax代码

<!--分页的AJAX实现-->
<script type="text/javascript">
    function ajaxsplit(page) {
        //异步ajax分页请求
        $.ajax({
            url: "${pageContext.request.contextPath}/prod/ajaxSplit.action",
            data: {"page": page},
            type: "post",
            success: function () {
                //重新加载分页显示的组件table
                //location.href---->http://localhost:8080/admin/login.action
                $("#table").load("http://localhost:8080/mimi_SSM/admin/product.jsp #table");
            }
        })
    };

</script>

这里实现了重新加载时的页面局部刷新，注意刷新地址一定要正确。
以及URL要和上面

@RequestMapping("/ajaxSplit")

进行匹配

注意，我们还可以通过导航栏的左右箭头实现页面跳转

<li>

    <a href="javascript:ajaxsplit(${info.prePage})" aria-label="Previous">

        <span aria-hidden="true">«</span></a>
</li>
<c:forEach begin="1" end="${info.pages}" var="i">
    <c:if test="${info.pageNum==i}">
        <li>
            <a href="javascript:ajaxsplit(${i})"
               style="background-color: grey">${i}</a>
        </li>
    </c:if>
    <c:if test="${info.pageNum!=i}">
        <li>
            <a href="javascript:ajaxsplit(${i})">${i}</a>
        </li>
    </c:if>

</c:forEach>
<li>
    <a href="javascript:ajaxsplit(${info.nextPage})" aria-label="Next">
        <span aria-hidden="true">»</span></a>
</li>

结束时间：2022-03-03