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

发布时间：2024年01月12日

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

一、软件开发整体介绍

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("退出成功");
}

参考资料

idealzouhu/reggie-take-out: 瑞吉外卖项目, 利用SpringBoot + SSM技术栈实现 (github.com)

黑马程序员Java项目实战《瑞吉外卖》bilibili

文章来源:https://blog.csdn.net/weixin_44814196/article/details/135551595
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

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

文章目录

一、软件开发整体介绍

1.1软件开发流程

1.2 角色分工

1.3 软件环境

二、瑞吉外卖项目介绍

2.1 项目介绍

2.2 产品原型展示

2.3 技术选型

2.4 功能架构

2.5 角色

三、开发环境搭建

3.1 创建mysql数据库

3.2 导入表结构和数据

3.3 创建maven项目

3.4 导入项目配置文件

3.5 设置SpringBoot启动类

3.6 设置静态资源

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

4.1 需求分析

4.2 登录页面前端代码分析

4.3 导入结果类

4.4 创建登录方法

4.5 功能分析

五、后台退出功能

5.1 需求分析

5.2 前端代码分析

5.3 退出功能实现

参考资料