后台登录功能开发
需求分析
页面原型展示
登录页面展示
(页面位置:项目/resources/backend/page/login/login.html)
查看登录请求信息
通过浏览器调试工具(F12),可以发现,点击登录按钮时,页面会发送请求(请求地址为http://localhost:8080/employee/login)并提交参数(username和password)
此时报404,是因为我们的后台系统还没有响应此请求的处理器,所以我们需要创建相关类来处理登录请求
分析前端页面代码
只有当res中的code数据 == 1时候,才可以继续往下执行的。将对象转换成JSON格式。
代码开发
创建Employee实体类
@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; // 身份证号码 private Integer status; private LocalDateTime createTime; private LocalDateTime updateTime; @TableField(fill = FieldFill.INSERT) private Long createUser; @TableField(fill = FieldFill.INSERT_UPDATE) private Long updateUser; }
创建Mapper层
这里只需要写接口就行,因为使用的是动态代理创建实体类的。接口参数里面要写对应的实体类
@Mapper中包含了将对象加入到Spring容器中
@Mapper public interface EmployeeMapper extends BaseMapper<Employee> { }
创建Service层
public interface EmployeeService extends IService<Employee> { }
先继承一个父类,第一个参数指的是dao层的接口,第二个参数指的是实体类,然后实现接口
@Service public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService { }
Controller层
@RestController 是@controller和@ResponseBody 的结合
将当前修饰的类注入SpringBoot IOC容器,使得从该类所在的项目跑起来的过程中,这个类就被实例化。
该类中所有的API接口返回的数据,甭管你对应的方法返回Map或是其他Object,它会以Json字符串的形式返回给客户端
@Slf4j @RestController @RequestMapping("/employee") public class EmployController { @Autowired private EmployeeService employeeService; }
返回结果类R
此类是一个通用结果类,服务端响应的所有结果最终都会包装成此种类型返回给前端页面。
如果成功的话,传递的是Employee的对象,如果失败的话,传递的是一句错误语句。
@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; } }
在Controller中创建登录方法
处理逻辑如下:
- 将页面提交的密码password进行md5加密处理
// 1. 将页面提交的密码进行md5加密处理 String password = employee.getPassword(); password = DigestUtils.md5DigestAsHex(password.getBytes());
- 根据页面提交的用户名username查询数据库
// 2. 根据username查询数据库 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(Employee::getUsername,employee.getUsername()); // 为sql语句添加条件,第一个参数指的是数据库对象中的列名字,第二个参数指的是获取到的employee参数。 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("账号已禁用"); }
- 登录成功,将员工id存入Session并返回登录成功结果
// 6. 登录成功,将员工id存放到session,并返回正确的结果 request.getSession().setAttribute("employee",emp.getId()); return R.success(emp); }
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
后台退出功能开发
后台退出功能开发
需求分析
员工登录成功后,页面跳转到后台系统首页面(backend/index.html),此时会显示当前登录用户的姓名
如果员工需要退出系统,直接点击右侧的退出按钮即可退出系统,退出系统后页面应跳转回登录页面
代码开发
用户点击页面中退出按钮,发送请求,请求地址为/employee/logout,请求方式为POST。
我们只需要在Controller中创建对应的处理方法即可,具体的处理逻辑:
1、清理Session中的用户id
2、返回结果
// 员工退出 @PostMapping("/logout") public R<String> logout(HttpServletRequest request ) { // 清除session request.getSession().removeAttribute("employee"); return R.success("退出成功"); }