登录业务流程
① 在登录页面输入用户名和密码
② 调用后台接口进行验证
③ 通过验证之后,根据后台的响应状态跳转到项目主页
2. 登录业务的相关技术点
- http 是无状态的
- 通过 cookie 在客户端记录状态
- 通过 session 在服务器端记录状态
- 通过 token 方式维持状态
如果前端与后台接口之间不存在跨域问题,那么推荐使用cookie和session来记录登录状态。
如果前端与服务器接口之间存在跨域问题,那么就要使用token的方式来维持登录状态。
1 需求与逻辑分析
1.1 页面展示
1). 页面原型展示
登录页面存放目录 /resources/backend/page/login/login.html
2). 查看登录请求
通过浏览器调试工具(F12),可以发现,点击登录按钮时,页面会发送请求(请求地址为http://localhost:8080/employee/login)并提交参数 username和password, 请求参数为json格式数据。
404,因为后台系统还没有响应此请求的处理器,所以需要创建相关类来处理登录请求 ;
3). 数据模型(employee表)
4). 前端页面分析
当点击 "登录" 按钮, 会触发Vue中定义的 handleLogin 方法:
在上述的前端代码中, 大家可以看到, 发送登录的异步请求之后, 获取到响应结果, 在响应结果中至少包含三个属性: code、data、msg 。
由前端代码,我们也可以看到,在用户登录成功之后,服务端会返回用户信息,而前端是将这些用户信息,存储在客户端的 localStorage 中了。
localStorage.setItem('userInfo',JSON.stringify(res.data))
1.2 登陆逻辑分析
1.2.1 登陆逻辑
①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串
②. 根据页面提交的用户名username查询数据库中员工数据信息
③. 如果没有查询到, 则返回登录失败结果
④. 密码比对,如果不一致, 则返回登录失败结果
⑤. 查看员工状态,如果为已禁用状态,则返回员工已禁用结果
⑥. 登录成功,将员工id存入Session, 并返回登录成功结果
1.3 登出逻辑
在后台管理系统中,管理员或者员工,登录进入系统之后,页面跳转到后台系统首页面(backend/index.html),此时会在系统的右上角显示当前登录用户的姓名。
如果员工需要退出系统,直接点击右侧的退出按钮即可退出系统,退出系统后页面应跳转回登录页面。
1). 退出页面展示
2).前端页面分析
点击将会调用一个js方法logout, 在logout的方法中执行如下逻辑:
A. 发起post请求, 调用服务端接口 /employee/logout 执行退出操作 ;
B. 删除客户端 localStorage 中存储的用户登录信息, 跳转至登录页面 ;
2 代码开发
2.1 基础准备工作
在进行登录功能的代码实现之前, 首先在我们的工程下创建包结构:
1). 创建实体类Employee
所属包: com.itheima.reggie.entity
package com.itheima.reggie.entity; import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.annotation.TableField; import lombok.Data; import java.io.Serializable; import java.time.LocalDateTime; /**@Description: 员工实体类 该实体类主要用于和员工表 employee 进行映射。 * @version v1.0 * @author LiBiGo * @date 2022/8/12 11:05 */ // 在实体类上添加@Data注解,可以省去代码中大量的 get()、 set()、 toString() 等方法,提高代码的简洁: @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; // map-underscore-to-camel-case: true // 在映射实体或者属性时,将数据库中表名和字段名中的下划线去掉,按照驼峰命名法映射 private String idNumber; //身份证 因为在配置文件中设置驼峰命名,所以与数据库中的不太一样,数据库中为id_number private 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接口
所属包: com.itheima.reggie.mapper
package com.itheima.reggie.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.itheima.reggie.entity.Employee; import org.apache.ibatis.annotations.Mapper; /** * Description: 在MybatisPlus中, 自定义的Mapper接口, 需要继承自 BaseMapper。 * @author w * @version 1.0 * @date 2022/8/12 11:11 */ @Mapper public interface EmployeeMapper extends BaseMapper<Employee> { }
3).Service接口
package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.Employee; /**@Description: 本Service接口, 在定义时需要继承自MybatisPlus提供的Service层接口 IService, * 这样就可以直接调用 父接口的方法直接执行业务操作, 简化业务层代码实现。 * @version v1.0 * @author LiBiGo * @date 2022/8/12 12:20 */ public interface EmployeeService extends IService<Employee> { }
4). Service实现类
package com.itheima.reggie.service.impl; 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; /** * Description: new java files header.. * @author w * @version 1.0 * @date 2022/8/12 11:15 */ @Service public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService{ }
5). Controller基础代码
所属包: com.itheima.reggie.controller
package com.itheima.reggie.controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.itheima.reggie.common.R; import com.itheima.reggie.entity.Employee; import com.itheima.reggie.service.EmployeeService; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.util.DigestUtils; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; /** * Description: new java files header.. * @author w * @version 1.0 * @date 2022/8/12 11:17 */ @Slf4j @RestController @RequestMapping("/employee") public class EmployeeController { @Autowired private EmployeeService employeeService; @PostMapping("/login") public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){ /**@Description: 员工登陆 * @param @RequestBody 传入的是json 故需要将其转化为实体类,json中的类名与实体类名对应才可以封装 * A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping * B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody * @return com.itheima.reggie.common.R<com.itheima.reggie.entity.Employee> * @version v1.0 * @author LiBiGo * @date 2022/8/12 11:32 */ // ①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串 String password = employee.getPassword(); password = DigestUtils.md5DigestAsHex(password.getBytes()); // ②. 根据页面提交的用户名username查询数据库中员工数据信息 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(Employee::getUsername,employee.getUsername()); Employee emp = employeeService.getOne(queryWrapper); //在数据库中用户名是唯一的,所以可以用getone() // ③. 如果没有查询到, 则返回登录失败结果 if (emp == null){ return R.error("用户名不存在"); } // ④. 密码比对,如果不一致, 则返回登录失败结果 if(!emp.getPassword().equals(password)){ return R.error("密码失败"); } // ⑤. 查看员工状态,如果为已禁用状态,则返回员工已禁用结果 if(emp.getStatus() == 0){ return R.error("账户已禁用"); } // ⑥. 登录成功,将员工id存入Session, 并返回登录成功结果 request.getSession().setAttribute("employee",emp.getId()); return R.success(emp); } @PostMapping("/logout") public R<String> logout(HttpServletRequest request){ /**@Description: 需要在Controller中创建对应的处理方法, 接收页面发送的POST请求 /employee/logout * @version v1.0 * @author LiBiGo * @date 2022/8/12 12:09 */ // 清理Session中保存的当前登录员工的id request.getSession().removeAttribute("employee"); // 返回结果 return R.success("退出成功"); } }
6). 导入通用结果类R
package com.itheima.reggie.common; import lombok.Data; import java.util.HashMap; import java.util.Map; /** * 通用返回结果,服务端响应的数据最终都会封装成此对象 * @param <T> * A. 如果业务执行结果为成功, 构建R对象时, 只需要调用 success方法; * 如果需要返回数据传递 object 参数, 如果无需返回, 可以直接传递null。 * B. 如果业务执行结果为失败, 构建R对象时, 只需要调用 error方法, 传递错误提示信息即可。 */ @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; } }
3 功能测试
3.1 登陆功能测试
代码实现完毕后, 启动项目, 访问url: http://localhost:8080/backend/page/login/login.html , 进行登录测试。
在测试过程中, 可以通过debug断点调试的方式来跟踪程序的执行过程,并且可以查看程序运行时各个对象的具体赋值情况。而且需要注意, 在测试过程中,需要将所有的情况都覆盖到。
3.2 登出功能测试
5.3 功能测试
1). 代码实现完毕后, 重启服务, 访问登录界面 http://localhost:8080/backend/page/login/login.html ;
2). 登录完成之后, 进入到系统首页 backend/index.html, 点击右上角退出按钮执行退出操作, 完成后看看是否可以跳转到登录页面 , 并检查localStorage。
退出前:
退出后: