本项目以当前热门的外卖点餐为业务基础，业务真实、实用、广泛。基于流行的Spring Boot、mybatis plus等技术框架进行开发，体验真实项目开发流程、需求分析过程和代码实现过程。以此锻炼需求分析能力、编码能力、bug调试能力，增长开发经验。——摘自黑马程序员

一、开发环境搭建

（一）数据库环境搭建

启动Navicat，创建mysql连接
创建项目需要的数据库 - reggie，字符集采用utf8mb4

在这里插入图片描述

导入数据库脚本：db_reggie.sql
查看数据库中的表

（二）Maven项目创建

1.创建Maven

创建Maven项目，配置项目信息
单击【Finish】按钮，创建成功

2.检查检查项目编码、maven仓库配置以及jdk配置

在这里插入图片描述

检验maven环境变量是否配置正确
在maven配置文件添加阿里镜像源
检查IntelliJ IDEA里maven仓库的配置
检查jdk配置情况

3.添加项目相关依赖和插件

在pom.xml文件里添加相关依赖和构建插件

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.4</version>
        <relativePath/>
    </parent>
    <groupId>net.hw</groupId>
    <artifactId>ReggieTakeOut</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <java.version>11</java.version>
    </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.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba.fastjson2</groupId>
            <artifactId>fastjson2</artifactId>
            <version>2.0.14</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</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.2.12</version>
        </dependency>
    </dependencies>

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

4.创建应用属性文件

在resources目录下创建应用属性文件 - application.yml

#配置服务器
server:
  port: 8080  #端口号

#配置Spring框架
spring:
  application: ReggiedTakeOut #应用名称
  datasource: #数据源
    druid: #druid数据源
      driver-class-name: com.mysql.cj.jdbc.Driver #数据库驱动程序
      url: jdbc:mysql://localhost:3306/reggie #数据源地址
      username: root #用户名
      password: 123456 #密码

#配置mybatis-plus插件
mybatis-plus:
  configuration: #配置
    map-underscore-to-camel-case: true #将字段名映射成实体属性时，转换下划线，按照驼峰命名法映射
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #日志实现类
  global-config: #全局配置
    db-config: #数据库配置
      id-type: auto #数据库ID自增

5.安装lombok插件

在设置对话框里找到plugins，搜索lombok，单击绿色的Install按钮

6.创建启动主类

创建net.xxx包，然后在包里创建ReggieTakeOutApplication类

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

@Slf4j
@SpringBootApplication
public class ReggieTakeOutApplication {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run(ReggieTakeOutApplication.class, args);
        log.info("瑞吉外卖项目启动成功~");
    }
}

运行程序，查看效果

在这里插入图片描述

7.拷贝静态资源和模板页面

在前端资源里找到backend与frontend目录,拷贝到resources目录
测试能否访问模板页面 - 后端的首页 - index.html
启动应用，在浏览器里访问http://localhost:8080/backend/index.html

在这里插入图片描述

此时会显示404，即找不到该页面

8.创建MVC配置类，做静态资源映射

创建config子包，在包里创建WebMvcConfig类
测试能否访问后端的首页 - /backend/index.html

二、后台登录功能开发

1、需求分析

（一）页面原型展示

找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.html
单击登录.html 页面
登录页面前端页面在输入用户名和密码后点登录时调用ajax函数并将用户名和密码传至后台，后台控制器要编写相应的处理函数，对提交的数据进行业务处理，然后将处理结果返回给前端。
查看login.html 页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞吉外卖管理端</title>
  <link rel="shortcut icon" href="../../favicon.ico">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css">
  <link rel="stylesheet" href="../../styles/login.css">
  <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
  <style>
    .body{
      
      
      min-width: 1366px;
    }
  </style>
</head> 

<body>
  <div class="login" id="login-app">
    <div class="login-box">
      <img src="../../images/login/login-l.png" alt="">
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
          <div class="login-form-title">
            <img src="../../images/login/logo.png" style="width:139px;height:42px;" alt="" />
          </div>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
              prefix-icon="iconfont icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
              @click.native.prevent="handleLogin">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../js/validate.js"></script>
  <script src="../../api/login.js"></script>

  <script>
    new Vue({
      
      
      el: '#login-app',
      data() {
      
      
        return {
      
      
          loginForm:{
      
      
            username: 'admin',
            password: '123456'
          },
          loading: false
        }
      },
      computed: {
      
      
        loginRules() {
      
      
          const validateUsername = (rule, value, callback) => {
      
      
            if (value.length < 1 ) {
      
      
              callback(new Error('请输入用户名'))
            } else {
      
      
              callback()
            }
          }
          const validatePassword = (rule, value, callback) => {
      
      
            if (value.length < 6) {
      
      
              callback(new Error('密码必须在6位以上'))
            } else {
      
      
              callback()
            }
          }
          return {
      
      
            'username': [{
      
       'validator': validateUsername, 'trigger': 'blur' }],
            'password': [{
      
       'validator': validatePassword, 'trigger': 'blur' }]
          }
        }
      },
      created() {
      
      
      },
      methods: {
      
      
        async handleLogin() {
      
      
          this.$refs.loginForm.validate(async (valid) => {
      
      
            if (valid) {
      
      
              this.loading = true
              let res = await loginApi(this.loginForm)
              if (String(res.code) === '1') {
      
      
                localStorage.setItem('userInfo',JSON.stringify(res.data))
                window.location.href= '/backend/index.html'
              } else {
      
      
                this.$message.error(res.msg)
                this.loading = false
              }
            }
          })
        }
      }
    })
  </script>
</body>

</html>

Vue对象通过el属性绑定了id属性为login-app的div元素
Vue对象通过data() 方法绑定JSON数据loginForm，通过computed绑定校验规则 loginRules
Vue对象通过methods绑定对登录表单数据进行处理的一步方法handleLogin
在前端处理函数里，有后端处理函数返回的结果，保存在res变量里，里面有三个数据：res.code、res.data、res.msg，这就要求后端处理函数返回JSON数据必须要包含这三项内容

（二）登录页面展示

页面位置：在resource/backend/page/login/login.html
为什么Vue对象里要绑定这个用户登录数据呢？
因为员工表employee里有一条数据：admin与123456（MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e)
单击【登录】按钮，首先进行校验，如果校验通过，按钮标题就会变成登录中……，如果校验失败，按钮标题就依然是登录

（三）查看登录请求信息

按F12键进入浏览器的调试模式
说明单击登录按钮通过客户端校验之后，请求的URL：
http://localhost:8080/employee/login
后面我们会在雇员控制器里编写相应的处理函数login()

@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {
    
    
   
    @PostMapping("/login")
    public R<Employee> login(HttpRequest request, @RequestBody Employee employee) {
    
    
        return null;
    }
}

（四）数据模型 - 雇员表

查看雇员表结构

2、代码开发

（一）创建雇员实体类

ORM（Object Relation Mapping）对象关系映射
雇员实体类（Employee）— 雇员表（employee）

序号	实体属性名	关系字段名
1	id	id
2	name	name
3	username	username
4	password	password
5	phone	phone
6	sex	sex
7	idNumber	id_number
8	status	satus
9	createTime	create_time
10	status	status
11	createUser	create_user
12	updateUser	update_user

创建entity子包在里面创建雇员实体类 - Employee

package net.cch.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;

/**
 * 功能: 员工实体类
 * 作者: 陈春宏
 * 时间: 2022/10/27 11:16
 */

@Data //Lombok注解，注在类上，提供类的get、set、equals、hashCode、CanEqual、toString方法
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; //对应id_number

    private Integer status;

    private LocalDateTime createTime;

    private LocalDateTime updateTime;

    @TableField(fill = FieldFill.INSERT) //mybatis-plus注解，填充策略
    private Long createUser;//对应字段 -create_user

    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;//对应字段 -update_user


}

（二）创建雇员映射器接口

创建mapper子包，在mapper子包里创建雇员映射器接口 - EmployeeMapper
采用了mybatis-plus插件，就不用再去创建对应的映射器配置文件（EmployeeMapper.xml）

在这里插入图片描述

package net.cch.reggie.mapper;

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

/**
 * 功能:EmployeeMapper接口
 * 作者: 陈春宏
 * 时间: 2022/10/27 21:20
 */
@Mapper //交给spring容器来管理
public interface EmployeeMapper extends BaseMapper<Employee> {
    
    

}

（三）创建雇员服务

1、创建雇员服务接口

创建service子包，在service包里创建雇员服务接口 - EmployeeService
采用mybatis-plus插件，代码及其简单，只需要继承IService<Employee>接口

package net.cch.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import net.cch.reggie.entity.Employee;


/**
 * 功能: EmployeeService接口
 * 作者: 陈春宏
 * 时间: 2022/10/27 21:21
 */

public interface EmployeeService extends IService<Employee> {
    
    
}

2、创建雇员服务接口实体类

在net.cch.service包里创建impl子包，在子包里创建雇员服务接口实体类 - EmployeeServiceImpl
在这里插入图片描述

package net.cch.reggie.service.impl;

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

/**
 * 功能: EmployeeService实现类
 * 作者: 陈春宏
 * 时间: 2022/10/27 21:26
 */
@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
    
    

}

（四）创建返回结果类

服务器端所有处理方法返回结果都封装到这个通用类里
创建common子包，里创建返回结果类 - R

package net.cch.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;
    }

}

（五）创建雇员控制器

创建controller子包，在子包下创建 - EmployeeController

package net.cch.reggie.controller;

import 
import lombok.extern.slf4j.Slf4j;
import net.cch.reggie.common.R;
import net.cch.reggie.entity.Employee;
import net.cch.reggie.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;


/**
 * 功能: 员工管理控制层
 * 作者: 陈春宏
 * 时间: 2022/10/27 21:28
 */
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    
    

    @Autowired
    private EmployeeService employeeService;

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

登录方法处理逻辑

1、将页面提交的密码password进行md5加密处理
2、根据页面提交的用户名username查询数据库
3、如果没有查询到则返回登录失败结果
4、密码比对，如果不一致则返回登录失败结果
5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
6、登录成功，将员工id存入Session并返回登录成功结果

将页面提交的密码password进行md5处理

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

根据页面提交的用户名username查询数据库
一般情况下，按用户名查询，返回的是一个记录集，但是雇员表对用户名字短做了唯一约束。所以按用户名查询雇员表，只有两种情况：要么没找到，要么找到一条。

//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("账号已禁用！");
        }

登录成功，将员工id存入到Session并返回登录结果

//6、登录成功，将员工id存入到Session并返回登录结果

        request.getSession().setAttribute("Employee",emp.getId());
        return R.success(emp);

3、功能测试

（一）修改超时配置

在resources/backend/js/request.js文件里设置超时为1000000毫秒，便于后面做断点调试

（二）设置断点

在EmployeeController里设置断点
查看控制台信息

（四）测试登录 - [成功]

浏览器访问 http://localhost:8080/backend/page/login/login.html
按F12键，打开开发者工具
使用用户名和密码登录，admin : 123456 ,单击登录按钮
查看断点调试信息
单击[Step Over] 按钮3次，判断用户是否错误
单击【Step Over】按钮，判断密码是否错误
单击【Step Over】按钮，判断雇员状态是否已禁用
单击【Step Over】按钮3次，返回登录成功结果
此时，查看登录页面，登录成功，会本地存储用户信息

（五）测试登录 - [失败]

浏览器访问 http://localhost:8080/backend/page/login/login.html
测试用户名登录失败
测试密码比对失败
测试员工状态禁用，修该employee表的status字段改为0

三、后台退出功能开发

1、需求分析

员工登录成功后，页面跳转到后台系统首页(backend/index.html),此时会显示当前登录用户的姓名，如果员工需要退出系系统，直接点击右侧的退出按钮即可退出系统，退出系统后页面应跳转回登录页面。
员工登录成功后跳转到系统首页
显示当前用户登录
通过localStorage方法得到用户登录信息
查看存储好的userinfo信息

2、代码开发

用户点击页面中退出按钮，发送请求，请求地址为/employee/logout,请求方式为POST.

（一）清理Session中的用户id

在这里插入图片描述

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

        return null;

    }

（二）返回结果

在这里插入图片描述

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

实训案例——【瑞吉外卖项目】

一、开发环境搭建

（一）数据库环境搭建

（二）Maven项目创建

1.创建Maven

2.检查检查项目编码、maven仓库配置以及jdk配置

3.添加项目相关依赖和插件

4.创建应用属性文件

5.安装lombok插件

6.创建启动主类

7.拷贝静态资源和模板页面

8.创建MVC配置类，做静态资源映射

二、后台登录功能开发

1、需求分析

（一）页面原型展示

（二）登录页面展示

（三）查看登录请求信息

（四）数据模型 - 雇员表

2、代码开发

（一）创建雇员实体类

（二）创建雇员映射器接口

（三）创建雇员服务

1、创建雇员服务接口

2、创建雇员服务接口实体类

（四）创建返回结果类

（五）创建雇员控制器

3、功能测试

（一）修改超时配置

（二）设置断点

（四）测试登录 - [成功]

（五）测试登录 - [失败]

三、后台退出功能开发

1、需求分析

2、代码开发

（一）清理Session中的用户id

（二）返回结果

3、功能测试

（一）重启服务

（二）测试退出

猜你喜欢