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

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

因为要展示的订单有发货和未发货两种，故在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借口中的方法，并设置相应的参数类型和返回类型。

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