前言: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 |
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 + "]"; } }
什么是resultmap:css
<?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>
在前文我对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); }
记住不要写成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); }
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); } }
我在代码中,自认为把每一句代码都解释非常详细,故不在这上面叭叭了!!!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) ); } }
除了上文所写的那样,其实为了方便,咱们能够先写controller层,在使用service层方法时,若是没有该方法,再行点击,让其自动建立OrderService中的方法,在保存OrderService类,此时Impl类会报错,而后直接alt+斜杠(/)>>enter
Impl类中将会自动重写该方法!!!(有兴趣能够本身去试试!!)git
在今天的页面中,最为特殊的是两个标签一个是<c:forEach>
和<fmt:formatDate>
这两个标签github
在使用以前须要对其进行引入 <%@ 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:迭代的步长。
引入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>
<%@ 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>
<%@ 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仍是挺简单的,谁说后端的就不须要了解前端的知识,知己知彼,方能百战不殆嘛!!! 以后将还会有最后的一个结尾,用于优化项目,敬请期待!!!