Author Homepage: Programming Qianzhihe
About the author: Java, front-end, Pythone development for many years, worked as an elevation, project manager, architect
Main content: Java project development, graduation design development, interview technology sorting, latest technology sharing
1. Project Introduction
With the gradual penetration of Internet technology into life, people's living and consumption habits have undergone great changes. As far as restaurant dining is concerned, the application of Internet technology and mobile Internet technology has also been popularized. For example, the restaurant ordering system that appeared a few years ago replaced the traditional way of ordering from paper menus through information technology. This method can make it easier for customers to order and call, and secondly, it is convenient for merchants to carry out unified management of Rendanheyi, which reduces the error rate of order declaration and improves the user experience, so it can be widely used and popularized.
The emergence of the mobile Internet has made the empowerment of smartphones more extensive. Tencent WeChat launched WeChat mini-programs in a timely manner, enabling smartphone users to conduct corresponding information management and participation through WeChat. , it directly implants the business format from the traditional PC Internet into the mobile phone mobile Internet. This lightweight APP application is very convenient for users, and also brings a lot of traffic to merchants through WeChat.
The launch of the functions of WeChat mini-programs has greatly facilitated the more than 200 million WeChat users in the country, and built a big business empire on this ecosystem, and the applications developed by mini-programs have quickly penetrated into various industries. There has also been a systematic change in the application of information technology in the catering industry. For example, the user self-ordering function is realized through the WeChat applet, which greatly facilitates the user and reduces the distance limit for ordering. The user can turn on the mobile phone in the restaurant. You can also order food on the way to the restaurant or even at home using the WeChat applet, breaking the limitations of time and space and making it more flexible and convenient. After investigation and field analysis, based on the research on WeChat applet, this WeChat applet ordering system was developed to contribute to the information construction of the catering industry.
According to the above analysis of the functional requirements of the WeChat applet ordering system, the functional structure diagram of the WeChat applet ordering system is designed, as shown in Figure 1-1 below.
Figure 1-1 System function structure diagram
Front-end users log in to the applet, using WeChat account binding to log in. At present, because the test account does not have this permission, it can only be tested as a developer. Front-end users can browse the meals released by the system on the mobile phone applet to realize the complete ordering process. You can add the corresponding meal to the shopping cart, place an order for purchase, and view the relevant order information.
Background users must log in to perform corresponding operations, mainly for corresponding business data management.
User management: You can manage user information on the front-end and back-end, and perform corresponding data addition, deletion, modification, and query operations.
Meal management: You can manage the meal information released by the ordering system, and perform corresponding data addition, deletion, modification, and query operations.
Order management: perform corresponding management operations on the order information of front-end users.
Classification management: It mainly realizes the classification management of meals displayed on the front-end ordering display.
System management: It can mainly realize the management operation of the relevant basic information of the system.
2. Environment introduction
Backend development:
Locale: Java: jdk1.8
Database: Mysql: mysql5.7
Application server: Tomcat: tomcat8.5.31
Development tool: IDEA or eclipse
Front-end development:
Development tools: WeChat developer tools
Development technology: WeChat applet
The whole adopts the front-end and back-end separate development, and the front-end and back-end are tested separately
Three, system display
3.1 Display of WeChat Mini Program function modules
3.1.1 Front page display
The front-end of the WeChat applet ordering is mainly to realize the ordering operation, which mainly includes the modules of reservation ordering, menu browsing, telephone ordering, and customer service. The specific operation interface is shown in Figure 4-1 below.
Figure 3-1 Front page home page interface
3.1.2 Front-end menu browsing module
Users enter the WeChat ordering system and enter the browse menu to view the food information released by the restaurant, as shown in Figure 3-2 below:
Figure 3-2 Menu browsing interface
3.1.3 Front-end user shopping cart module
After the WeChat applet ordering front-end users log in to the system, they can enter the reservation order module to add meals to the shopping cart. User login directly binds the user's WeChat account to log in, which is very convenient. The Add Shopping Cart interface is shown in Figure 3-3 below.
Figure 3-3 Front-end user add shopping cart operation interface
3.1.4 Front-end user ordering payment module
After logging in to the ordering system, the front-end user can enter the reservation ordering module to add the favorite meal to the shopping cart, submit the order and make payment for purchase. After completing the meal purchase and completing the entire order operation, you can comment on the meal. The relevant management interface is shown in Figure 3-4 below.
Figure 3-4 Front-end user ordering payment interface
3.1.4 Front-end user personal order management module
After the WeChat applet ordering front-end users log in to the system, they can manage personal order information in the personal order management module in the My module. The front-end user personal order management interface is shown in Figure 3-5 below.
Figure 3-5 Front-end user personal order management interface
3.2 Display of background function modules
3.2.1 User login function
If a WeChat applet ordering background user wants to manage and operate the relevant information of the restaurant, he must first log in to the system before starting the relevant operation. After entering the mobile phone number and password, the user login interface is shown in Figure 3-6.
Figure 3-6 User login interface
3.2.2 User management function
After the WeChat applet ordering system administrator user logs in to the system, he or she can enter the user management menu to manage the corresponding administrator user information. The user management interface is shown in Figures 3-7 and 3-8 below:
Figure 3-7 Background user management function interface diagram
Figure 3-8 Interface for adding background users
3.2.3 Background meal management operation UI
After the WeChat applet ordering administrator user logs in to the system, he or she can enter the food management menu to manage the corresponding food information. It mainly includes the operation of adding, modifying, querying, and removing meals, etc. When adding meals, you can specify the pictures of the meals for display. The operation interface of meal information management is shown in Figures 3-9 and 3-10 below.
Figure 3-9 UI interface of background meal management function
Figure 3-10 UI interface for new functions of background meals
3.2.4 Background food order management operation UI
After the WeChat applet ordering system administrator user logs into the system, he or she can enter the food order management menu to manage the corresponding food order information. It mainly includes the query of meal orders, the view of order details, etc. When adding meals, you can upload pictures of the meals for display. The order information management interface is shown in Figures 3-11 and 3-12 below.
Figure 3-11 UI interface of background order management function
Figure 3-12 UI interface for viewing order details in the background
Fourth, the core code display
package com.imooc.controller;
import com.imooc.constant.CookieConstant;
import com.imooc.constant.RedisConstant;
import com.imooc.dataobject.SellerInfo;
import com.imooc.enums.ResultEnum;
import com.imooc.exception.SellException;
import com.imooc.form.SellerForm;
import com.imooc.repository.SellerInfoRepository;
import com.imooc.utils.CookieUtil;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
import lombok.extern.slf4j.Slf4j;
@RestController
@RequestMapping("/admin")
@Slf4j
public class AdminUserController {
@Autowired
SellerInfoRepository repository;
/**
* 后台用户登陆操作
* @param phone
* @param password
* @param response
* @return
*/
@GetMapping("/loginAdmin")
public String loginAdmin(@RequestParam("phone") String phone,
@RequestParam("password") String password,
HttpServletResponse response) {
SellerInfo sellerInfo = repository.findByPhone(phone);
log.info("商家信息={}", sellerInfo);
if (sellerInfo != null && sellerInfo.getPassword().equals(password)) {
String token = UUID.randomUUID().toString();
log.info("登录成功的token={}", token);
Integer expire = RedisConstant.EXPIRE;
//3. 设置token至cookie
CookieUtil.set(response, CookieConstant.TOKEN, token, expire);
return "登录成功";
} else {
throw new SellException(ResultEnum.LOGIN_FAIL);
}
}
@GetMapping("/logout")
public ModelAndView logout(HttpServletRequest request,
HttpServletResponse response,
Map<String, Object> map) {
//1. 从cookie里查询
Cookie cookie = CookieUtil.get(request, CookieConstant.TOKEN);
if (cookie != null) {
//2. 清除cookie
CookieUtil.set(response, CookieConstant.TOKEN, null, 0);
}
map.put("msg", ResultEnum.LOGOUT_SUCCESS.getMessage());
map.put("url", "/sell/seller/order/list");
return new ModelAndView("common/success", map);
}
/*
* 页面相关
* */
@GetMapping("/list")
public ModelAndView list(Map<String, Object> map) {
List<SellerInfo> categoryList = repository.findAll();
map.put("categoryList", categoryList);
return new ModelAndView("admin/list", map);
}
@GetMapping("/index")
public ModelAndView index(@RequestParam(value = "sellerId", required = false) Integer sellerId,
Map<String, Object> map) {
SellerInfo sellerInfo = repository.findBySellerId(sellerId);
map.put("category", sellerInfo);
return new ModelAndView("admin/index", map);
}
/**
* 保存/更新
*/
@PostMapping("/save")
public ModelAndView save(@Valid SellerForm form,
BindingResult bindingResult,
Map<String, Object> map) {
log.info("SellerForm={}", form);
if (bindingResult.hasErrors()) {
map.put("msg", bindingResult.getFieldError().getDefaultMessage());
map.put("url", "/sell/admin/index");
return new ModelAndView("common/error", map);
}
SellerInfo sellerInfo = new SellerInfo();
try {
if (form.getSellerId() != null) {
sellerInfo = repository.findBySellerId(form.getSellerId());
}
BeanUtils.copyProperties(form, sellerInfo);
repository.save(sellerInfo);
} catch (SellException e) {
map.put("msg", e.getMessage());
map.put("url", "/sell/admin/index");
return new ModelAndView("common/error", map);
}
map.put("url", "/sell/admin/list");
return new ModelAndView("common/success", map);
}
}
package com.imooc.controller;
import com.imooc.VO.ResultVO;
import com.imooc.converter.OrderForm2OrderDTOConverter;
import com.imooc.dto.OrderDTO;
import com.imooc.enums.ResultEnum;
import com.imooc.exception.SellException;
import com.imooc.form.OrderForm;
import com.imooc.service.BuyerService;
import com.imooc.service.OrderService;
import com.imooc.utils.ResultVOUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.CollectionUtils;
import org.springframework.util.StringUtils;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import lombok.extern.slf4j.Slf4j;
/**
* Created by znz
*/
@RestController
@RequestMapping("/buyer/order")
@Slf4j
public class BuyerOrderController {
@Autowired
private OrderService orderService;
@Autowired
private BuyerService buyerService;
//创建订单
@PostMapping("/create")
public ResultVO<Map<String, String>> create(@Valid OrderForm orderForm,
BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
log.error("【创建订单】参数不正确, orderForm={}", orderForm);
throw new SellException(ResultEnum.PARAM_ERROR.getCode(),
bindingResult.getFieldError().getDefaultMessage());
}
OrderDTO orderDTO = OrderForm2OrderDTOConverter.convert(orderForm);
if (CollectionUtils.isEmpty(orderDTO.getOrderDetailList())) {
log.error("【创建订单】购物车不能为空");
throw new SellException(ResultEnum.CART_EMPTY);
}
OrderDTO createResult = orderService.create(orderDTO);
Map<String, String> map = new HashMap<>();
map.put("orderId", createResult.getOrderId());
return ResultVOUtil.success(map);
}
//订单列表
@GetMapping("/listByStatus")
public ResultVO<List<OrderDTO>> listByStatus(@RequestParam("openid") String openid,
@RequestParam(value = "orderStatus", defaultValue = "0") Integer orderStatus) {
if (StringUtils.isEmpty(openid)) {
log.error("【查询订单列表】openid为空");
throw new SellException(ResultEnum.PARAM_ERROR);
}
List<OrderDTO> orderList = buyerService.findOrderList(openid, orderStatus);
return ResultVOUtil.success(orderList);
}
//订单详情
@GetMapping("/detail")
public ResultVO<OrderDTO> detail(@RequestParam("openid") String openid,
@RequestParam("orderId") String orderId) {
OrderDTO orderDTO = buyerService.findOrderOne(openid, orderId);
return ResultVOUtil.success(orderDTO);
}
//确认收货
@PostMapping("/sure")
public ResultVO sure(@RequestParam("openid") String openid,
@RequestParam("orderId") String orderId) {
buyerService.cancelOrder(openid, orderId);
return ResultVOUtil.success();
}
//取消订单
@PostMapping("/cancel")
public ResultVO cancel(@RequestParam("openid") String openid,
@RequestParam("orderId") String orderId) {
buyerService.cancelOrder(openid, orderId);
return ResultVOUtil.success();
}
}
package com.imooc.controller;
import com.imooc.VO.ResultVO;
import com.imooc.dataobject.Comment;
import com.imooc.dataobject.OrderMaster;
import com.imooc.dto.OrderDTO;
import com.imooc.enums.OrderStatusEnum;
import com.imooc.enums.ResultEnum;
import com.imooc.exception.SellException;
import com.imooc.repository.CommentRepository;
import com.imooc.repository.OrderMasterRepository;
import com.imooc.service.OrderService;
import com.imooc.utils.ResultVOUtil;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* desc:评论相关
*/
@RestController
public class CommentController {
@Autowired
private CommentRepository repository;
@Autowired
private OrderService orderService;
@Autowired
private OrderMasterRepository masterRepository;
//订单详情
@PostMapping("/comment")
public ResultVO<Comment> detail(@RequestParam("openid") String openid,
@RequestParam("orderId") String orderId,
@RequestParam("name") String name,
@RequestParam("avatarUrl") String avatarUrl,
@RequestParam("content") String content) {
if (StringUtils.isEmpty(openid) || StringUtils.isEmpty(orderId)) {
throw new SellException(ResultEnum.PARAM_ERROR);
}
//提交评论
Comment comment = new Comment();
comment.setName(name);
comment.setAvatarUrl(avatarUrl);
comment.setOpenid(openid);
comment.setContent(content);
Comment save = repository.save(comment);
//修改订单状态
OrderDTO orderDTO = orderService.findOne(orderId);
orderDTO.setOrderStatus(OrderStatusEnum.COMMENT.getCode());
OrderMaster orderMaster = new OrderMaster();
BeanUtils.copyProperties(orderDTO, orderMaster);
OrderMaster updateResult = masterRepository.save(orderMaster);
return ResultVOUtil.success(save);
}
//所有评论
@GetMapping("/commentList")
public ResultVO<List<Comment>> commentList() {
List<Comment> all = repository.findAll();
return ResultVOUtil.success(all);
}
//单个用户的所有评论
@GetMapping("/userCommentList")
public ResultVO<List<Comment>> userCommentList(@RequestParam("openid") String openid) {
List<Comment> all = repository.findAllByOpenid(openid);
return ResultVOUtil.success(all);
}
}
V. Project Summary
The users of the WeChat Mini Program ordering system mainly include two user roles, one is the administrator role, and the other is the front-end user role. The specific functions of these two roles are as follows:
Administrator role: The administrator can perform corresponding management operations after logging in to the background management of the WeChat applet ordering system, mainly including: user management, meal management, order management, classification management and other operations;
Front-end user role: After logging in to the WeChat mini-program ordering system, front-end users can browse meals, add to shopping carts, order meals online, and manage personal orders.
The overall function of the system is complete. According to the analysis of the requirements of the WeChat applet ordering system, the outline design of the WeChat applet ordering system is carried out, and the detailed design is carried out on this basis. After the detailed design of the entire project is completed, the coding phase of the project begins.