瑞吉外卖（一）瑞吉外卖项目概述

01、软件开发整体介绍

1、软件开发流程

2、角色分工

项目经理：对整个项目负责，任务分配、把控进度
产品经理：进行需求调研，输出需求调研文档、产品原型等
UI设计师：根据产品原型输出界面效果图
架构师：项目整体架构设计、技术选型等
开发工程师：代码实现
测试工程师：编写测试用例，输出测试报告
运维工程师：软件环境搭建、项目上线

3、软件环境

开发环境(development)：开发人员在开发阶段使用的环境，一般外部用户无法访问
测试环境(testing)：专门给测试人员使用的环境，用户测试项目，一般外部用户无法访问
上产环境(production)：即线上环境，正式提供对外服务的环境

02、瑞吉外卖项目介绍

1、项目介绍

本项目（瑞吉外卖）时专门为餐饮企业（餐厅、饭店）定制的一款软件产品，包括系统管理后台和移动端应用两部分。
其中系统管理后台主要提供给餐饮企业内部员工使用，可以对餐厅的菜品、套餐、订单等进行管理维护。
移动端应用主要提供给消费者使用，可以在线浏览菜品、添加购物车、下单等

本项目共分为3期进行开发：

实现基本需求，其中移动端应用通过H5实现
针对移动端应用进行改进，使用微信小程序实现，用户使用起来更加方便
针对系统进行优化升级，提高系统的访问性能

2、产品原型展示

产品原型：就是通过一款产品成型之前的一个简单的框架，就是将页面的排版布局展现出来，使产品的初步构思有一个可视化的展示。通过原型展示，可以更加直观的了解项目的需求和提供的功能

瑞吉外卖后台（管理端）
瑞吉外卖前台（用户端）

注意：产品原型主要用户展示项目的功能，并不是最终的页面效果

3、技术选型

4、功能架构

5、角色

后台系统管理员：登录后台系统，拥有后台系统中的所有操作权限
后台系统普通员工：登录后台系统，对菜品、套餐、订单等进行管理
C端用户：登录移动端应用，可以浏览商品、添加购物车、设置地址、在线下单等

03、开发环境搭建

环境版本：MySQL 5.7 x64

1、数据库环境搭建

运行SQL文件db_reggie.sql

序号	表名	说明
1	address_book	地址簿表
2	category	菜品和套餐分类表
3	dish	菜品表
4	dish_flavor	菜品口味关系表
5	employee	员工表
6	order_detail	订单详细表
7	orders	订单表
8	setmeal	套餐表
9	setmeal_dish	套餐菜品关系表
10	shopping_cart	购物车表
11	user	用户表(C端)

2、Maven项目搭建

01.创建maven项目

02.配置依赖

代码语言：javascript复制

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <!--SpringBoot 工程-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <groupId>cn.mu00</groupId>
    <artifactId>reggie_take_out</artifactId>
    <version>1.0-SNAPSHOT</version>
    
    <properties>
        <!--指定JDK版本-->
        <java.version>1.8</java.version>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    
    <!--依赖-->
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.5</version>
            </plugin>
        </plugins>
    </build>
    
</project>

03.全局配置

代码语言：javascript复制

# 文件：resources/application.yml
server:
  port: 8080
spring:
  application:
      # 应用名称，可选
    name: reggie_take_out
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
      username: root
      password: 131400
mybatis-plus:
  configuration:
    # 在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID

04.创建启动类

首先创建工程目录：src/main/java/cn.mu00.reggie

代码语言：javascript复制

import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

// 开启日志
@Slf4j
@SpringBootApplication
public class ReggieApplication {
    public static void main(String[] args) {
        SpringApplication.run(ReggieApplication.class, args);
        log.info("项目启动成功...");
    }
}

05.导入静态资源

文件：前端资源

位置：

src/main/resources
- backend
- front

静态资源映射包：config

代码语言：javascript复制

package cn.mu00.reggie.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Slf4j
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    /**
     * 设置静态资源映射
     * @param registry
     */
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射...");
        registry
                .addResourceHandler("/backend/**")
                .addResourceLocations("classpath:/backend/");
        registry
                .addResourceHandler("/front/**")
                .addResourceLocations("classpath:/front/");
    }
}

3、测试

访问地址：http://localhost:8080/backend/index.html

04、后台登录功能开发

创建包结构

entity
service
service/impl
controller
config
common

1、需求分析

查看登录请求信息

登录地址：http://localhost:8080/backend/page/login/login.html

通过浏览器调试工具（F12），可以发现，点击登录按钮时，页面会发送请求

请求的地址：http://localhost:8080/employee/login
请求类型：Post
提交参数：username、password

2、代码开发

01.Employee实体类

创建实体类Employee，和employee表进行映射包：entity

代码语言：javascript复制

package cn.mu00.reggie.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 员工实体类
 */
@Data
public class Employee implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;

    private String username;

    private String name;

    private String password;

    private String phone;

    private String sex;
    
    private String idNumber;

    private Integer status;

    private LocalDateTime createTime;

    private LocalDateTime updateTime;

    @TableField(fill = FieldFill.INSERT)
    private Long createUser;

    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;

}

02.EmployeeMapper

包：mapper

代码语言：javascript复制

package cn.mu00.reggie.mapper;

import cn.mu00.reggie.entity.Employee;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
}

03.EmployeeService

包：service

代码语言：javascript复制

package cn.mu00.reggie.service;

import cn.mu00.reggie.entity.Employee;
import com.baomidou.mybatisplus.extension.service.IService;

public interface EmployeeService extends IService<Employee> {
}

04.EmployeeServiceImpl

包：service.impl

代码语言：javascript复制

package cn.mu00.reggie.service.impl;

import cn.mu00.reggie.entity.Employee;
import cn.mu00.reggie.mapper.EmployeeMapper;
import cn.mu00.reggie.service.EmployeeService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
}

05.EmployeeController

包：controller

代码语言：javascript复制

package cn.mu00.reggie.controller;

import cn.mu00.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RestController
@RequestMapping("employee")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;
}

05.导入返回结果类R

此类是一个通用结果类，服务端响应的所有结果最终都会包装成此种类型返回给前端页面包：common

代码语言：javascript复制

package cn.mu00.reggie.common;

import lombok.Data;
import java.util.HashMap;
import java.util.Map;

/**
 * 通用返回结果，服务端响应的所有结果都会封装成此对象
 * @param <T>
 */
@Data
public class R<T> {

    private Integer code; //编码：1成功，0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }

}

06.登录方法

位置：EmployeeController

代码语言：javascript复制

/**
 * 员工登录
 * @param request
 * @param employee
 * @return
 */
@PostMapping("/login")
public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){

    // 1、将页面提交的密码password进行MD5加密处理
    String password = employee.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());

    // 2、根据页面提交的用户名username查询数据库
    LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(Employee::getUsername, employee.getUsername());
    Employee emp = employeeService.getOne(queryWrapper);

    // 3、如果没有查询到则返回登陆失败结果
    if(emp == null){
        return R.error("登录失败");
    }

    // 4、密码比对，如果不一致则返回登陆失败结果
    if (!emp.getPassword().equals(password)){
        return R.error("登录失败");
    }

    // 5、查看员工状态，如果为已禁用状态，则返回员工已禁用的结果
    if(emp.getStatus() == 0){
        return R.error("账户已禁用");
    }

    // 6、登录成功，将员工id存入Session并返回登录成功结果
    request.getSession().setAttribute("employee", emp.getId());
    return R.success(emp);
}

3、功能测试

用户名不存在

密码错误

用户禁用

登录成功！跳转首页：http://localhost:8080/backend/index.html

05、后台退出功能开发

1、需求分析

请求地址：http://localhost:8080/employee/logout
请求类型：Post
请求参数：无

2、代码实现

位置：EmployeeController

代码语言：javascript复制

/**
 * 员工退出
 * @param request
 * @return
 */
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request){
    // 清理Session中保存的当前用户员工的id
    request.getSession().removeAttribute("employee");
    return R.success("退出成功");
}

3、功能测试

退出成功！返回登录页面：http://localhost:8080/backend/page/login/login.html
资源下载：https://pan.baidu.com/s/16jEUgWDVW0smRRC82LdoOA 提取码：1314

http html 网站功能测试

0 人点赞