Introduction to the development of ordering WeChat applets
With the gradual penetration of Internet technology into life, people's living consumption habits have undergone great changes. As far as dining in restaurants is concerned, the application of Internet technology and mobile Internet technology has also become popular. For example, the restaurant ordering system that appeared a few years ago replaced the traditional way of ordering food with paper menus through information technology. First, this method is convenient for customers to order and call the number, and second, it is convenient for merchants to carry out unified management of people and orders, which reduces the error rate of ordering and improves 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 timely launched WeChat mini-programs, enabling smartphone users to conduct corresponding information management and participation through WeChat, such as the mini-program mall currently widely used. , the commercial format is directly implanted into the mobile Internet from the traditional PC Internet. This kind of lightweight APP application is very convenient for users, and it also brings a lot of traffic to merchants through WeChat.
The launch of WeChat Mini Programs has greatly facilitated more than 200 million WeChat users across the country, building a petty business empire on this ecosystem, and the applications developed by Mini Programs have quickly penetrated into various industries. In the information application of the catering industry, a systematic change has also taken place. For example, the self-service ordering function of the user 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 order food on the WeChat mini-program, and you can also order food on the way to the restaurant or even at home, which breaks the constraints of time and space and is more flexible and convenient. After investigation and field analysis, based on the research on WeChat mini-programs, this WeChat mini-program ordering system was developed to contribute to the informatization construction of the catering industry.
According to the above analysis of the functional requirements of the WeChat mini-program ordering system, a functional structure diagram of the WeChat mini-program ordering system is designed, as shown in Figure 1-1 below.
Foreground users log in to the applet, which is implemented by binding and logging in with a WeChat account. At present, since the test account has not enabled 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 a complete ordering process. You can add the corresponding meal to the shopping cart, and then place an order for purchase, and you can view the relevant order information.
Background users must log in to perform corresponding operations, mainly for corresponding business data management.
User management: It can manage the user information of the front end and the back end, and perform corresponding data addition, deletion, modification and query operations.
Food product management: It can manage the food product information released by the food 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.
Category management: It mainly realizes the category management of food items displayed on the front-end ordering display.
System management: It can mainly realize the management and operation of the relevant basic information of the system.
Introduction to the WeChat Mini Program Environment for Ordering Food
Background development:
Locale: Java: jdk1.8
Database: Mysql: mysql5.7
Application server: Tomcat: tomcat8.5.31
Development tools: IDEA or eclipse
Front-end development:
Development tools: WeChat developer tools
Development Technology: WeChat Mini Program
The whole adopts the front-end and back-end separate development, and the front-end and back-end are tested separately
Order WeChat Mini Program System Display
3.1 Display of WeChat mini-program functional 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 modules such as reservation ordering, menu browsing, telephone ordering, and customer service. The specific operation interface is shown in Figure 4-1 below.
`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);
}
}`
project summary
The users of the WeChat applet 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: Administrators can perform corresponding management operations after logging in to the background management of the WeChat mini-program ordering system, mainly including: user management, meal management, order management, category management, etc.;
Front-end user role: After logging in to the WeChat mini-program ordering system, the front-end user can browse food, add shopping carts, order online, and manage personal orders.
The overall function of the system is complete. According to the demand analysis 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 completing the detailed design of the entire project, the coding phase of the project begins.