开始时间: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> 商品管理 <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;">总共 <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>
获取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