【项目实战】04-后台系统登录退出功能开发

注:本文章基于黑马程序员相关视频及资料进行编写,代码简单,较容易理解,若有问题或者源码资料获取可以在评论区留言或者联系作者!



开篇

需求分析:当用户进入后台管理登录页面之后,可以输入用户名密码,验证成功之后便可以跳转到后台管理页面进行操作;

登录页面如下所示:
在这里插入图片描述
进入开发者模式可以发现,当点击登录按钮之后,会使用POST请求将输入的用户名密码发送到http://localhost:8080/employee/login路径下,然后进行后端的处理和验证;

然后再对前端界面login.html进行分析:
在这里插入图片描述
在这里插入图片描述

通过观察可以发现,当用户进行登录操作后,首先会判断输入是否为空,在不为空的情况下,会使用POST请求,发送到/employee/login请求下,然后对返回的信息进行判断:如果返回的code值为1,则将数据转换为json保存在浏览器中,然后跳转到主页面index.html;如果code值不为1,则在前端页面显示一个错误信息;

接下来将进行代码开发:
·流程:controller-->service-->mapper-->db




一、编写代码框架

(1)创建实体类Employee和employee表进行映射:

 @Data
    @NoArgsConstructor
    @AllArgsConstructor
    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;

(2)创建EmployeeMapper.java文件对数据库进行操作

@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
    
    
}

(3)创建EmployeeService 接口,并继承Mybatis-plus的IService<>方法;

public interface EmployeeService extends IService<Employee> {
    
    
}

(4)创建EmployeeServiceImpl .java文件继承mybatis-plus的ServiceImpl<>
方法,并实现之前的EmployeeService 接口;

@Service
public class EmployeeServiceImpl  extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
    
    
}

(5)创建EmployeeController .java类

@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    
    

    @Autowired
    private EmployeeService employeeService;
}

(5)导入返回结果类R.java;
此类是一个通用结果类,服务端响应的所有结果最终都会包装成此类型返回给前端页面

@Data
@NoArgsConstructor
@AllArgsConstructor
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) {
    
    //响应返回成功情况下会返回code=1和data数据
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
    
    //返回失败情况下返回code=0和错误信息
        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;
    }

}

注意:EmployeeServiceImpl加@service注解 EmployeeService不加注解 EmployeeMapper加@mapper注解

EmployeeServiceImpl继承ServiceImpl<EmployeeMapper, Employee>,实现implements EmployeeService



二、登录方法编码

逻辑梳理:
1. 将页面提交的密码password进行MD5加密处理
2. 根据页面提交的用户名username查询数据库;
3. 如果没有查询则返回登录失败的结果;
4. 密码比对,如果不一致则返回登录失败的结果;
5. 查看员工状态,如果为已禁用状态,则返回员工已禁用结果;
6. 登录成功,将员工id存入Session并返回登录成功结果

(1)在EmployeeController中编写login()方法:

@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    
    

    @Autowired
    private EmployeeService employeeService;

    //HttpServletRequest是为了将员工id存入到session中一份,这样想获取员工信息就可以直接从session获取
    @PostMapping ("/login")
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee 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());
        //因为数据库中对username作了约束,加了一条索引,是不能重复的,所以可以调用getone方法,查出唯一数据
        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",employee.getId());
        return R.success(emp);

    }
}

运行项目测验,能够正常运行,登录功能也能正常实现;




三、后台退出功能开发

需求分析:用户点击页面中的退出按钮,发送请求,请求地址为/employee/logout,请求方式为POST。我们徐亚在Controller中创建对应的处理方法,具体的处理逻辑:
1.清理Session中的用户id;
2.返回结果;
编写相关的conroller文件:

 /*
     * 员工退出*/
    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request){
    
    
        //清理Session中保存的当前登录员工的id
        request.getSession().removeAttribute("employee");

        return  R.success("退出成功!");
    }

总结:

这里我们对项目的后台登录和退出功能作了基本的代码开发,使得用户能完成基本的登录退出功能,后面将对此功能模块作进一步完善。


如果感觉内容写的还不错的话,一键三连不迷路!!!!
后面将会更新更多学习内容,一起学习吧!!!!!!
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47418550/article/details/124485967