Qile background management system -- order management module

hello!!! I introduced it to you the other day----- Store management module Today's order module and management module are almost the same, and the implementation method can be almost the same!! But I still need to explain the order module to you, because the front-end part of the order module will give you two special tags, and let you have a deeper understanding of the project.

Background management system of Qile cake shop	address
Github -- source code of Qile background management system	https://github.com/XINGGou/qile
Qile background management system (I) -- project introduction	https://my.oschina.net/u/4115134/blog/3193902
Qile background management system (2) -- integrating three frameworks (spring+springmvc+mybatis)	https://my.oschina.net/u/4115134/blog/3195801
Qile backstage management system (3) - integration of mybatis framework (successful construction of three frameworks)	https://my.oschina.net/u/4115134/blog/3196768
Qile background management system (4) - store management module	https://my.oschina.net/u/4115134/blog/3207632
Qile background management system (5) -- order management system	https://my.oschina.net/u/4115134/blog/3211989

Backend part

1. Create com.it.pojo.Order entity class to encapsulate all order information

package com.it.pojo;

import java.util.Date;

/**
 * Order information class, used to encapsulate order information
 */
public class Order {
	//1. Declare properties
	private Integer id;		//Order id
	private Integer doorId;	//Store id
	private String orderNo; //Order number
	private String orderType;//Order type (chocolate cake / milk tea / coffee, etc.)
	private Integer pnum;	//Number of diners
	private String cashier;	//Cashier
	private Date orderTime;	//Order time
	private Date payTime;	//Payment time
	private String payType;	//Payment type (WeChat payment / Alipay payment)
	private Double price;	//Payment amount
	
	//2. Provide getter and setter methods
	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. Rewrite 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. Create the Order mapping file -- OrderMapper.xml in the resources/mybatis/mapper directory

What is resultmap:

resultMap is to solve the problem of inconsistency between the column name in the data table and the attribute name in the pojo class
The resultMap configures the correspondence between the columns in the data table and the attributes in the pojo class (that is, mapping)

<?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">

<!-- Mapping file for order table	namespace Value is the full path of the corresponding interface -->
<mapper namespace="com.it.mapper.OrderMapper">
	<!-- 
		resultMap It is to solve the problem that when the column names and
			pojo The problem of inconsistent property names in classes
		resultMap Columns and in the data table are configured in pojo class
			//Correspondence between attributes in (that is, mapping)
	 -->
	<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.Query all orders
		tb_order Columns and in tables Order Property name in class
		//Inconsistency will lead to data encapsulation failure!!!
		id			id		setId()
		door_id		doorId	setDoorId()
		//If the columns in the table are inconsistent with the property names in the pojo class
		//You need to change the resultType to resultMap
	 -->
	<select id="findAll" resultMap="orderRM">
		select * from tb_order
	</select>
	
	<!-- 2.according to id Delete order information -->
	<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.according to id Query order information -->
	<select id="findById" resultMap="orderRM">
		select * from tb_order
		where id=#{id}
	</select>
	
	<!-- 5.according to id Modify order information -->
	<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. Code implementation of ordermapper

I have explained the two basic ways to write the mapper layer. If you want to know more, please click-- Store management module

package com.it.mapper;

import java.util.List;

import com.it.pojo.Order;

public interface OrderMapper {

	/**
	 * 1.Query all order information
	 * @return
	 */
	List<Order> findAll();
	/**
	 * 2.Delete order information according to id
	 * @param id
	 */
	void deleteById(Integer id);
	
	/**
	 * 3.Add order information
	 * @param order
	 */
	void addOrder(Order order);
	
	/**
	 * 4.1.Query order information according to id
	 * @param id
	 * @return
	 */
	Order findById(Integer id);
	/**
	 * 4.2.Modify order information according to id
	 * @param order
	 */
	void updateById(Order order);
	
}

4. Implementation of service layer code

1. Create the DoorService interface and add all (add, delete, modify and query) order information

Remember not to write class. This is interface

package com.it.service;

import java.util.List;

import com.it.pojo.Order;

public interface OrderService {
	/**
	 * 1.Query all order information
	 * @return
	 */
	List<Order> findAll();
	
	/**
	 * 2.Delete order information according to id
	 * @param id
	 */
	void deleteById(Integer id);
	
	/**
	 * 3.Add order information
	 * @param order
	 */
	void addOrder(Order order);
	
	/**
	 * 4.1.Query order information according to id
	 * @param id
	 * @return 
	 */
	Order findById(Integer id);
	
	/**
	 * 4.2.Modify order information according to id
	 * @param order
	 */
	void updateById(Order order);

}

2. Create the implementation class of the OrderService interface -- OrderServiceImpl.java, and implement the addition, deletion, modification and query methods in the interface

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 
 * Role (1): identify that the current class belongs to the service layer
 * Function (2): spring will scan all service packages with
 * @Service Annotated class, registering the class in the spring container
 * (That is, create an instance from the spring container)
 */
@Service
public class OrderServiceImpl implements OrderService {
	@Autowired	//Create objects and assign values to variables by spring
	OrderMapper orderMapper;
	
	@Override
	public List<Order> findAll() {
		//1. Call findAll method of orderMapper to query all orders
		List<Order> list = orderMapper.findAll();
		return list;
	}

	@Override
	public void deleteById(Integer id) {
		//1. Call the deleteById method of OrderMapper
			//Delete order information according to id
		orderMapper.deleteById(id);
	}

	@Override
	public void addOrder(Order order) {
		//1. Call the addOrder method of OrderMapper
		orderMapper.addOrder(order);
	}

	@Override
	public Order findById(Integer id) {
		//1. Call findById method of OrderMapper
		Order order = orderMapper.findById(id);
		
		return order;
	}

	@Override
	public void updateById(Order order) {
		//1. Call the updateById method in OrderMapper
		orderMapper.updateById(order);
	}
}

5. Code implementation of controller layer

1. Create OrderController class

In the code, I think that every code is explained in detail, so I don't want to talk about it!!!

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 
 * Role (1): identifies that the current class belongs to the controller layer
 * Function (2): spring will scan all the controllers with
 * @Controller Annotated class, registering the class in the spring container
 * (That is, create an instance from the spring container)
 */
@Controller
public class OrderController {
	
	@Autowired	//Create an instance by spring and assign values to variables
	OrderService orderService;
	@Autowired	//Create an instance by spring and assign values to variables
	DoorService doorService;
	
	/** 1.Query all order information */
	@RequestMapping("/orderList")
	public String orderList(Model model){
		//1. Call findAll method of OrderService layer to query all orders
		List<Order> list = orderService.findAll();
		//2. Store the list set of all orders in the Model (in the request field)
		model.addAttribute("list", list);
		//3. Query all stores
		List<Door> doorlist = doorService.findAll();
		//4. Store the list set of all orders in the Model (in the request field)
		model.addAttribute("doorList", doorlist);
		//5. Turn to the order list page
		return "order_list";
	}
	
	/** 2.Delete order information according to id */
	@RequestMapping("/orderDelete")
	public String orderDelete(Integer id){
		//1. Call deleteById method of OrderService
			//Delete order information according to id
		orderService.deleteById(id);
		//2. Turn to query all orders
		return "redirect:/orderList";
	}
	
	/** 3.Query all stores and jump to order adding page */
	@RequestMapping("/findAllDoorToOrder_add")
	public String toOrder_Add(Model model){
		//1. Call findAll method of doorService to query all stores
		List<Door> list = doorService.findAll();
		//2. Store all store lists in the Model (saved in the Request domain)
		model.addAttribute("list", list);
		//3. Turn to order adding page
		return "order_add";
	}
	
	/** 4.New order */
	@RequestMapping("/orderAdd")
	public String orderAdd(Order order){
		//1. Call addOrder method of OrderService to add order information
		orderService.addOrder(order);
		
		//Turn to query all orders
		return "redirect:/orderList";
	}
	
	/** 4.1.Query order information according to id */
	@RequestMapping("/orderInfo")
	public String orderInfo(Integer id, Model model){
		//1. Call findById of OrderService
			//Query order information according to id
		Order order = orderService.findById(id);
		//2. Store the order information in the Model
		model.addAttribute("order", order);
		
		//3. Call the findAll method of DoorService to query all stores
		List<Door> list = doorService.findAll();
		//4. Store all store lists in the Model
		model.addAttribute("list", list);
		
		//5. Turn to order modification page
		return "order_update";
	}
	
	/** 4.2.Modify order information according to id */
	@RequestMapping("/orderUpdate")
	public String orderUpdate(Order order){
		//1. Call updateById() of OrderService
		orderService.updateById(order);
		// Turn to query all orders
		return "redirect:/orderList";
	}
	
	/* Custom date conversion format */
	@InitBinder
	public void InitBinder (ServletRequestDataBinder binder){
		binder.registerCustomEditor(java.util.Date.class, 
			new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true)
		);
	}

}

6. Expand the different writing methods of controller layer and service layer

In addition to the above, for convenience, we can write the controller layer first. When using the service layer method, if there is no such method, click again to let it automatically create the method in OrderService. When saving the OrderService class, the Impl class will report an error, and then directly alt + slash (/) > Enter Impl class will automatically rewrite the method!!! If you are interested, you can try it by yourself

Front end

1.order_list.jsp

In today's page, the two most special tags are < C: foreach > and < FMT: formatdate >

First, I will talk about some important attributes of < C: foreach >

Before use, it needs to be introduced <% @ taglib prefix = "C" URI = "http://java.sun.com/jsp/jstl/core"% >
var: the name of the iteration parameter. The name of the variable that can be used in the iteration body to represent each iteration variable. The type is String.
items: the collection to iterate over. The types it supports are explained below.
varStatus: the name of the iteration variable. It is used to indicate the status of the iteration. You can access the information of the iteration itself.
Begin: if items are specified, the iteration starts from items[begin]. If no items are specified, the iteration starts from begin. It is of type integer.
End: if items are specified, the iteration ends at items[end]; if no items are specified, the iteration ends at end. It is also of type integer.
Step: the step size of the iteration.

Next is the use of < FMT: formatdate >

Introducing FMT <% @ taglib prefix = "FMT" URI = "http://java.sun.com/jsp/JSTL/fmt"% >
1. Display the day of the week -- < FMT: formatdate value = "${date}" pattern = "e" / >
2. Display the time, minute and second of MM DD YY -- < FMT: formatdate value = "${date}" pattern = "yyyy MM DD HH: mm: SS" / >

<%@ page pageEncoding="utf-8"%>
<%-- Introduce JSTL Tag library --%>
<%@ 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>Order management</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "Microsoft YaHei"; 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>Order management</h2>
	<div id="add-order">
		<a href="findAllDoorToOrder_add" target="rightFrame">New order</a>
	</div>
	<hr/>
	<table border="1">
		<tr>
			<th class="width-40">Serial number</th>
			<th class="width-120">Affiliated store</th>
			<th class="width-50">Order number</th>
			<th class="width-40">type</th>
			<th class="width-40">Number</th>
			<th class="width-50">Cashier</th>
			<th class="width-120">Order time</th>
			<th class="width-120">Checkout time</th>
			<th class="width-50">Payment method</th>
			<th class="width-50">Amount of money</th>
			<th class="width-80">Operation</th>
		</tr>

		<!-- Template data -->
	<c:forEach items="${ list }" var="order"
			varStatus="status">
		<tr>
			<td>${ status.count }</td>
			
			<!-- Display the store name of the order attribute -->
			<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 }">delete</a>
				|
				<a href="orderInfo?id=${ order.id }">modify</a>
			</td>
		</tr>
	</c:forEach>
		
	</table>
</body>
</html>

order_add.jsp

<%@ page pageEncoding="utf-8"%>
<!-- Introduce JSTL Tag library -->
<%@ taglib prefix="c" 
	uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
<title>New order</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "Microsoft YaHei"; 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>New order</h2>
	<hr/>
	<form action="orderAdd" method="POST">
		<table border="1">
			<tr>
				<td width="30%">Affiliated store</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>Order number</td>
				<td>
					<input type="text" name="orderNo"/>
				</td>
			</tr>
			<tr>
				<td>Order type</td>
				<td>
					<input type="text" name="orderType" 
							value="Cake"/>
				</td>
			</tr>
			<tr>
				<td>Number of diners</td>
				<td>
					<input type="text" name="pnum"
							value="1"/>
				</td>
			</tr>
			<tr>
				<td>Cashier</td>
				<td>
					<input type="text" name="cashier"/>
				</td>
			</tr>
			<tr>
				<td>Payment method</td>
				<td>
					<input type="text" name="payType"
							value="Micro payment"/>
					
				</td>
			</tr>
			<tr>
				<td>Payment amount</td>
				<td>
					<input type="text" name="price"/>
					
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="carry 	hand over"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

order_update.jsp

<%@ page pageEncoding="utf-8"%>
<%-- Introduce JSTL Tag library --%>
<%@ 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>Order modification</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{ font-family: "Microsoft YaHei"; 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">
	/* Document ready event function (loaded in the entire html document
		Immediately after completion)
	window.onload = function(){
		//1.Get select element according to id(doorId)
		var sel = document.getElementById("doorId");
		//2.Get data attribute value through select element (4)
		var doorId = sel.getAttribute("data");
		console.log(doorId);
		//3.Get all option elements in select
		var opts = sel.getElementsByTagName("option");
		console.log(opts.length);
		//4.Traverse all option elements
		for(var i=0;i<opts.length;i++){
			//4.1.Get the value value of the currently traversed option
			var value = opts[i].value;
			console.log(value);
			//4.2.Compare the value of the data attribute with the value of the option
			if(doorId == value){
				//4.2.1.Set the current option to be selected by default if it is equal
				opts[i].setAttribute("selected", true);
			}
		}
	}*/
</script>
</head>
<body>
<h2>Order modification</h2>
<hr/>
<form action="orderUpdate" method="POST">
	<!-- hidden Hidden domain,Connect when submitting the form order.id Submit together -->
	<input type="hidden" name="id" value="${ order.id }"/>
	<table border="1">
		<tr>
			<td width="30%">Affiliated store</td>
			<td>
				<select id="doorId" name="doorId">
					<!-- Traverse all store information -->
					<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>Order number</td>
			<td>
				<input type="text" name="orderNo" 
								value="${ order.orderNo }"/>
			</td>
		</tr>
		<tr>
			<td>Order type</td>
			<td>
				<input type="text" name="orderType" 
								value="${ order.orderType }"/>
			</td>
		</tr>
		<tr>
			<td>Number of diners</td>
			<td>
				<input type="text" name="pnum"
								value="${ order.pnum }"/>
			</td>
		</tr>
		<tr>
			<td>Cashier</td>
			<td>
				<input type="text" name="cashier"
								value="${ order.cashier }"/>
			</td>
		</tr>
		<tr>
			<td>Order time</td>
			<td>
				<input type="text" name="orderTime" 
						value='<fmt:formatDate 
					value="${ order.orderTime }"
					pattern="yyyy-MM-dd HH:mm:ss"/>'/>
					
			</td>
		</tr>
		<tr>
			<td>Checkout time</td>
			<td>
				<input type="text" name="orderTime" 
						value='<fmt:formatDate 
					value="${ order.payTime }"
					pattern="yyyy-MM-dd HH:mm:ss"/>'/>
					
			</td>
		</tr>
		<tr>
			<td>Payment method</td>
			<td>
				<input type="text" name="payType"
						value="${ order.payType }"/>
				
			</td>
		</tr>
		<tr>
			<td>Payment amount</td>
			<td>
				<input type="text" name="price"
						value="${ order.price }"/>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="carry 	hand over"/>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

From this point of view, jsp is quite simple, who said that the back-end does not need to know the knowledge of the front-end, know yourself and know your enemy, then you can be invincible!!!
After that, there will be a final ending for optimizing the project, please wait!!!

Keywords: Java JSP Spring Mybatis

Added by illzz on Thu, 26 Mar 2020 11:57:57 +0200

Programming VIP