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

news2024/11/18 23:26:26

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

文章目录

  • 一、软件开发整体介绍
    • 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 退出功能实现
  • 参考资料

一、软件开发整体介绍

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文件，导入表结构和数据

在这里插入图片描述

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

序号表名说明
1employee员工表
2category菜品和套餐分类表
3dish菜品表
4setmeal套餐表
5setmeal_dish套餐菜品关系表
6dish_flaver菜品口味关系表
7user用户表(C端）
8address_book地址薄表
9shopping_cart购物车表
10orders订单表
11order_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 退出功能实现

处理逻辑为：

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

代码实现：

在 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1386048.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux Kernel 4.14--EOF

Linux Kernel 4.14--EOF

2017 年&#xff0c;Linux 内核长期支持版本&#xff08;LTS&#xff09;的支持时间从原来的2年增加到6年。2023年下半年举行的开源欧洲峰会&#xff0c;LTS 的支持时间取消来了6年&#xff0c;再次缩短到了 2 年。 首个获得6年支持的版就是是 4.14。 在六年支持之后&#xf…
阅读更多...
方案解决：5G基站节能及数字化管理

方案解决：5G基站节能及数字化管理

截至2023年10月&#xff0c;我国5G基站总数达321.5万个&#xff0c;占全国通信基站总数的28.1%。然而&#xff0c;随着5G基站数量的快速增长&#xff0c;基站的能耗问题也逐渐日益凸显&#xff0c;基站的用电给运营商带来了巨大的电费开支压力&#xff0c;降低5G基站的能耗成为…
阅读更多...
推荐一款实用的免费开源局域网传输工具！轻松搭建网盘的神器！

推荐一款实用的免费开源局域网传输工具！轻松搭建网盘的神器！

本文小编给大家分享一款免费开源软件 Filebrowser&#xff0c;使用它可以轻松搭建属于你的个人网盘和网页版文件管理器。 它能做什么呢&#xff1f;想必大家也都用过百度网盘或阿里云盘之类的云存储服务&#xff0c;将自己的所有数据都存储在别人的服务器上&#xff0c;所谓的在…
阅读更多...
国图公考：2024山东省事业单位发布招聘公告

国图公考：2024山东省事业单位发布招聘公告

更多信息可以登录山东人事考试信息查看&#xff01;
阅读更多...
加速度计:M-A552AC1 / AR1

加速度计:M-A552AC1 / AR1

M-A552传感器单元测量3轴加速度&#xff0c;精度高&#xff0c;稳定性好&#xff0c;体积小&#xff0c;功耗低。该传感器单元采用最新技术来提高性能并提供更宽的传感带宽。具有控制器局域网(CAN)接口或RS422接口&#xff0c;支持主机通信 般描述 M-A552是一个三轴数字输出加…
阅读更多...
3、电科院FTU检测标准学习笔记-功能检测1

3、电科院FTU检测标准学习笔记-功能检测1

作者简介&#xff1a; 本人从事电力系统多年&#xff0c;岗位包含研发&#xff0c;测试&#xff0c;工程等&#xff0c;具有丰富的经验 在配电自动化验收测试以及电科院测试中&#xff0c;本人全程参与&#xff0c;积累了不少现场的经验 目录 通用功能试验技术要求短路故障设置…
阅读更多...
电商API接口主要应用场景有哪些？

电商API接口主要应用场景有哪些？

随着互联网技术的不断进步和电商行业的迅猛发展&#xff0c;电商API接口在商品交易、物流配送、客户服务等方面发挥着越来越重要的作用。本文将深入探讨电商API接口的技术原理、应用场景、开发方法以及优缺点。 一、技术原理 电商API接口是基于HTTP、TCP、IP等网络协议实现的…
阅读更多...
RK3568驱动指南｜驱动基础进阶篇-进阶7 向系统中添加一个系统调用

RK3568驱动指南｜驱动基础进阶篇-进阶7 向系统中添加一个系统调用

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
KaiwuDB × 风电企业 | 高性能、低成本、释放数据价值

KaiwuDB × 风电企业 | 高性能、低成本、释放数据价值

项目背景 某风电企业是国内一流的大型风电装备公司&#xff0c;其自主研发建设了新一代高标准风电 SCADA 系统&#xff0c;专门用于解决风场风机状态监控、发电监测、综合能源管控、智能化运管等难题。 现公司已承接多个风场的风机管理运营工作&#xff0c;共计包含 96 台风力…
阅读更多...
腾讯云 IPv6 解决方案

腾讯云 IPv6 解决方案

产品矩阵全覆盖 腾讯云全线产品 All in IPv6&#xff1b;云服务器、私有网络、负载均衡、内容分发、域名解析、DDoS 高防等都已支持 IPv6。 全球 IPv6 基础设施 腾讯云在全球开放25个地理区域&#xff0c;运营53个可用区&#xff1b;目前已有多个地域提供 IPv6 接入能力。 …
阅读更多...
STC51+TLC2543+ADXL335+proteus

STC51+TLC2543+ADXL335+proteus

51单片机解析adxl335振动检测蜂鸣器报警课设 通过按键调整振动检测阈值 传感器介绍 TLC2543&#xff1a;12 位精密模数转换器&#xff0c;原理图与引脚功能描述如下所示&#xff1a; 引脚功能1~9、11、12模拟量输入通道10GND电源地13REF-为负基准电压端14REF为正基准电压端…
阅读更多...
Leetcode20-唯一摩尔斯密码词（804）

Leetcode20-唯一摩尔斯密码词（804）

1、题目 国际摩尔斯密码定义一种标准编码方式&#xff0c;将每个字母对应于一个由一系列点和短线组成的字符串&#xff0c; 比如: ‘a’ 对应 “.-” &#xff0c; ‘b’ 对应 “-…” &#xff0c; ‘c’ 对应 “-.-.” &#xff0c;以此类推。 为了方便&#xff0c;所有 26…
阅读更多...
Guava RateLimiter预热模型

Guava RateLimiter预热模型

本文已收录至我的个人网站&#xff1a;程序员波特&#xff0c;主要记录Java相关技术系列教程&#xff0c;共享电子书、Java学习路线、视频教程、简历模板和面试题等学习资源&#xff0c;让想要学习的你&#xff0c;不再迷茫。 什么是流量预热 我们都知道在做运动之前先得来几组…
阅读更多...
GPT的版本发展历史及特点

GPT的版本发展历史及特点

版本介绍 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一系列基于Transformer架构的预训练语言模型&#xff0c;由OpenAI推出。以下是GPT的版本发展、特点和区别&#xff1a; GPT-1 GPT-1是最早发布的版本&#xff0c;于2018年发布。它具有1.17亿个参数&…
阅读更多...
反爬虫策略：使用FastAPI限制接口访问速率

反爬虫策略：使用FastAPI限制接口访问速率

目录 引言 一、网络爬虫的威胁 二、FastAPI 简介 三、反爬虫策略 四、具体实现 五、其他反爬虫策略 六、总结 引言 在当今的数字时代&#xff0c;数据已经成为了一种宝贵的资源。无论是商业决策、科学研究还是日常生活&#xff0c;我们都需要从大量的数据中获取有价值的…
阅读更多...
dhcp 时间同步 详细介绍

dhcp 时间同步 详细介绍

装服务程序步骤 1.如果有默认配置 请先备份 再进行修改 2.修改完配置文件 请重启服务或重新加载配置文件 否则不生效 注意&#xff1a;有的软件 安装包的名字和 系统里服务程序的名字不一样 htttp httpd openssh-server ssh 高阶级改防火墙 一&#xff0c; dhcp自动分配IP地…
阅读更多...
中国关心下一代工作委员会健康体育发展中心美育舞蹈考官一王雪

中国关心下一代工作委员会健康体育发展中心美育舞蹈考官一王雪

王雪—— 《中国关心下一代工作委员会》健康体育发展中心、美育舞蹈考官、评委 北京舞蹈学院舞蹈编导 朝阳区小红门地区文化艺术-领头人 中国舞舞蹈家协会会员 2019年7月7日中国观网第六届京津冀淑女 2021年辅导学生登上央视春晚 《听我说》 2023年4月22日带学生参加万人…
阅读更多...
资深老鸟总结，性能测试体系-知识分享，测试之路养成...

资深老鸟总结，性能测试体系-知识分享，测试之路养成...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 开始性能测试前需…
阅读更多...
【Python】Pyside2 可视化实现：每秒复制源文件一行到目标文件并打印日志

【Python】Pyside2 可视化实现：每秒复制源文件一行到目标文件并打印日志

背景&#xff1a; 博主在某个项目中&#xff0c;需要模拟每秒钟生成一行数据&#xff0c;所以有了该博客的想法&#xff0c;其中有线程的内容&#xff0c;为了防止主界面卡住 效果&#xff1a; 代码&#xff1a; import sys import threading import timeimport openpyxl im…
阅读更多...
盛元广通实验动物中心饲养管理系统2.0

盛元广通实验动物中心饲养管理系统2.0

盛元广通实验动物中心饲养管理系统2.0主要功能包括&#xff1a;访客登记、笼位/架管理、笼位预约、动物订购、伦理审查、谱系管理、饲养繁育管理、动物房消毒管理、费用管理、垫料管理等功能。实验室动物中心饲养管理系统是一个综合性的管理平台&#xff0c;主要用于实验动物的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023