前言: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仍是挺簡單的,誰說後端的就不須要了解前端的知識,知己知彼,方能百戰不殆嘛!!! 以後將還會有最後的一個結尾,用於優化項目,敬請期待!!!