数据库订单数据读取到前端展示

最近做了一个将数据库中的订单信息读取到前端展示的功能，在此简述之。

因为要展示的订单有发货和未发货两种，故在jsp页面中用两个div，以foreach循环显示每一个订单以及其中的商品属性。代码如下所示：

<div class="content">

<div class="lists">
<c:forEach items="${findList}" var="a">
<div class="info">
<div class="order">
<span class = "orderSn num">订单编号: ${a.orderSn}</span>
<span class="state" >待发货</span>
</div>
<div class="info-material">
<c:forEach items="${a.materialDetailList}" var="b">
<div class="pic_one">
<img src="${b.imageUrl}"/>
<div class="info_one">
<span class="name">${b.materialName}</span>
<span class="money">${b.price}</span>
</div>
<div class="info_two">
<span class="height">${b.quantity}</span>g/袋
<span class="count">x${b.materialNum}</span>
</div>
</div>
</c:forEach>
</div>
<div class="details">
<p class = "details_one">下单时间:${a.createTime}</p>
<p class = "details_two">共${a.materialNums}件商品  运费合计 ¥${a.freightPrice}</p>
<p class = "details_three">实付 ¥${a.orderPrice}</p>
</div>
</div>
</c:forEach>
</div>

<div class="lists" style="display:none;">
<c:forEach items="${findLists}" var="c">
<div class="info">
<div class="order">
<span class = "orderSn num">订单编号: ${c.orderSn}</span>
<span class="state" style="color: #1DCF57;">已发货</span>
</div>
<div class="info-material">
<c:forEach items="${c.materialDetailList}" var="d">
<div class="pic_one">
<img src="${d.imageUrl}"/>
<div class="info_one">
<span class="name">${d.materialName}</span>
<span class="money">¥${d.price}</span>
</div>
<div class="info_two">
<span class="height">净含量:${d.quantity}g/袋</span>
<span class="count">x${d.materialNum}</span>
</div>
</div>
</c:forEach>
</div>
<div class="details">
<p class = "details_one">物流单号:${c.logisticsOrder}(${c.logisticsName})</p>
<p class = "details_two">发货时间:${c.createTime}</p>
<p class = "details_three">共${c.materialNums}件商品运费合计 ¥${c.freightPrice}</p>
<p class = "details_four">实付 ¥${c.orderPrice}</p>
</div>
</div>
</c:forEach>
</div>

</div>

其中findlist和findlists就是从后端用json传来的数据库订单数据，一个代表已发货，一个代表未发货，其中前端展示的数据和样式有一些区别，故写成了两段。

后端架构依旧是spring mvc + mybatis，请求到达controller类后，通过service类进行逻辑处理，再通过mapper.xml映射到数据库中取得需要展示的数据。

Controller类的写法都大同小异，进来之后会验证这个用户是否在session中，如果在的话可以进入我的订单页面，如果没有会转入登录界面。如果用户存在，则在其中调用sevice接口的方法，将订单信息存到一个list里去，此list的类型为这个流程定义的实体类，再将此list存入model里，最后用return返回ModelAndView将数据传到前端去。代码如下所示：

public ModelAndView getUndeliverMaterial(Material material,Model model,HttpServletRequest request){

String code = request.getParameter("code");
//System.out.println("byNewMachine code :"+code);
User u = this.getUser(request.getSession());

if(u!=null&&!StringUtil.isEmpty(u.getPhone())){
material.setPhone(u.getPhone());
List<Material> findList = materialService.getUndeliverMaterial(material);
List<Material> findLists = materialService.getDeliverMaterial(material);

model.addAttribute("findList", findList);
model.addAttribute("findLists", findLists);

return new ModelAndView("My-material");
}else{
return new ModelAndView(" ");
}
}
}

Sevice类为一个接口，其中声明了逻辑实现的各种方法，由对应的SeviceImpl来实现，这边我为一个findlist写了两个方法，一个方法是取整个订单的数据，一个用循环取出订单中的每一个商品的各种属性。这两个方法都是调用mapper接口中的方法来取数据库的相应数据。

Mapper也是接口，与mapper.xml中每一个sql语句对应，取出需要展示的数据。mapper.xml与数据库sql语句的写法大同小异，就是每个语句写成一个段，依照相应的功能使用select或者update等，其中id就是mapper借口中的方法，并设置相应的参数类型和返回类型。

通过一个这样的流程，就可将数据库相应的订单信息展示到前端中。