瑞吉外卖笔记系列(1) —— 环境配置，后台登录和退出的功能实现

idealzouhu

已于 2024-01-13 00:05:42 修改

阅读量1.2k

点赞数 26

文章标签：笔记 springboot java spring maven

于 2024-01-12 14:17:46 首次发布

本文链接：https://blog.csdn.net/weixin_44814196/article/details/135551595

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文档主要介绍软件开发整体流程和瑞吉外卖项目，开发环境搭建步骤，以及简单的后台系统功能实现

一、软件开发整体介绍

1.1软件开发流程

软件一般开发流程如下

在这里插入图片描述

1.2 角色分工

在软件开发流程中，主要角色有：

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

1.3 软件环境

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

二、瑞吉外卖项目介绍

2.1 项目介绍

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

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

第一期主要实现基本需求，其中移动端应用通过H5实现，用户可以通过手机浏览器访问。
第二期主要针对移动端应用进行改进，使用微信小程序实现，用户使用起来更加方便。
第三期主要针对系统进行优化升级，提高系统的访问性能。

2.2 产品原型展示

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

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

2.3 技术选型

在这里插入图片描述

2.4 功能架构

在这里插入图片描述

2.5 角色

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

三、开发环境搭建

3.1 创建mysql数据库

利用navicat软件创建reggie数据库，

在这里插入图片描述

或者直接在mysql软件提供的MySQL 8.0 Command Line Client - Unicode命名界面里利用sql语句来创建

CREATE DATABASE `reggie` CHARACTER SET 'utf8mb4' COLLATE 'utf8mb4_general_ci';

3.2 导入表结构和数据

运行项目的sql文件，导入表结构和数据

在这里插入图片描述

在数据库中，不同表的具体含义如下：

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

3.3 创建maven项目

在InteliJ软件里，创建reggie_take_out项目

在这里插入图片描述

3.4 导入项目配置文件

直接从项目里面复制 pom.xml 和 application.yml 即可

3.5 设置SpringBoot启动类

创建ReggieApplication 文件，设置启动类

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

3.6 设置静态资源

将前端资源（backend和front）直接放在resourece目录下。由于静态资源没有放在template或者 static目录下，必须配置静态资源映射。

注意的是，如果设置了静态资源映射，原本默认的template或者 static目录可能会失效

四、后台系统登录功能实现

登录页面为：reggie_take_out/src/main/resources/backend/page/login/login.html

4.1 需求分析

通过浏览器调试工具(F12)，可以发现，点击登录按钮时，页面会发送请求（请求地址为 http://localhost:8080/employee/login ）并提交参数( username 和 password )

在这里插入图片描述

此时报404，是因为我们的后台系统还没有响应此请求的处理器，所以我们需要创建相关类来处理登录请求
在这里插入图片描述

具体代码分析查看视频业务开发Day1-06-后台系统登录功能_需求分析_哔哩哔哩_bilibili

4.2 登录页面前端代码分析

在reggie_take_out/src/main/resources/backend/page/login/login.html 里面，核心代码如下：

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') {      // 1 表示登录成功
          localStorage.setItem('userInfo',JSON.stringify(res.data))
          window.location.href= '/backend/index.html'
        } else {
          this.$message.error(res.msg)
          this.loading = false
        }
      }
    })
  }
}

code 字段对应我们创建的结果类 R 里面的 code字段

userInfo 将会是我们存放在浏览器里面的 Local Storage 的信息

4.3 导入结果类

创建 src/main/java/com/idealzouhu/reggie/common/R.java ，服务端响应的所有结果最终都会包装成此种类型返回给前端页面

@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;
    }

}

code 字段在前端代码里面可以看到

4.4 创建登录方法

处理逻辑如下:
1、将页面提交的密码password进行md5加密处理

2、根据页面提交的用户名username查询数据库

3、如果没有查询到则返回登录失败结果
4、密码比对，如果不一致则返回登录失败结果
5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果6、登录成功，将员工id存入Session并返回登录成功结果

在这里插入图片描述

代码实现步骤：

创建 Employee的 entity 、controller 和 service 层的类
在 EmployeeController 类里面创建方法 login()

具体代码为：

 	/**
     * 员工登录
     * @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> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(Employee::getUsername, employee.getUsername());
        Employee emp = employeeService.getOne(lambdaQueryWrapper);


        // 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);
    }

4.5 功能分析

点击 http://localhost:8080/backend/page/login/login.html 访问登录页面

当输入错误密码时，后台输出

Creating a new SqlSession
SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@3776c82] was not registered for synchronization because synchronization is not active
JDBC Connection [com.mysql.cj.jdbc.ConnectionImpl@5531150d] will not be managed by Spring
==>  Preparing: SELECT id,username,name,password,phone,sex,id_number,status,create_time,update_time,create_user,update_user FROM employee WHERE (username = ?)
==> Parameters: admin(String)
<==    Columns: id, username, name, password, phone, sex, id_number, status, create_time, update_time, create_user, update_user
<==        Row: 1, admin, 管理员, e10adc3949ba59abbe56e057f20f883e, 13812312312, 1, 110101199001010047, 1, 2021-05-06 17:20:07, 2021-05-10 02:24:09, 1, 1
<==      Total: 1
Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@3776c82]

当输入正确密码时，后台输出

Creating a new SqlSession
SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@5903fc44] was not registered for synchronization because synchronization is not active
2024-01-11 00:26:43.126 ERROR 28860 --- [nio-8080-exec-1] c.a.druid.pool.DruidAbstractDataSource   : discard long time none received connection. , jdbcUrl : jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true, jdbcUrl : jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true, lastPacketReceivedIdleMillis : 135302
JDBC Connection [com.mysql.cj.jdbc.ConnectionImpl@6617c204] will not be managed by Spring
==>  Preparing: SELECT id,username,name,password,phone,sex,id_number,status,create_time,update_time,create_user,update_user FROM employee WHERE (username = ?)
==> Parameters: admin(String)
<==    Columns: id, username, name, password, phone, sex, id_number, status, create_time, update_time, create_user, update_user
<==        Row: 1, admin, 管理员, e10adc3949ba59abbe56e057f20f883e, 13812312312, 1, 110101199001010047, 1, 2021-05-06 17:20:07, 2021-05-10 02:24:09, 1, 1
<==      Total: 1
Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@5903fc44]

五、后台退出功能

5.1 需求分析

员工登录后，页面跳转到后台系统首页界面( backend/index.html )

如果员工需要退出系统，直接点击右侧的退出按钮即可退出系统

5.2 前端代码分析

backend/index.html 页面，登录退出的前端代码为：

<img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
.........              
logout() {
            logoutApi().then((res)=>{
              if(res.code === 1){
                localStorage.removeItem('userInfo')
                window.location.href = '/backend/page/login/login.html'
              }
            })
          },

logoutApi() 在 login.js 里面

function logoutApi(){
  return $axios({
    'url': '/employee/logout',
    'method': 'post',
  })
}

5.3 退出功能实现

处理逻辑为：

清除 session中的保存的当前登录员工的id。（即从当前用户的会话（session）中移除名为 “employee” 的属性。）
输出结果

代码实现：

在 EmployeeController 类里面创建方法 logout() , 具体代码为：

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