其乐后台管理系统(五)--订单管理模块

前言:hello!!!在前几天给你们介绍到了-----门店管理模块,今天的订单模块和管理模块其实相差无几,实现方式能够说几乎相同!!不过仍是得给你们好好的讲解一下订单模块,由于此次订单模块的前端部分将会为你们讲到两个特别的标签,也让你们对项目有更深的了解。javascript

其乐蛋糕店后台管理系统 地址
Github--其乐后台管理系统源码 https://github.com/XINGGou/qile
其乐后台管理系统(一)--项目介绍 http://www.javashuo.com/article/p-gbpajmha-dd.html
其乐后台管理系统(二)--整合三大框架(spring+springmvc+mybatis) http://www.javashuo.com/article/p-nzkhhnxu-dp.html
其乐后台管理系统(三)--整合mybatis框架(三大框架搭建成功) http://www.javashuo.com/article/p-ozfmlifj-ee.html
其乐后台管理系统(四)--门店管理模块 http://www.javashuo.com/article/p-ragyplqr-cu.html
其乐后台管理系统(五)--订单管理系统 http://www.javashuo.com/article/p-oqpdbazv-en.html

后端部分

1.建立com.it.pojo.Order实体类,用于封装全部的订单信息

package com.it.pojo;

import java.util.Date;

/**
 * 订单信息类, 用于封装订单信息
 */
public class Order {
	//1.声明属性
	private Integer id;		//订单id
	private Integer doorId;	//门店id
	private String orderNo; //订单编号
	private String orderType;//订单类型(巧克力蛋糕/奶茶/咖啡等)
	private Integer pnum;	//用餐人数
	private String cashier;	//收银员
	private Date orderTime;	//下单时间
	private Date payTime;	//支付时间
	private String payType;	//支付类型(微信支付/支付宝支付)
	private Double price;	//支付金额
	
	//2.提供getter和setter方法
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getDoorId() {
		return doorId;
	}
	public void setDoorId(Integer doorId) {
		this.doorId = doorId;
	}
	public String getOrderNo() {
		return orderNo;
	}
	public void setOrderNo(String orderNo) {
		this.orderNo = orderNo;
	}
	public String getOrderType() {
		return orderType;
	}
	public void setOrderType(String orderType) {
		this.orderType = orderType;
	}
	public Integer getPnum() {
		return pnum;
	}
	public void setPnum(Integer pnum) {
		this.pnum = pnum;
	}
	public String getCashier() {
		return cashier;
	}
	public void setCashier(String cashier) {
		this.cashier = cashier;
	}
	public Date getOrderTime() {
		return orderTime;
	}
	public void setOrderTime(Date orderTime) {
		this.orderTime = orderTime;
	}
	public Date getPayTime() {
		return payTime;
	}
	public void setPayTime(Date payTime) {
		this.payTime = payTime;
	}
	public String getPayType() {
		return payType;
	}
	public void setPayType(String payType) {
		this.payType = payType;
	}
	public Double getPrice() {
		return price;
	}
	public void setPrice(Double price) {
		this.price = price;
	}
	
	//3.重写toString
	@Override
	public String toString() {
		return "Order [id=" + id + ", doorId=" + doorId + ", orderNo=" + orderNo + ", orderType=" + orderType
				+ ", pnum=" + pnum + ", cashier=" + cashier + ", orderTime=" + orderTime + ", payTime=" + payTime
				+ ", payType=" + payType + ", price=" + price + "]";
	}
}

2.在resources/mybatis/mapper 目录下建立Order的映射文件---OrderMapper.xml

什么是resultmapcss

  • resultMap 是为了解决 当数据表中的列名和pojo类中的属性名不一致的问题
  • resultMap 中配置了数据表中的列pojo类中的属性之间的对应关系 (也就是映射)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
	PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- 订单表的映射文件	namespace值为对应接口的全路径 -->
<mapper namespace="com.it.mapper.OrderMapper">
	<!-- 
		resultMap 是为了解决 当数据表中的列名和
			pojo类中的属性名不一致的问题
		resultMap 中配置了 数据表中的列 和 pojo类
			中的属性 之间的对应关系 (也就是映射)
	 -->
	<resultMap type="com.it.pojo.Order"
				id="orderRM">
		<id column="id" property="id"/>
		<result column="door_id" property="doorId" />
		<result column="order_no" property="orderNo"/>
		<result column="order_type" property="orderType"/>
		<result column="pnum" property="pnum"/>
		<result column="cashier" property="cashier"/>
		<result column="order_time" property="orderTime"/>
		<result column="pay_time" property="payTime"/>
		<result column="pay_type" property="payType"/>
		<result column="price" property="price"/>
	</resultMap>
	
	<!-- 1.查询全部订单
		tb_order表中的列和Order类中的属性名
		不一致会致使数据封装失败!!!
		id			id		setId()
		door_id		doorId	setDoorId()
		若是表中的列和pojo类中的属性名不一致
		这里须要将resultType改成resultMap
	 -->
	<select id="findAll" resultMap="orderRM">
		select * from tb_order
	</select>
	
	<!-- 2.根据id删除订单信息 -->
	<delete id="deleteById">
		delete from tb_order
		where id=#{id}
	</delete>
	
	<insert id="addOrder">
		insert into tb_order
		values(#{id},#{doorId},#{orderNo},
		#{orderType},#{pnum},#{cashier},
		#{orderTime},#{payTime},#{payType},
		#{price})
	</insert>
	
	<!-- 4.根据id查询订单信息 -->
	<select id="findById" resultMap="orderRM">
		select * from tb_order
		where id=#{id}
	</select>
	
	<!-- 5.根据id修改订单信息 -->
	<update id="updateById">
		update tb_order set door_id=#{doorId},
		order_no=#{orderNo},order_type=#{orderType},
		pnum=#{pnum},cashier=#{cashier},
		order_time=#{orderTime},pay_time=#{payTime},
		pay_type=#{payType},price=#{price}
		where id=#{id}
	</update>
	
</mapper>

3.OrderMapper的代码实现

在前文我对mapper层的两种基本写法有说明如若想要了解请点击--门店管理模块html

package com.it.mapper;

import java.util.List;

import com.it.pojo.Order;

public interface OrderMapper {

	/**
	 * 1.查询全部订单信息
	 * @return
	 */
	List<Order> findAll();
	/**
	 * 2.根据id删除订单信息
	 * @param id
	 */
	void deleteById(Integer id);
	
	/**
	 * 3.添加订单信息
	 * @param order
	 */
	void addOrder(Order order);
	
	/**
	 * 4.1.根据id查询订单信息
	 * @param id
	 * @return
	 */
	Order findById(Integer id);
	/**
	 * 4.2.根据id修改订单信息
	 * @param order
	 */
	void updateById(Order order);
	
}

4.service层代码实现

1.建立DoorService接口,并添加全部(增删改查)订单信息的方法

记住不要写成class了。这里是interface前端

package com.it.service;

import java.util.List;

import com.it.pojo.Order;

public interface OrderService {
	/**
	 * 1.查询全部订单信息
	 * @return
	 */
	List<Order> findAll();
	
	/**
	 * 2.根据id删除订单信息
	 * @param id
	 */
	void deleteById(Integer id);
	
	/**
	 * 3.添加订单信息
	 * @param order
	 */
	void addOrder(Order order);
	
	/**
	 * 4.1.根据id查询订单信息
	 * @param id
	 * @return 
	 */
	Order findById(Integer id);
	
	/**
	 * 4.2.根据id修改订单信息
	 * @param order
	 */
	void updateById(Order order);

}

2.建立OrderService接口的实现类--OrderServiceImpl.java,实现接口中的增删改查方法

package com.it.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.it.mapper.OrderMapper;
import com.it.pojo.Order;

/**
 * @Service 
 * 做用(1): 标识当前类属于service层
 * 做用(2): spring会扫描service包下全部带有
 * @Service注解的类, 将类注册到spring容器中
 * (即由spring容器建立实例)
 */
@Service
public class OrderServiceImpl implements OrderService {
	@Autowired	//由spring建立对象并为变量赋值
	OrderMapper orderMapper;
	
	@Override
	public List<Order> findAll() {
		//1.调用orderMapper的findAll方法查询全部订单
		List<Order> list = orderMapper.findAll();
		return list;
	}

	@Override
	public void deleteById(Integer id) {
		//1.调用OrderMapper的deleteById方法
			//根据id删除订单信息
		orderMapper.deleteById(id);
	}

	@Override
	public void addOrder(Order order) {
		//1.调用OrderMapper的addOrder方法
		orderMapper.addOrder(order);
	}

	@Override
	public Order findById(Integer id) {
		//1.调用OrderMapper的findById方法
		Order order = orderMapper.findById(id);
		
		return order;
	}

	@Override
	public void updateById(Order order) {
		//1.调用OrderMapper中的updateById方法
		orderMapper.updateById(order);
	}
}

5.controller层的代码实现

1.建立OrderController类

我在代码中,自认为把每一句代码都解释非常详细,故不在这上面叭叭了!!!java

package com.it.controller;

import java.text.SimpleDateFormat;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;

import com.it.pojo.Door;
import com.it.pojo.Order;
import com.it.service.DoorService;
import com.it.service.OrderService;

/**
 * @Controller 
 * 做用(1): 标识当前类属于controller层
 * 做用(2): spring会扫描Controller包下全部带有
 * @Controller注解的类, 将类注册到spring容器中
 * (即由spring容器建立实例)
 */
@Controller
public class OrderController {
	
	@Autowired	//由spring建立实例并为变量赋值
	OrderService orderService;
	@Autowired	//由spring建立实例并为变量赋值
	DoorService doorService;
	
	/** 1.查询全部订单信息 */
	@RequestMapping("/orderList")
	public String orderList(Model model){
		//1.调用OrderService层的findAll方法查询全部订单
		List<Order> list = orderService.findAll();
		//2.将全部订单的list集合存入Model中(存入request域中)
		model.addAttribute("list", list);
		//3.查询全部门店
		List<Door> doorlist = doorService.findAll();
		//4.将全部订单的list集合存入Model中(存入request域中)
		model.addAttribute("doorList", doorlist);
		//5.转向订单列表页面
		return "order_list";
	}
	
	/** 2.根据id删除订单信息 */
	@RequestMapping("/orderDelete")
	public String orderDelete(Integer id){
		//1.调用OrderService的 deleteById方法
			//根据id删除订单信息
		orderService.deleteById(id);
		//2.转向 查询全部订单的方法
		return "redirect:/orderList";
	}
	
	/** 3.查询全部门店并跳转到订单新增页面 */
	@RequestMapping("/findAllDoorToOrder_add")
	public String toOrder_Add(Model model){
		//1.调用doorService的findAll方法查询全部门店
		List<Door> list = doorService.findAll();
		//2.将全部门店列表存入Model中(存到了Request域中)
		model.addAttribute("list", list);
		//3.转向订单新增页面
		return "order_add";
	}
	
	/** 4.新增订单 */
	@RequestMapping("/orderAdd")
	public String orderAdd(Order order){
		//1.调用OrderService的addOrder方法,添加订单信息
		orderService.addOrder(order);
		
		//转向 查询全部订单的方法
		return "redirect:/orderList";
	}
	
	/** 4.1.根据id查询订单信息 */
	@RequestMapping("/orderInfo")
	public String orderInfo(Integer id, Model model){
		//1.调用OrderService的findById
			//根据id查询订单信息
		Order order = orderService.findById(id);
		//2.将订单信息存入Model中
		model.addAttribute("order", order);
		
		//3.调用DoorService的findAll方法查询全部门店
		List<Door> list = doorService.findAll();
		//4.将全部门店列表存入Model中
		model.addAttribute("list", list);
		
		//5.转向 订单修改页面
		return "order_update";
	}
	
	/** 4.2.根据id修改订单信息 */
	@RequestMapping("/orderUpdate")
	public String orderUpdate(Order order){
		//1.调用OrderService的updateById()
		orderService.updateById(order);
		// 转向 查询全部订单的方法
		return "redirect:/orderList";
	}
	
	/* 自定义日期转换格式 */
	@InitBinder
	public void InitBinder (ServletRequestDataBinder binder){
		binder.registerCustomEditor(java.util.Date.class, 
			new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true)
		);
	}

}

6.扩展一下,controller层和service层的不一样写法

除了上文所写的那样,其实为了方便,咱们能够先写controller层,在使用service层方法时,若是没有该方法,再行点击,让其自动建立OrderService中的方法,在保存OrderService类,此时Impl类会报错,而后直接alt+斜杠(/)>>enter Impl类中将会自动重写该方法!!!(有兴趣能够本身去试试!!)git

前端

1.order_list.jsp

在今天的页面中,最为特殊的是两个标签一个是<c:forEach><fmt:formatDate>这两个标签github

首先讲讲<c:forEach>的一些重要属性(经常使用):

  • 在使用以前须要对其进行引入 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>web

  • var:迭代参数的名称。在迭代体中可使用的变量的名称,用来表示每个迭代变量。类型为String。spring

  • items:要进行迭代的集合。对于它所支持的类型将在下面进行讲解。后端

  • varStatus:迭代变量的名称,用来表示迭代的状态,能够访问到迭代自身的信息。

  • begin:若是指定了items,那么迭代就从items[begin]开始进行迭代;若是没有指定items,那么就从begin开始迭代。它的类型为整数。

  • end:若是指定了items,那么就在items[end]结束迭代;若是没有指定items,那么就在end结束迭代。它的类型也为整数。

  • step:迭代的步长。

其次是< fmt:formatDate >的用法

  • 引入JSTL标签库中的fmt <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

  • 1.显示星期几---<fmt:formatDate value="${date}" pattern="E"/>

  • 2.显示年月日 时分秒---<fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm:ss"/>

<%@ page pageEncoding="utf-8"%>
<%-- 引入JSTL标签库 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<title>订单管理</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "微软雅黑"; background-color: #EDEDED; }
	h2{ text-align: center;}
	table{ width:96%; margin: 0 auto; text-align: center; border-collapse:collapse; font-size:16px;}
	td, th{ padding: 5px;}
	th{ background-color: #DCDCDC; width:120px; }
	th.width-40{ width: 40px; }
	th.width-50{ width: 50px; }
	th.width-64{ width: 64px; }
	th.width-80{ width: 80px; }
	th.width-120{ width: 100px; }
	hr{ margin-bottom:20px; border:1px solid #aaa; }
	#add-order{text-align:center;font-size:20px;}
</style>
	
<script type="text/javascript">
	
</script>
</head>
<body>
	<h2>订单管理</h2>
	<div id="add-order">
		<a href="findAllDoorToOrder_add" target="rightFrame">新增订单</a>
	</div>
	<hr/>
	<table border="1">
		<tr>
			<th class="width-40">序号</th>
			<th class="width-120">所属门店</th>
			<th class="width-50">订单号</th>
			<th class="width-40">类型</th>
			<th class="width-40">人数</th>
			<th class="width-50">收银员</th>
			<th class="width-120">下单时间</th>
			<th class="width-120">结帐时间</th>
			<th class="width-50">支付方式</th>
			<th class="width-50">金额</th>
			<th class="width-80">操 做</th>
		</tr>

		<!-- 模版数据 -->
	<c:forEach items="${ list }" var="order"
			varStatus="status">
		<tr>
			<td>${ status.count }</td>
			
			<!-- 显示订单所属性门店名称 -->
			<c:forEach items="${doorList}" var="door">
				<c:if test="${ door.id==order.doorId }">
					<td class="1111">${ door.name }</td>
				</c:if>
			</c:forEach>
			
			<td>${ order.orderNo }</td>
			<td>${ order.orderType }</td>
			<td>${ order.pnum }</td>
			<td>${ order.cashier }</td>
			<td>
				<fmt:formatDate value="${ order.orderTime }"
						pattern="yyyy-MM-dd HH:mm:ss"/>
				
			</td>
			<td>
				
				<fmt:formatDate value="${ order.payTime }"
						pattern="yyyy-MM-dd HH:mm:ss"/>
				
			</td>
			<td>${ order.payType }</td>
			<td>${ order.price }</td>
			<td>
				<a href="orderDelete?id=${ order.id }">删除</a>
				|
				<a href="orderInfo?id=${ order.id }">修改</a>
			</td>
		</tr>
	</c:forEach>
		
	</table>
</body>
</html>

order_add.jsp

<%@ page pageEncoding="utf-8"%>
<!-- 引入JSTL标签库 -->
<%@ taglib prefix="c" 
	uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
<title>新增订单</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "微软雅黑"; background-color: #EDEDED; }
	h2{ text-align: center;font-size:26px; }
	table{ margin: 30px auto; text-align: center; border-collapse:collapse; width:50%; }
	td, th{ padding: 5px;font-size:18px;}
	hr{ margin-bottom:20px; border:1px solid #aaa; }
	input,select,textarea{ width:284px; height:30px; background:#EDEDED; border:1px solid #999; text-indent:5px; font-size:18px; }
	input[type='submit']{ width:130px; height:36px; cursor:pointer; border-radius:5px 5px 5px 5px; background:#ddd; }
	select{text-indent:0px;}
	textarea{height:100px;font-size:22px;}
</style>

<script type="text/javascript">
</script>
</head>
<body>
	<h2>新增订单</h2>
	<hr/>
	<form action="orderAdd" method="POST">
		<table border="1">
			<tr>
				<td width="30%">所属门店</td>
				<td>
					<select name="doorId">
					<c:forEach items="${ list }" var="door">
						<option value="${ door.id }">${ door.name }</option>
					</c:forEach>
					</select>
				</td>
			</tr>
			<tr>
				<td>订单编号</td>
				<td>
					<input type="text" name="orderNo"/>
				</td>
			</tr>
			<tr>
				<td>订单类型</td>
				<td>
					<input type="text" name="orderType" 
							value="蛋糕"/>
				</td>
			</tr>
			<tr>
				<td>用餐人数</td>
				<td>
					<input type="text" name="pnum"
							value="1"/>
				</td>
			</tr>
			<tr>
				<td>收银员</td>
				<td>
					<input type="text" name="cashier"/>
				</td>
			</tr>
			<tr>
				<td>支付方式</td>
				<td>
					<input type="text" name="payType"
							value="微支付"/>
					
				</td>
			</tr>
			<tr>
				<td>支付金额</td>
				<td>
					<input type="text" name="price"/>
					
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提 	交"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

order_update.jsp

<%@ page pageEncoding="utf-8"%>
<%-- 引入JSTL标签库 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<title>修改订单</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "微软雅黑"; background-color: #EDEDED; }
	h2{ text-align: center;font-size:26px; }
	table{ margin: 30px auto; text-align: center; border-collapse:collapse; width:50%; }
	td, th{ padding: 5px;font-size:18px;}
	hr{ margin-bottom:20px; border:1px solid #aaa; }
	input,select,textarea{ width:284px; height:30px; background:#EDEDED; border:1px solid #999; text-indent:5px; font-size:18px; }
	input[type='submit']{ width:130px; height:36px; cursor:pointer; border-radius:5px 5px 5px 5px; background:#ddd; }
	select{text-indent:0px;}
	textarea{height:100px;font-size:22px;}
</style>
<script type="text/javascript">
	/* 文档就绪事件函数(在整个html文档加载
		完以后当即执行)
	window.onload = function(){
		//1.根据id(doorId)获取select元素
		var sel = document.getElementById("doorId");
		//2.经过select元素获取data属性值(4)
		var doorId = sel.getAttribute("data");
		console.log(doorId);
		//3.获取select中的全部option元素
		var opts = sel.getElementsByTagName("option");
		console.log(opts.length);
		//4.遍历全部option元素
		for(var i=0;i<opts.length;i++){
			//4.1.获取当前被遍历的option的value值
			var value = opts[i].value;
			console.log(value);
			//4.2.将data属性值和option的value值进行比较
			if(doorId == value){
				//4.2.1.若是相等则设置当前option默认被选中
				opts[i].setAttribute("selected", true);
			}
		}
	}*/
</script>
</head>
<body>
<h2>修改订单</h2>
<hr/>
<form action="orderUpdate" method="POST">
	<!-- hidden隐藏域,在提交表单时连order.id一块儿提交 -->
	<input type="hidden" name="id" value="${ order.id }"/>
	<table border="1">
		<tr>
			<td width="30%">所属门店</td>
			<td>
				<select id="doorId" name="doorId">
					<!-- 遍历全部门店信息 -->
					<c:forEach items="${ list }" var="door">
						<option value="${ door.id }"
							<c:if test="${ order.doorId == door.id }">
								selected="true"
							</c:if>
						>${ door.name }</option>
					</c:forEach>
					
				</select>
			</td>
		</tr>
		<tr>
			<td>订单编号</td>
			<td>
				<input type="text" name="orderNo" 
								value="${ order.orderNo }"/>
			</td>
		</tr>
		<tr>
			<td>订单类型</td>
			<td>
				<input type="text" name="orderType" 
								value="${ order.orderType }"/>
			</td>
		</tr>
		<tr>
			<td>用餐人数</td>
			<td>
				<input type="text" name="pnum"
								value="${ order.pnum }"/>
			</td>
		</tr>
		<tr>
			<td>收银员</td>
			<td>
				<input type="text" name="cashier"
								value="${ order.cashier }"/>
			</td>
		</tr>
		<tr>
			<td>下单时间</td>
			<td>
				<input type="text" name="orderTime" 
						value='<fmt:formatDate 
					value="${ order.orderTime }"
					pattern="yyyy-MM-dd HH:mm:ss"/>'/>
					
			</td>
		</tr>
		<tr>
			<td>结帐时间</td>
			<td>
				<input type="text" name="orderTime" 
						value='<fmt:formatDate 
					value="${ order.payTime }"
					pattern="yyyy-MM-dd HH:mm:ss"/>'/>
					
			</td>
		</tr>
		<tr>
			<td>支付方式</td>
			<td>
				<input type="text" name="payType"
						value="${ order.payType }"/>
				
			</td>
		</tr>
		<tr>
			<td>支付金额</td>
			<td>
				<input type="text" name="price"
						value="${ order.price }"/>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="提 	交"/>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

由此看来,jsp仍是挺简单的,谁说后端的就不须要了解前端的知识,知己知彼,方能百战不殆嘛!!! 以后将还会有最后的一个结尾,用于优化项目,敬请期待!!!

相关文章
相关标签/搜索