【瑞吉外卖的搭建】

最新推荐文章于 2023-08-05 21:28:09 发布
最新推荐文章于 2023-08-05 21:28:09 发布
阅读量1.4k 收藏 38
点赞数 2
文章标签： 数据库 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZB_XM/article/details/128137238
版权

文章目录

瑞吉外卖搭建流程

1. 软件开发流程

在这里插入图片描述

2.瑞吉外卖项目概述

在这里插入图片描述

3. 开发环境搭建

一、数据库环境搭建

（一）启动Navicat

  • 启动Navicat，创建mysql连接

（二）数据库设计

  • 数据库设计：概念设计（E-R图）、逻辑设计、物理设计
1、概念设计

  • 概念设计是数据库设计的核心环节。通过对用户需求进行综合、归纳与抽象，形成一个独立于具体DBMS的概念模型。
    （1）明确建模目标（模型覆盖范围）
    （2）定义实体集（自底向上标识和定义实体集）
    （3）定义联系（实体间关联关系）
    （4）建立信息模型（构造ER模型）
    （5）确定实体集属性（属性描述一个实体集的特征或性质）
    （6）对信息模型进行集成与优化（检查和消除命名不一致、结构不一致等）

  • 概念设计目前采用最广泛的是ER建模方法。将现实世界抽象为具有属性的实体及联系。1976年，Peter.Chen提出Ｅ-Ｒ模型（Entity- Relationship Model），即实体联系模型，用Ｅ-Ｒ图来描述数据库的概念模型。

  • 观点：世界是由一组称作实体的基本对象和这些对象之间的联系构成的。

  • 实体间的联系有三类：一对一联系（1：1）、一对多联系（1：n )、多对多联系（m：n）

  • E-R图示例（部分）
    在这里插入图片描述

  • 思维导图直观呈现
    在这里插入图片描述

2、逻辑设计
  • 将概念模型（如ER图）转化为DBMS支持的数据模型（如关系模型），并对其进行优化。
    image.png

（1）用户信息表

字段名类型宽度小数位数是否主键备注
idbigint200是主键
namevarchar50否姓名
phonevarchar100否手机号
sexvarchar2否性别
id_numbervarchar18否身份证号
avatarvarchar500否头像
statusint110否状态（0：禁用；1：正常）
（三）创建数据库
  • 创建项目需要的数据库 - reggie，字符集采用utf8mb4，并单击【确定】按钮
    在这里插入图片描述
  • 打开reggie数据库
    在这里插入图片描述
  • 当然，我们可以采用命令方式来创建数据库 - CREATE DATABASE reggie CHARACTER SET utf8mb4;
    在这里插入图片描述
（四）导入数据库脚本

在这里插入图片描述

  • 选择脚本存放位置
    在这里插入图片描述
  • 单击【开始】按钮，出现Finished successfully说明导入成功
    在这里插入图片描述
（五）查看数据库中的表
  • 数据库reggie包含11张表
    在这里插入图片描述

二、Maven项目搭建

  • 两种常用项目构建工具image.png

（一）创建Maven项目

  • 查看Maven版本
    在这里插入图片描述
  • 创建Maven项目，配置项目信息
    在这里插入图片描述
  • 单击【finish】按钮
    在这里插入图片描述
  • 创建完成
    在这里插入图片描述

（二）检查检查项目编码、maven仓库配置以及jdk配置

  • 创建完项目之后，我们应该检查项目编码、maven仓库配置以及jdk配置在这里插入图片描述

  • 安装maven软件
    image.png

  • 配置maven的环境变量 - 按照个人存放的文件路径进行配置
    image.png

  • 检验maven环境变量是否配置成功
    在这里插入图片描述

  • 在maven配置文件添加阿里镜像源
    在这里插入图片描述

      <mirror>
      <id>alimaven</id>
      <mirrorOf>central</mirrorOf>
      <name>aliyun maven</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
  </mirror>
</mirrors>

  • 检查IntelliJ IDEA里maven仓库的配置
    在这里插入图片描述

  • 检查jdk配置情况
    image.png
    在这里插入图片描述
    在这里插入图片描述

（三）添加项目相关依赖和插件

  • 在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>
  
    <groupId>net.Lee</groupId>
  <artifactId>ReggieTakeOut</artifactId>
  <version>1.0-SNAPSHOT</version>
  
    <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.7.4</version>
      <relativePath/> <!-- lookup parent from repository -->
  </parent>
  
    <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.5.2</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>

（四）创建应用属性文件

  • 在resources目录下创建应用属性文件 - application.yml
    在这里插入图片描述
#配置服务器
server:
  port: 8080
#配置spring框架
spring:
  application:
    name: reggie_take_out #应用名称
  datasource: #数据源
    druid:  #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: 123   #密码

#配置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自增
  • mybatis-plus的IdType枚举类型 - 定义生成ID的类型
枚举值作用
AUTO数据库ID自增
INPUT用户输入ID
ID_WORKER全局唯一ID，Long类型主键
ID_WORKER_STR字符串全局唯一ID
UUID全局唯一ID，UUID类型主键
NONE未设置主键类型

（五）安装lombok插件

  • 在设置对话框里找到plugins，搜索lombok，单击绿色的Install按钮
    在这里插入图片描述

（六）创建启动主类

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

在这里插入图片描述

package net.Lee;

/**
 * 功能：
 * 作者：LEE
 * 日期：2022年 10月20日
 */

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("瑞吉外卖启动成功");
    }
}
  • log对象的四个方法
方法名作用
info()输出普通信息
debug()输出调试信息
error()输出错误信息
warn()输出警告信息
  • 运行程序，查看效果
    在这里插入图片描述
  • 说明：如果启动项目失败，发现是端口8080被占用，如何处理？
  • 利用netstat命令查看是哪个进程占用了8080端口，查出来是PID = 10336
    image.png
  • 打开任务管理器，点开详细信息选项卡，找到进程号为10336的进程，然后结束任务即可

（七）拷贝静态资源和模板页面

  • 在前端资源里找到backend与frontend目录
    在这里插入图片描述
  • 将这两个目录拷贝到resources目录
    在这里插入图片描述
  • 测试能否访问模板页面 - 后端的首页 - index.html
    在这里插入图片描述
  • 启动应用，在浏览器里访问http://localhost:8080/backend/index.html
    在这里插入图片描述
    在这里插入图片描述

（八）创建MVC配置类，做静态资源映射

  • 创建config子包，在包里创建WebMvcConfig类
    在这里插入图片描述

  • 继承WebMvcConfigurationSupport类
    在这里插入图片描述

  • 添加方法，做静态资源映射
    在这里插入图片描述

  • 在方法里，添加两个资源映射：映射到前端和后端的静态资源
    在这里插入图片描述

  • 重启应用，可以看到调试信息 - 进行静态资源映射......
    在这里插入图片描述

  • 测试能否访问后端的首页 - http://localhost:8080/backend/index.html
    在这里插入图片描述

  • 测试能否访问前端的图片资源 - /frontend/images/demo1.png
    在这里插入图片描述

  • 到此为止，项目基础环境就搭建好了。

4. 后台登录功能开发

一、需求分析

（一）页面原型展示

  • 找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.html
    image.png

  • 点开登录.html页面登录
    在这里插入图片描述

  • 登录页面有两个文本框需要用户输入用户名和密码，客户端要进行非空校验，单击【登录】按钮之后，表单数据以JSON格式通过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
    image.png

  • 在前端处理函数里，有后端处理函数返回的结果，保存在res变量里，里面有三个数据：res.code、res.data、res.msg，这就要求后端处理函数返回JSON数据必须要包含这三项内容。

（二）登录页面展示

  • 页面位置： 项目/resources/backend/page/login/login.html
    image.png

  • 为什么Vue对象里要绑定这个用户登录数据呢？

  • 因为员工表employee里有一条数据：admin与123456（MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e）
    在这里插入图片描述

-单击【登录】按钮，首先进行校验，如果校验通过，按钮标题就会变成登录中……，如果校验失败，按钮标题就依然是登录
image.png

（三）查看登录请求信息

  • 按F12键进入浏览器的调试模式瑞吉外卖管理
    image.png
  • 说明单击登录按钮通过客户端校验之后，请求的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;
    }
}

（四）数据模型 - 雇员表

  • 查看雇员表结构
    在这里插入图片描述

二、代码开发

  • 开发流程图

（一）创建雇员实体类

  • ORM（Object Relation Mapping）对象关系映射
  • 雇员实体类（Employee）—— 雇员表（employee）
序号实体属性名关系字段名
1idid
2namename
3usernameusername
4passwordpassword
5phonephone
6sexsex
7idNumberid_number
8statusstatus
9createTimecreate_time
10updateTimeupdate_time
11createUsercreate_user
12updateUserupdate_user

  • 实体属性名采用驼峰命名法，关系字段名采用xml命名规范

  • 如果关系字段名由多个单词用下划线连接，那么实体属性名与关系字段名就不一致，需要进行一个转换，但是这个转换工作不需要手工去操作，直接在应用属性文件（application.yml）里进行设置。
    在这里插入图片描述

  • 创建entity子包
    在这里插入图片描述

  • 在net.hw.entity包里创建雇员实体类 - Employee
    在这里插入图片描述

package net.Lee.entity;

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

/**
 * 功能: 员工实体类
 * 作者: Lee
 * 时间: 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子包
    在这里插入图片描述

  • 在net.Lee.mapper包里创建雇员映射器接口 - EmployeeMapper

在这里插入图片描述

  • 采用了mybatis-plus插件，就不用再去创建对应的映射器配置文件（EmployeeMapper.xml）

在这里插入图片描述

package net.Lee.mapper;

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

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

}
  • 继承了BaseMapper<Employee>接口，无需编写任何代码，直接就实现了对Employee进行增删改查的功能。

（三）创建雇员服务

1、创建雇员服务接口

  • 创建service子包
    在这里插入图片描述

  • 在net.Lee.service包里创建雇员服务接口 - EmployeeService
    在这里插入图片描述

  • 采用mybatis-plus插件，代码及其简单，只需要继承IService<Employee>接口

package net.Lee.service;

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

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

public interface EmployeeService extends IService<Employee> {
}
2、创建雇员服务接口实现类

  • 在net.Lee.service包里创建impl子包
    在这里插入图片描述

  • 在net.Lee.service.impl子包里创建雇员服务接口实现类 - EmployeeServiceImpl

  • 注意：必须先继承ServiceImpl<EmployeeMapper, Employee>类，后实现EmployeeService接口，顺序绝对不能交换（打个不恰当的比方，继承类是与父亲的关系，实现接口是与叔叔的关系，在Java里，一个类只能继承一个父类，但是可以实现多个接口，现实生活中也是如此，一个人只能有一个父亲，但是可以有多个叔叔，父亲肯定比叔叔亲，因此排名必定在前）。

（四）创建返回结果类

  • 服务器端所有处理方法返回结果都封装到这个通用类里
  • 创建common子包
    在这里插入图片描述
  • 在net.Lee.common包里创建返回结果类 - R
package net.Lee.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子包
    在这里插入图片描述
  • 在net.Lee.controller包里创建雇员控制器类 - EmployeeController
    在这里插入图片描述
  • 基本框架代码，登录方法代码尚未编写
package net.Lee.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import lombok.extern.slf4j.Slf4j;
import net.Lee.common.R;
import net.Lee.entity.Employee;
import net.Lee.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;

/**
 * 功能: 员工管理控制层
 * 作者: Lee
 * 时间: 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) {
        //1、将页面提交的密码进行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);
    }
}
  • 登录方法处理逻辑

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)，此时会显示当前登录用户的姓名：管理员
    在这里插入图片描述

  • 如果员工需要退出系统，直接点击登录用户名右侧的按钮，即可退出系统，退出系统后页面应跳转回登录页面在这里插入图片描述

  • 此时单击按钮，系统会报404错误，因为我们在雇员控制器里尚未编写对应的退出处理方法
    在这里插入图片描述

二、代码开发

（一）代码分析

  • 我们看看后台首页 - /backend/index.html
    在这里插入图片描述

  • 退出按钮绑定的单击事件处理函数logout()
    在这里插入图片描述

  • 在脚本文件/backend/api/login.js里查看logoutApi()函数
    在这里插入图片描述

  • 'url': '/employee/logout'与'method': 'post'告诉我们应该在雇员控制器EmployeeController里定义一个logout()方法，并且添加请求映射注解@PostMapping("/logout")，该方法里做两件事：清除会话里保存的用户信息，返回成功结果

（二）编写代码

  • 打开雇员控制器EmployeeController
    在这里插入图片描述
  • 创建logout()方法，清除会话里的雇员信息，返回成功结果
    在这里插入图片描述
  • 查看雇员控制器源代码
package net.Lee.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import lombok.extern.slf4j.Slf4j;
import net.Lee.common.R;
import net.Lee.entity.Employee;
import net.Lee.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;
import javax.servlet.http.HttpSession;

/**
 * 功能: 员工管理控制层
 * 作者: Lee
 * 时间: 2022/10/27 21:28
 */
@Slf4j
@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @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并返回登录成功结果
        HttpSession session = request.getSession(); // 通过请求对象获取会话
        session.setAttribute("employee", emp.getId()); // 将雇员id保存到会话里
        return R.success(emp); // 返回登录成功结果
    }

    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request) {
        // 清除雇员信息
        request.getSession().removeAttribute("employee");
        // 返回成功结果
        return R.success("退出成功");
    }
}

（三）功能测试

  • 重启应用，访问登录页面，成功登录之后，跳转到后台首页，单击图片替换文本按钮，成功退出，返回后台登录页面
    在这里插入图片描述
热心市民小李同学
关注
  • 2
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
瑞吉外卖项目完整篇（vue+springboot+redis+mybatis-plus）
04-29
适合于学过SpringBoot+vue,会用Redis的人群（大三、大四）。 黑马视频中不曾开发的后端模块都以全部开发完成。 瑞吉外卖项目是根据黑马课程的资源项目，但黑马课程中有些模块没有开发和讲解。导致大家在学习完后还有很多的模块是不完整的。 该资源是我学习完瑞吉外卖项目后将所有的功能模块都实现了。所有的接口在后端都有相应的代码去做相应的操作。前端的请求接口在后端都有对应的实现。 下载，解压后 1、有sql文件在MySQL工具中创建数据库和表。 2、配置yml文件，配置你的数据库用户名、密码，Redis密码，端口。 3、运行Redis、启动项目即可访问。 该资源可以用来做自己的简历项目经验，当然你得看懂该项目。（我这里后端的每个模块功能、里面难懂的代码都有注释。相信大家认真阅读是很容易理解的）。
【SpringBoot项目实战+思维导图】瑞吉外卖⑥(用户地址簿功能、菜品展示、购物车、下单)
十八岁讨厌编程的博客
03-16 2427
本文涉及用户地址簿功能、菜品展示、购物车、下单等内容。
瑞吉外卖项目实战
m0_67806453的博客
12-21 1247
博客
瑞吉外卖项目部署
mengxinluguo111的博客
02-05 573
瑞吉外卖项目部署
瑞吉外卖(部署维护篇)
weixin_50340097的博客
08-18 1965
Nginx是一款轻量级的web服务器/反向代理服务器以及电子邮件(IMAP/POP3)代理服务器。其特点是占用内存少，并发能力强，事实上Nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用Nginx的网站有百度、京东等后边那一串是安装位置重点目录conf/nginx.conf nginx 配置文件html 存放静态文件(html、css、JS)logs 日志目录、存放日志文件sbin/nginx 二进制文件，用于启动。停止nginx服务。...
Docker部署SpringBoot项目-瑞吉外卖
吃肉不长胖的博客
03-31 147
部署Springboot项目
黑马瑞吉外卖项目部署到docker中
m0_62065137的博客
08-17 1555
黑马瑞吉外卖项目部署到docker中
最新java项目-瑞吉外卖
05-07
最新java项目-瑞吉外卖 最新java项目-瑞吉外卖最新java项目-瑞吉外卖
瑞吉外卖项目实战说明图文详解
02-27
瑞吉外卖项目实战说明图文详解
【瑞吉外卖】SpringBoot使用邮件发送短信验证码--完善用户登录功能
06-24
黑马程序员---瑞吉外卖--SpringBoot项目 新增sendMail（）方法，用户登录时使用QQ邮件发送验证码，完善用户登录功能。 亲测有效！
瑞吉外卖已完成，请查收
05-15
bilibili的瑞吉外卖，自己写的接口，很遗憾没有支付界面，没机会练手，需要的话就拿去吧。注意修改数据库就好了，另外数据库中的所有主键id均使用的string，因为我自己做的时候，long类型出现了前后端数据精度丢失...
黑马瑞吉外卖源码及工程项目全套
07-17
对瑞吉外卖的课上bug进行了修复，同时对留下的内容进行了补充完善，如订单系统，地址系统，分页查询之类的，都进行了测试和跑通
spring boot+elementUI前后端分离瑞吉外卖
06-29
# 瑞吉外卖 ## 软件开发整体介绍 ### 软件开发流程 - 需求分析 ：产品原型、需求分析 - 设计：产品文档、UI界面设计、概要设计、详细设计、数据库设计 - 编码： 项目代码、单元测试 - 测试： 测试用例、测试报告 ...
黑马程序员瑞吉外卖基本功能完整版
最新发布
03-01
黑马程序员瑞吉外卖基本功能完整版，可参考学习，基本的增删改查都已经完成了，视频里说的功能基本都有
瑞吉外卖+MongoDB+qq邮箱验证，实验所有源码+数据库全拷贝
06-02
瑞吉外卖所有功能实现，以及后端将MySQL更改为MongoDB数据库。根据室友建议，我把Logo也改了改，方便大家使用。
瑞吉外卖项目（超详细）
m0_59230408的博客
03-13 1145
第六天：观察删除单个套餐和批量删除套餐的请求信息可以发现，两种请求的地址和请求方式都是相同的。开发套餐信息分页查询功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。2、删除多个套餐时，页面发送ajax请求，根据提交的多个套餐id删除对应套餐。开发删除套餐功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。1、删除单个套餐时，页面发送ajax请求，根据套餐id删除对应套餐。2、页面发送请求，请求服务端进行图片下载，用于页面图片展示。实体类SetmealDish。
【瑞吉外卖之Nginx部署及命令】
蛋饼吧的博客
12-26 947
Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx的网站有:百度、京东、新浪、网易、腾讯、淘宝等。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler .ru站点（俄文: Paw6nep)开发的，第一个公开版本0.1.e发布于2004年10月4日。官网:nginx news。
【SpringBoot项目实战+思维导图】瑞吉外卖①(项目介绍、开发环境搭建、后台登陆/退出功能开发)
十八岁讨厌编程的博客
03-13 4577
本文涉及软件开发整体介绍、瑞吉外卖项目介绍、开发环境搭建、后台系统登陆功能、后台系统退出功能等内容。
Linux实战 小技巧 Linux软件安装部署 瑞吉外卖部署Linux
我亦无他，唯手熟尔
08-05 577
零基础快速入门Linux操作系统系列课程，服务零基础学员为设计基石。课程在基础的Linux系统知识之外，规划了《全方向》涉及到的Linux所需软件服务的部署实战，无论从事Java后端、大数据开发、测试、运维等方向，均可从中受益。 课程以Shell脚本、Python脚本自动化为基点，设计了大规模大数据集群部署、运维、监控、自动化项目实战，一站式收获知识和经验。并且课程结合了当下最新的云平台技术，为大家带来了Linux操作系统云上实践环节。
瑞吉外卖环境搭建模板
09-14
瑞吉外卖的环境搭建模板包括以下几个步骤： 1. 数据库环境搭建： - 启动Navicat - 创建数据库 - 导入数据库脚本 - 查看数据库的表 2. Maven项目搭建： - 创建Maven项目 - 检查项目编码、Maven仓库配置以及JDK配置 - 添加项目相关依赖和插件 - 创建应用属性文件 - 安装lombok插件 - 创建启动类 - 拷贝静态资源和模板页面 - 创建MVC配置类，做静态资源映射 3. 启动应用： - 在浏览器里访问http://localhost:8080/backend/index.html 请按照以上步骤进行环境搭建，以确保瑞吉外卖项目的正常运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热心市民小李同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值