Desarrollo e implementación del sistema de pedidos de applets de WeChat

Página de inicio del autor: Programación Qianzhihe

Sobre el autor: Java, front-end, desarrollo de Pythone durante muchos años, trabajé como alzado, gerente de proyectos, arquitecto

Contenido principal: desarrollo de proyectos Java, desarrollo de diseños de graduación, clasificación de tecnología de entrevistas, uso compartido de la última tecnología

1. Introducción al proyecto

       Con la penetración paulatina de la tecnología de Internet en la vida, los hábitos de vida y consumo de las personas han sufrido grandes cambios. En cuanto a las comidas en restaurantes, también se ha popularizado la aplicación de la tecnología de Internet y la tecnología de Internet móvil, por ejemplo, el sistema de pedidos de restaurantes que apareció hace unos años reemplazó la forma tradicional de ordenar de los menús en papel a través de la tecnología de la información. Este método puede facilitar que los clientes hagan pedidos y llamen y, en segundo lugar, es conveniente para los comerciantes llevar a cabo una gestión unificada de pedidos individuales, lo que reduce la tasa de error de los pedidos y mejora la experiencia del usuario, por lo que puede ser ampliamente utilizado y popularizado

       El surgimiento de Internet móvil ha hecho que el empoderamiento de los teléfonos inteligentes sea más extenso. Tencent WeChat lanzó los miniprogramas de WeChat de manera oportuna, lo que permite a los usuarios de teléfonos inteligentes realizar la gestión y participación de la información correspondiente a través de WeChat. El formato comercial se implanta directamente en el dispositivo móvil. Internet desde la PC tradicional Internet. Esta aplicación de aplicación liviana es muy conveniente para los usuarios y también brinda mucho tráfico a los comerciantes a través de WeChat.

     El lanzamiento de las funciones de los miniprogramas de WeChat ha facilitado en gran medida a los más de 200 millones de usuarios de WeChat en todo el país y construyó un gran imperio comercial en este ecosistema, y ​​las aplicaciones desarrolladas por los miniprogramas han penetrado rápidamente en varias industrias. También ha habido un cambio sistemático en la aplicación de la tecnología de la información en la industria de la restauración. Por ejemplo, la función de auto-pedido del usuario se realiza a través del applet WeChat, lo que facilita enormemente al usuario y reduce el límite de distancia para hacer el pedido. El usuario puede enciende el teléfono móvil en el restaurante. También puedes pedir comida de camino al restaurante o incluso en casa usando el applet de WeChat, rompiendo las limitaciones de tiempo y espacio y haciéndolo más flexible y conveniente. Después de la investigación y el análisis de campo, basado en la investigación sobre el applet de WeChat, se desarrolló este sistema de pedidos de applets de WeChat para contribuir a la construcción de información de la industria de la restauración.

De acuerdo con el análisis anterior de los requisitos funcionales del sistema de pedidos de applets de WeChat, se diseña el diagrama de estructura funcional del sistema de pedidos de applets de WeChat, como se muestra en la Figura 1-1 a continuación.

 

Figura 1-1 Diagrama de estructura de funciones del sistema

     Los usuarios front-end inician sesión en el applet, utilizando el enlace de cuenta de WeChat para iniciar sesión. Actualmente, debido a que la cuenta de prueba no tiene este permiso, solo se puede probar como desarrollador. Los usuarios de front-end pueden navegar por las comidas lanzadas por el sistema en el applet del teléfono móvil para realizar el proceso de pedido completo. Puede agregar la comida correspondiente al carrito de compras, realizar un pedido de compra y ver la información relevante del pedido.

    Los usuarios en segundo plano deben iniciar sesión para realizar las operaciones correspondientes, principalmente para la gestión de datos comerciales correspondiente.

    Administración de usuarios: puede administrar la información de los usuarios en el front-end y el back-end, y realizar las operaciones correspondientes de adición, eliminación, modificación y consulta de datos.

    Gestión de comidas: puede gestionar la información de comidas liberada por el sistema de pedidos y realizar las operaciones correspondientes de adición, eliminación, modificación y consulta de datos.

    Gestión de pedidos: realice las operaciones de gestión correspondientes en la información de pedidos de los usuarios front-end.

    Gestión de clasificación: realiza principalmente la gestión de clasificación de las comidas que se muestran en la pantalla de pedidos frontal.

    Gestión del sistema: Puede realizar principalmente la operación de gestión de la información básica relevante del sistema.

2. Introducción al medio ambiente

Desarrollo de back-end:

Configuración regional: Java: jdk1.8

Base de datos: Mysql: mysql5.7

Servidor de aplicaciones: Tomcat: tomcat8.5.31

Herramienta de desarrollo: IDEA o eclipse

Desarrollo frontal:

Herramientas de desarrollo: herramientas de desarrollo de WeChat

Tecnología de desarrollo: subprograma WeChat

El conjunto adopta el desarrollo separado de front-end y back-end, y el front-end y el back-end se prueban por separado

Tres, pantalla del sistema

3.1 Visualización de los módulos de función WeChat Mini Program

3.1.1 Visualización de la página principal

   El front-end del pedido del applet de WeChat es principalmente para realizar la operación de pedido, que incluye principalmente los módulos de pedido de reserva, exploración del menú, pedidos telefónicos y servicio al cliente. La interfaz de operación específica se muestra en la Figura 4-1 a continuación.

Figura 3-1 Interfaz de la página de inicio de la página frontal

 

3.1.2 Módulo de navegación del menú frontal

Los usuarios ingresan al sistema de pedidos de WeChat e ingresan al menú de exploración para ver la información de alimentos publicada por el restaurante, como se muestra en la Figura 3-2 a continuación:

Figura 3-2 Interfaz de exploración del menú

3.1.3 Módulo de carrito de compras de usuario front-end

    Después de que los usuarios front-end de pedido del applet de WeChat inicien sesión en el sistema, pueden ingresar al módulo de pedido de reserva para agregar comidas al carrito de compras. El inicio de sesión del usuario vincula directamente la cuenta de WeChat del usuario para iniciar sesión, lo cual es muy conveniente. La interfaz Agregar carrito de compras se muestra en la Figura 3-3 a continuación.

Figura 3-3 Interfaz de operación de agregar carrito de compras del usuario front-end

3.1.4 Módulo de pago de pedidos de usuario front-end

    Después de iniciar sesión en el sistema de pedidos, el usuario front-end puede ingresar al módulo de pedidos de reserva para agregar la comida favorita al carrito de compras, enviar el pedido y realizar el pago de la compra. Después de completar la compra de la comida y completar toda la operación del pedido, puede comentar sobre la comida. La interfaz de gestión relevante se muestra en la Figura 3-4 a continuación.

Figura 3-4 Interfaz de pago de pedidos de usuario front-end

3.1.4 Módulo de gestión de pedidos personales del usuario front-end

    Después de que los usuarios front-end de pedidos del subprograma WeChat inicien sesión en el sistema, pueden administrar la información de pedidos personales en el módulo de administración de pedidos personales en el módulo Mi. La interfaz de administración de pedidos personales del usuario front-end se muestra en la Figura 3-5 a continuación.

Figura 3-5 Interfaz de gestión de pedidos personales del usuario front-end

3.2 Visualización de módulos de función de fondo

3.2.1 Función de inicio de sesión de usuario

    Si un usuario en segundo plano de pedido del applet de WeChat desea administrar y operar la información relevante del restaurante, primero debe iniciar sesión en el sistema antes de iniciar la operación relevante. Después de ingresar el número de teléfono móvil y la contraseña, la interfaz de inicio de sesión del usuario se muestra en la Figura 3-6.

Figura 3-6 Interfaz de inicio de sesión de usuario

3.2.2 Función de gestión de usuarios

    Después de que el usuario administrador del sistema de pedidos del subprograma WeChat inicie sesión en el sistema, puede ingresar al menú de administración de usuarios para administrar la información del usuario administrador correspondiente. La interfaz de administración de usuarios se muestra en las Figuras 3-7 y 3-8 a continuación:

Figura 3-7 Diagrama de la interfaz de la función de administración de usuarios en segundo plano

Figura 3-8 Interfaz para agregar usuarios en segundo plano

3.2.3 Interfaz de usuario de la operación de gestión de comidas en segundo plano

    Después de que el usuario administrador de pedidos del applet de WeChat inicie sesión en el sistema, puede ingresar al menú de administración de alimentos para administrar la información de alimentos correspondiente. Incluye principalmente la operación de agregar, modificar, consultar y eliminar comidas, etc. Al agregar comidas, puede especificar las imágenes de las comidas para mostrar. La interfaz de operación de la gestión de información de comidas se muestra en las Figuras 3-9 y 3-10 a continuación.

Figura 3-9 Interfaz de interfaz de usuario de la función de administración de comidas en segundo plano

Figura 3-10 Interfaz de interfaz de usuario para nuevas funciones de comidas de fondo

3.2.4 Interfaz de usuario de la operación de gestión de pedidos de alimentos en segundo plano

    Después de que el usuario administrador del sistema de pedidos del subprograma WeChat inicie sesión en el sistema, puede ingresar al menú de administración de pedidos de alimentos para administrar la información correspondiente del pedido de alimentos. Incluye principalmente la consulta de pedidos de comidas, la vista de detalles de pedidos, etc. Al agregar comidas, puede cargar imágenes de las comidas para mostrarlas. La interfaz de gestión de información de pedidos se muestra en las Figuras 3-11 y 3-12 a continuación.

Figura 3-11 Interfaz de interfaz de usuario de la función de gestión de pedidos en segundo plano

Figura 3-12 Interfaz de interfaz de usuario para ver los detalles del pedido en segundo plano

En cuarto lugar, la pantalla del código central

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. Resumen del proyecto

    Los usuarios del sistema de pedido de applets de WeChat incluyen principalmente dos roles de usuario, uno es el rol de administrador y el otro es el rol de usuario front-end. Las funciones específicas de estos dos roles son las siguientes:

    Rol de administrador: el administrador puede realizar las operaciones de administración correspondientes después de iniciar sesión en la administración en segundo plano del sistema de pedidos del subprograma WeChat, que incluye principalmente: administración de usuarios, administración de comidas, administración de pedidos, administración de clasificaciones y otras operaciones;

     Rol de usuario de front-end: después de iniciar sesión en el sistema de pedidos del miniprograma WeChat, los usuarios de front-end pueden buscar comidas, agregar a los carritos de compras, ordenar comidas en línea y administrar pedidos personales.

     La función general del sistema está completa. De acuerdo con el análisis de los requisitos del sistema de pedidos de applets de WeChat, se lleva a cabo el diseño del esquema del sistema de pedidos de applets de WeChat y el diseño detallado se lleva a cabo sobre esta base. Una vez que se completa el diseño detallado de todo el proyecto, comienza la fase de codificación del proyecto.

Supongo que te gusta

Origin blog.csdn.net/BS009/article/details/124996625
Recomendado
Clasificación