前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【瑞吉外卖】day02:后台系统登录、退出功能

【瑞吉外卖】day02:后台系统登录、退出功能

作者头像
陶然同学
发布于 2023-02-27 04:55:45
发布于 2023-02-27 04:55:45
93000
代码可运行
举报
文章被收录于专栏:陶然同学博客陶然同学博客
运行总次数:0
代码可运行

目录

4. 后台系统登录功能

4.1 需求分析

4.2 代码开发

4.3 功能测试

5. 后台系统退出功能

5.1 需求分析

5.2 代码实现

5.3 功能测试

4. 后台系统登录功能

4.1 需求分析

1). 页面原型展示

2). 登录页面成品展示

登录页面存放目录 /resources/backend/page/login/login.html

3). 查看登录请求

通过浏览器调试工具(F12),可以发现,点击登录按钮时,页面会发送请求(请求地址为http://localhost:8080/employee/login)并提交参数 username和password, 请求参数为json格式数据 {"username":"admin","password":"123456"}。

此时报404,是因为我们的后台系统还没有响应此请求的处理器,所以我们需要创建相关类来处理登录请求 ;

4). 数据模型(employee表)

5). 前端页面分析

当点击 "登录" 按钮, 会触发Vue中定义的 handleLogin 方法:

在上述的前端代码中, 大家可以看到, 发送登录的异步请求之后, 获取到响应结果, 在响应结果中至少包含三个属性: code、data、msg 。

由前端代码,我们也可以看到,在用户登录成功之后,服务端会返回用户信息,而前端是将这些用户信息,存储在客户端的 localStorage 中了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
localStorage.setItem('userInfo',JSON.stringify(res.data))

4.2 代码开发

4.2.1 基础准备工作

在进行登录功能的代码实现之前, 首先在我们的工程下创建包结构:

1). 创建实体类Employee

该实体类主要用于和员工表 employee 进行映射。 该实体类, 也可以直接从资料( 资料/实体类 )中拷贝工程中。

所属包: com.itheima.reggie.entity

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;
​
@Data
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_numberprivate Integer status;private LocalDateTime createTime;private LocalDateTime updateTime;
​
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;
​
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
}

2). 定义Mapper接口

在MybatisPlus中, 自定义的Mapper接口, 需要继承自 BaseMapper。

所属包: com.itheima.reggie.mapper

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee>{
}

3).Service接口

本项目的Service接口, 在定义时需要继承自MybatisPlus提供的Service层接口 IService, 这样就可以直接调用 父接口的方法直接执行业务操作, 简化业务层代码实现。

所属包: com.itheima.reggie.service

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public interface EmployeeService extends IService<Employee> {
}

4). Service实现类

所属包: com.itheima.reggie.service.impl

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.mapper.EmployeeMapper;
import com.itheima.reggie.service.EmployeeService;
import org.springframework.stereotype.Service;
​
@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService{
}

5). Controller基础代码

所属包: com.itheima.reggie.controller

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
​
    @Autowired
    private EmployeeService employeeService;
    
}    

6). 导入通用结果类R

此类是一个通用结果类,服务端响应的所有结果最终都会包装成此种类型返回给前端页面。

所属包: com.itheima.reggie.common

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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;
    }
}

A. 如果业务执行结果为成功, 构建R对象时, 只需要调用 success 方法; 如果需要返回数据传递 object 参数, 如果无需返回, 可以直接传递null。

B. 如果业务执行结果为失败, 构建R对象时, 只需要调用error 方法, 传递错误提示信息即可。

4.2.2 登录逻辑分析

处理逻辑如下:

①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串

②. 根据页面提交的用户名username查询数据库中员工数据信息

③. 如果没有查询到, 则返回登录失败结果

④. 密码比对,如果不一致, 则返回登录失败结果

⑤. 查看员工状态,如果为已禁用状态,则返回员工已禁用结果

⑥. 登录成功,将员工id存入Session, 并返回登录成功结果

4.2.3 代码实现

技术点说明:

A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping

B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 员工登录
 * @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> 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);
}

4.3 功能测试

代码实现完毕后, 启动项目, 访问url: http://localhost:8080/backend/page/login/login.html , 进行登录测试。

在测试过程中, 可以通过debug断点调试的方式来跟踪程序的执行过程,并且可以查看程序运行时各个对象的具体赋值情况。而且需要注意, 在测试过程中,需要将所有的情况都覆盖到。

1). 问题说明

当我们在进行debug端点调试时, 前端可能会出现如下问题: 前端页面的控制台报出错误-超时;

2). 解决方案

前端进行异步请求时, 默认超时10000ms , 可以将该值调大一些。

==由于修改了JS文件,需要手动清理一下浏览器缓存,避免缓存影响,JS不能及时生效。==

5. 后台系统退出功能

5.1 需求分析

在后台管理系统中,管理员或者员工,登录进入系统之后,页面跳转到后台系统首页面(backend/index.html),此时会在系统的右上角显示当前登录用户的姓名。

如果员工需要退出系统,直接点击右侧的退出按钮即可退出系统,退出系统后页面应跳转回登录页面。

1). 退出页面展示

2).前端页面分析

点击

将会调用一个js方法logout, 在logout的方法中执行如下逻辑:

A. 发起post请求, 调用服务端接口 /employee/logout 执行退出操作 ;

B. 删除客户端 localStorage 中存储的用户登录信息, 跳转至登录页面 ;

5.2 代码实现

需要在Controller中创建对应的处理方法, 接收页面发送的POST请求 /employee/logout ,具体的处理逻辑:

A. 清理Session中的用户id

B. 返回结果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
* 员工退出
* @param request
* @return
*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request){
    //清理Session中保存的当前登录员工的id
    request.getSession().removeAttribute("employee");
    return R.success("退出成功");
}

5.3 功能测试

1). 代码实现完毕后, 重启服务, 访问登录界面 http://localhost:8080/backend/page/login/login.html ;

2). 登录完成之后, 进入到系统首页 backend/index.html, 点击右上角

按钮 执行退出操作, 完成后看看是否可以跳转到登录页面 , 并检查localStorage。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
瑞吉外卖实战项目全攻略——第二天
但是我们页面的访问并没有设置限制,如果我们直接跳过登陆页面直接输入系统内部页面的url同样可以进入
秋落雨微凉
2022/10/25
5060
瑞吉外卖实战项目全攻略——第二天
【瑞吉外卖】day03:完善登录功能与新增员工
前面我们已经完成了后台系统的员工登录功能开发,但是目前还存在一个问题,接下来我们来说明一个这个问题, 以及如何处理。
陶然同学
2023/02/27
4810
【瑞吉外卖】day03:完善登录功能与新增员工
瑞吉外卖-介绍
本项目(瑞吉外卖)是专门为餐饮企业(餐厅、饭店)定制的一款软件产品,包括系统管理后台和移动端应用两部分。其中系统管理后台主要提供给餐饮企业内部员工使用,可以对餐厅的菜品、套餐、订单等进行管理维护。移动端应用主要提供给消费者使用,可以在线浏览菜品、添加购物车、下单等。
用户9615083
2022/12/25
9430
瑞吉外卖-介绍
手把手教你基于【SpringBoot+MyBatis】实现员工管理系统‍【附完整源码】
近期在学习springboot框架相关的内容,相比于SSM,SpringBoot最大的特点就是集成了Spring和SpringMVC,让之前繁琐的配置工作变得更加简洁,同时对于业务逻辑层的处理也更加的友好,
灰小猿
2021/09/08
2.4K1
瑞吉外卖(一)瑞吉外卖项目概述
产品原型:就是通过一款产品成型之前的一个简单的框架,就是将页面的排版布局展现出来,使产品的初步构思有一个可视化的展示。通过原型展示,可以更加直观的了解项目的需求和提供的功能
小沐沐吖
2022/09/21
6.6K0
瑞吉外卖(一)瑞吉外卖项目概述
瑞吉外卖实战项目全攻略——第一天
我们打开页面后,通过F12来查看点击相关功能后所进行的页面请求或者直接在后端查看请求
秋落雨微凉
2022/10/25
6490
瑞吉外卖实战项目全攻略——第一天
瑞吉外卖实战项目全攻略——功能补充篇
该功能由两部分组成,一方面需要根据id将该套餐的信息回显在页面,一方面需要将修改后的套餐信息保存起来
秋落雨微凉
2022/11/02
2.5K0
瑞吉外卖-员工管理
后台系统中可以管理员工信息,通过新增员工来添加后台系统用户。点击[添加员工]按钮跳转到新增页面,如下:
用户9615083
2022/12/25
1.1K0
瑞吉外卖-员工管理
SpringBoot项目|手把手快速搭建员工管理系统(附源码)
静态资源链接:https://blog.csdn.net/qq_58233406/article/details/126838809
啵啵鱼
2022/11/23
1.4K0
SpringBoot项目|手把手快速搭建员工管理系统(附源码)
java项目之瑞吉外卖
在entity中导入实体类Employee类;使用mybatis-plus提供的自动生成的mapper
用户8447427
2023/03/08
3960
瑞吉外卖实战项目全攻略——第四天
文件上传,也称为upload,是指将本地图片,视频,音频等文件上传到服务器上,可以供其他用户浏览下载的过程
秋落雨微凉
2022/10/25
5830
瑞吉外卖实战项目全攻略——第四天
黑马瑞吉外卖之后台登录与退出功能开发
这个项目是基于springboot+mybatisplus作为核心的开发项目。是一款外卖开发项目。本次还是从后台管理界面进行开发的,前些天敲完了基本,后来还是给自己遗留了一个bug,项目还有没有完善的部分,现在就从写博客这里重新捋一遍。这样也许更有效果。很多人觉得简单,但是我觉得这是一个非常重要的项目,是一次真正意义上的前后堵的人项目。很值得我们去多家回顾练习。
兰舟千帆
2022/11/30
5970
黑马瑞吉外卖之后台登录与退出功能开发
瑞吉外卖实战项目全攻略——第三天
前面我们已经完成了后台系统的员工系统的开发,在新增或修改员工时需要填写创建时间创建人修改时间修改人等繁杂信息
秋落雨微凉
2022/10/25
6040
瑞吉外卖实战项目全攻略——第三天
瑞吉外卖(七)地址簿业务开发
01、添加用户地址簿 1、需求分析 请求地址:http://localhost:8080/addressBook 请求类型:POST 请求参数 2、代码实现 01.AddressBook实体类 package cn.mu00.reggie.entity; import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.annotation.TableField; import lombok.D
小沐沐吖
2022/09/22
4610
瑞吉外卖(七)地址簿业务开发
000 - 初探苍穹外卖
作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程, 以及软件开发过程中涉及到的岗位角色,角色的分工、职责, 并了解软件开发中涉及到的三种软件环境。那么这一小节,我们将从 软件开发流程、角色分工、软件环境 三个方面整体介绍一下软件开发。
捞月亮的小北
2023/12/01
8400
000 - 初探苍穹外卖
瑞吉外卖-分类管理业务开发
前面我们已经完成了后台系统的员工管理功能开发,在新增员工时需要设置创建时间、创建人、修改时间、修改人等字段,在编辑员工时需要设置修改时间和修改人等字段。这些字段属于公共字段,也就是很多表中都有这些字段,如下:
用户9615083
2022/12/25
6500
瑞吉外卖-分类管理业务开发
瑞吉外卖(二)员工管理业务开发
js处理long类型数字只能精确到16位,而服务端返回的用户id的数据位19位,导致精度缺失,更新员工状态失败(因id缺失精度,在数据库中匹配不到指定员工)
小沐沐吖
2022/09/22
8340
瑞吉外卖(二)员工管理业务开发
瑞吉外卖实战项目全攻略——优化篇第一天
该系列将记录一份完整的实战项目的完成过程,该篇属于优化篇第一天,主要负责完成缓存优化问题
秋落雨微凉
2022/11/12
8781
瑞吉外卖实战项目全攻略——优化篇第一天
瑞吉外卖项目Day2———完善登录问题、员工功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yirUoxB9-1679626714687)
小小程序员
2023/03/25
9510
瑞吉外卖项目Day2———完善登录问题、员工功能
瑞吉外卖(八)购物车业务开发
01、菜品展示 1、需求分析 根据分类id查询套餐信息 请求地址:http://localhost:8080/setmeal/list?categoryId=分类id&status=1 请求类型:GE
小沐沐吖
2022/09/22
7060
瑞吉外卖(八)购物车业务开发
相关推荐
瑞吉外卖实战项目全攻略——第二天
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验