瑞吉外卖笔记系列(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 退出功能实现
  • 参考资料

一、软件开发整体介绍

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL篇—通过Clone插件进行本地克隆数据（第二篇，总共三篇）

MySQL篇—通过Clone插件进行本地克隆数据（第二篇，总共三篇）

在上一篇文章中&#xff0c;我们深入探讨了Clone技术的多种用途&#xff0c;以及使用它所需满足的前提条件。我们也详细分析了Clone存在的限制&#xff0c;并深入了解了其背后的备份原理。今天&#xff0c;我们将继续探索MySQL Clone Plugin的强大功能&#xff0c;Clone其实最重…
阅读更多...
砥砺深耕，历伴童行 ——南阳人人社工2022年度未保项目结项回顾

砥砺深耕，历伴童行 ——南阳人人社工2022年度未保项目结项回顾

未成年人的健康成长&#xff0c;关乎国家未来和民族兴旺。2023年&#xff0c;南阳市人人社会工作服务中心在南阳市民政局的指导下&#xff0c;坚持党建引领未成年人保护服务&#xff0c;紧紧围绕“保权益&#xff0c;促发展&#xff0c;育新人”的使命任务&#xff0c;以最有利…
阅读更多...
吸嘴旋转对位贴合

吸嘴旋转对位贴合

背景&#xff1a;高精度贴片机需要在上看相机视觉定位芯片&#xff0c;芯片准确的贴合到Lead Frame里面。 问题&#xff1a;已知视觉相机给出的芯片中心位置A1(x1,y1)&#xff0c;角度θ1&#xff0c;吸嘴中心的位置A2&#xff08;x2&#xff0c;y2&#xff09;&#xff0c;需…
阅读更多...
SpringBoot多环境配置Maven Profile组

SpringBoot多环境配置Maven Profile组

Maven profile组 注意切换配置时 mvn clean下 或者 clean 加install 或者compile 编译 clean之后 install下 或者compile 编译 nohup java -Xms256m -Xmx512m -Dfile.encodingUTF-8 -jar demo.jar --spring.profiles.activeprod > system.log 2>&1 &
阅读更多...
2024软件测试该如何发展？测试员怎样在内卷中走出来？

2024软件测试该如何发展？测试员怎样在内卷中走出来？

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、行业现状 目前…
阅读更多...
便携式灯具的UL测试标准UL153介绍

便携式灯具的UL测试标准UL153介绍

UL153标准&#xff1a;UL153标准主要是描述有关使用电源线及插头作为连接工具,使用120伏电压,15或20安培的电源,并符合美国国家电器规范的便携灯.此标准也适用于那些不用插头,而用一些兼容的接线端作为连接工具的便携灯&#xff0c;同时对于使用非120伏电压&#xff0c;15or20安…
阅读更多...
Android Retrofit使用详情

Android Retrofit使用详情

一、 Retrofit是什么 Retrofit是Android用来接口请求的网络框架&#xff0c;内部是基于OkHttp实现的&#xff0c;retrofit负责接口请求的封装&#xff0c;retrofit可以直接将接口数据解析为Bean类、List集合等&#xff0c;直接简化了中间繁琐的数据解析过程 二、 Retrofit的简单…
阅读更多...
010集：with as 代码块读写关闭文件—python基础入门实例

010集：with as 代码块读写关闭文件—python基础入门实例

接009集&#xff1a; 读写文本文件的相关方法如下。 read &#xff08; size-1 &#xff09;&#xff1a;从文件中读取字符串&#xff0c; size 限制读取的字符数&#xff0c; si ze-1 指对读取的字符数没有限制。 readline &#xff08; size-1 &#xff09;&#xff1a;在…
阅读更多...
如何在知识付费平台中精准定位，选择最适合自己的？

如何在知识付费平台中精准定位，选择最适合自己的？

明理信息科技知识付费saas租户平台 在当今的知识付费时代&#xff0c;我们面临着一个重要的问题&#xff1a;如何从众多的知识付费平台中选择适合自己的平台&#xff1f;本文将为您提供一些实用的建议&#xff0c;帮助您做出正确的选择。 首先&#xff0c;我们需要了解自己的…
阅读更多...
用Python做一个2048小游戏

用Python做一个2048小游戏

文章目录 逻辑设计绘图逻辑主循环 逻辑设计 2048的逻辑无非是操作 4 4 4\times4 44的方格&#xff0c;每个方格中有一个数&#xff0c;这些数可以移动&#xff0c;如果两个相同的数字在移动时相撞了&#xff0c;就可以彼此合并。 而这个 4 4 4\times4 44的方格&#xff0c;…
阅读更多...
软件测试常见的测试用例设计方法

软件测试常见的测试用例设计方法

测试用例方法 1.等价类设计测试用例【文末有配套视频教程和免费的资料文档领取】 具体步骤&#xff1a; 1&#xff09;明确需求 2&#xff09;划分有效和无效等价类 有效等价类&#xff1a;满足需求的无效等价类&#xff1a;不满足需求的　 - 规则 - 长度 - 类型 - 是否为…
阅读更多...
Skywalking 的Docker部署测试-Tempo替代方案

Skywalking 的Docker部署测试-Tempo替代方案

如果监控系统用的是PrometheusGrafana&#xff0c;那么链路监控可以使用Grafana家族产品Grafana Tempo&#xff0c;但部署比较麻烦&#xff0c;涉及组件较多&#xff0c;文章可以参考《Grafana,Loki,Tempo,Prometheus,Agent搭建日志链路监控平台》&#xff0c;如果只需要简单的…
阅读更多...
获取本地IP网卡信息

获取本地IP网卡信息

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、获取本地IP&#xff0c;以及全部网卡信息总结 前言 一、获取本地IP&#xff0c;以及全部网卡信息 const os require(node:os) function getIPAdress(){/…
阅读更多...
【内网扫描】fscan v1.8.3 官方版 (内网扫描大杀器)

【内网扫描】fscan v1.8.3 官方版 (内网扫描大杀器)

下载地址 官方地址&#xff1a;(https://github.com/shadow1ng/fscan) 快速下载&#xff1a;极核GetShell 1. 简介 一款内网综合扫描工具&#xff0c;方便一键自动化、全方位漏扫扫描。 支持主机存活探测、端口扫描、常见服务的爆破、ms17010、redis批量写公钥、计划任务反…
阅读更多...
Redis常见命令、数据类型

Redis常见命令、数据类型

我们可以通过Redis的中文文档&#xff1a;Redis命令中心&#xff08;Redis commands&#xff09; -- Redis中国用户组&#xff08;CRUG&#xff09;&#xff0c;来学习各种命令。 也可以通过菜鸟教程官网来学习&#xff1a;Redis 键(key) | 菜鸟教程 一、Redis数据结构介绍 Red…
阅读更多...
Linux NLTK 安装下载nltk_data

Linux NLTK 安装下载nltk_data

一、前提条件/环境 已经成功安装anaconda环境和nltk。anaconda环境和nltk可参考下面链接进行配置&#xff0c;nltk_data参考本文进行。 Linux安装Anaconda和配置nltk环境_cetons7安装nltk-CSDN博客 二、安装nltk_data 推荐离线安装&#xff0c;亲测成功&#xff01; 1、nltk_…
阅读更多...
抖店开通后下一步做什么？最新教程如下，手把手教你设置店铺功能

抖店开通后下一步做什么？最新教程如下，手把手教你设置店铺功能

我是王路飞。 上篇文章给你们说了下2024年最新的抖店开通、入驻流程&#xff0c;还没看到的可以去看下。 既然店铺已经开通了&#xff0c;那接下来自然就是运营店铺了。 很多新手小白也是开店很积极&#xff0c;但真正开始运营的时候就抓瞎了&#xff0c;不知道店铺开通后下…
阅读更多...
uniapp中按钮点击跳转页面失效，纠正错误（亲测可用）

uniapp中按钮点击跳转页面失效，纠正错误（亲测可用）

不知道伙伴你的错误和我是否一致&#xff1f; 我当时为了点击跳转按钮发现跳转不了&#xff0c;如下错误提示&#xff1a; worker.js?libNameWAAccelerateWorker.js:1 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. S…
阅读更多...
webpack打包可视化分析工具:webpack-bundle-analyzer

webpack打包可视化分析工具:webpack-bundle-analyzer

在对webpack项目进行优化的时候,可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构,能快速定位需要优化的地方,对开发者非常友好 下载安装 下载依赖包 npm i webpack-bundle-analyzer 使用 const BundleAnalyzerPlugin require(webpack-bundle-analy…
阅读更多...
跳跃游戏，经典算法实战。

跳跃游戏，经典算法实战。

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
最新文章

Copyright @ 2022~2023