前言：hello！！！在前几天给大家介绍到了-----门店管理模块，今天的订单模块和管理模块其实相差无几，实现方式可以说几乎相同！！不过还是得给大家好好的讲解一下订单模块，因为这次订单模块的前端部分将会为大家讲到两个特别的标签,也让大家对项目有更深的了解。
| 其乐蛋糕店后台管理系统 | 地址 |
|---|---|
| Github--其乐后台管理系统源码 | https://github.com/XINGGou/qile |
| 其乐后台管理系统(一)--项目介绍 | https://my.oschina.net/u/4115134/blog/3193902 |
| 其乐后台管理系统(二)--整合三大框架(spring+springmvc+mybatis) | https://my.oschina.net/u/4115134/blog/3195801 |
| 其乐后台管理系统(三)--整合mybatis框架(三大框架搭建成功) | https://my.oschina.net/u/4115134/blog/3196768 |
| 其乐后台管理系统(四)--门店管理模块 | https://my.oschina.net/u/4115134/blog/3207632 |
| 其乐后台管理系统(五)--订单管理系统 | https://my.oschina.net/u/4115134/blog/3211989 |
后端部分
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
什么是resultmap：
- 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层的两种基本写法有说明如若想要了解请点击--门店管理模块
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类
我在代码中，自认为把每一句代码都解释很是详细，故不在这上面叭叭了！！！
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类中将会自动重写该方法！！！（有兴趣可以自己去试试！！）
前端
1.order_list.jsp
在今天的页面中，最为特殊的是两个标签一个是<c:forEach>和<fmt:formatDate>这两个标签
首先讲讲<c:forEach>的一些重要属性(常用)：
-
在使用之前需要对其进行引入
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -
var：迭代参数的名称。在迭代体中可以使用的变量的名称，用来表示每一个迭代变量。类型为String。
-
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还是挺简单的，谁说后端的就不需要了解前端的知识，知己知彼，方能百战不殆嘛！！！
之后将还会有最后的一个结尾，用于优化项目，敬请期待！！！
来源：oschina
链接：https://my.oschina.net/u/4115134/blog/3211989