SSM框架项目【米米商城】26-37 商品界面的展示
发布时间
阅读量：
阅读量
开播时间：2022年3月3日
实现商品界面层
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";
}
}
AI写代码再写service包中的ProductInfoService接口
以及其实现类
package BUPT.service;
import BUPT.pojo.ProductInfo;
import java.util.List;
public interface ProductInfoService {
List<ProductInfo> getAll();
}
AI写代码 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());
}
}
AI写代码然后修改前端页面
在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> 商品管理 <span class="glyphicon glyphicon-play" style="color: white;"></span> </li>
</a>
AI写代码其中
target="myright"
AI写代码 <!--下部分右边-->
<div id="bright">
<iframe frameborder="0" scrolling="yes" name="myright" width="1235px" height="700px" ></iframe>
</div>
AI写代码为了避免在跳转至界面时导致页面重载而看不到管理系统左侧的导航栏。
此时单机商品管理就可以弹出显示界面了
但目前所有的信息都在一页，我们接下来要给他进行分页处理
分页处理
需要注意完善的几点
展示的数据条数固定为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);
}
AI写代码在实现类中加入该接口的重写，在SQL语句的书写时仍然采用example的方式。获取涉及元数据获取的操作流程与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;
}
AI写代码此时再去写controller
在ProductInfoAction中添加
//显示第一页的五条记录
@RequestMapping("/split")
public String split(HttpServletRequest request) {
PageInfo info = productInfoService.splitPage(1, PAGE_SIZE);
//这里setAttribute的name是根据前端来的，统一变量名
request.setAttribute("info", info);
return "product";
}
AI写代码通过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>
AI写代码这段语句涵盖了当前功能。当当前页面处于第一页时，该页面会呈现深灰色背景。当鼠标停留在第二、三、四页时，这些页面的背景颜色将变为浅灰色。
而右下角实现 总共 XX页，当前XX页
则是如下书写
<li style=" margin-left:150px;color: #0e90d2;height: 35px; line-height: 35px;">总共 <font
style="color:orange;">${info.pages}</font> 页
<c:if test="${info.pageNum!=0}">
当前 <font
style="color:orange;">${info.pageNum}</font> 页
</c:if>
<c:if test="${info.pageNum==0}">
当前 <font
style="color:orange;">1</font> 页
</c:if>
</li>
AI写代码获取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);
}
AI写代码然后在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>
AI写代码在重新加载时段完成了页面局部更新过程，请确保刷新地址无误。
同时，请确保所有链接均与上文保持一致。
@RequestMapping("/ajaxSplit")
AI写代码进行匹配
注意，我们还可以通过导航栏的左右箭头实现页面跳转
<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>
AI写代码结束时间：2022-03-03
全部评论 (0)
还没有任何评论哟~