【实战day01】后台登录功能开发

ぃ小男孩つ

已于 2022-04-23 10:03:27 修改

阅读量1.5k

点赞数 2

分类专栏：冰冰项目文章标签： spring boot ajax vue.js

于 2022-04-18 09:54:00 首次发布

本文链接：https://blog.csdn.net/qq_54699828/article/details/124237890

版权

冰冰项目专栏收录该内容

9 篇文章 5 订阅

订阅专栏

文章目录

1. 登录需求分析

1.1 登录页面展示

在这里插入图片描述

1.2 查看登录请求数据

输入用户名密码，点击f12，打开控制台，选择网络，查看数据信息
在这里插入图片描述

1.3 数据模型

在这里插入图片描述

2. 登录功能基础准备

2.1 导入相关坐标依赖

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <groupId>org.hx</groupId>
    <artifactId>bingbing_take_out</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.5</version>
            </plugin>
        </plugins>
    </build>

2.2 创建Employee实体，跟employee表映射

这里导入lombok简化开发，记得使用@Data注解

@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;//身份证号码，驼峰命名已经在yml中配置好
    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.3 创建dao，service，controller三层架构

因为这里我们使用MybatisPlus，因此接口和实现类我们只需要继承相关的类即可。

EmployeeDao，记得使用@Mapper注解将其标志为spring管理的类

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

EmployeeService

public interface EmployeeService extends IService<Employee> {
}

EmployeeServiceImpl

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

EmployeeController

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

    @Autowired
    private EmployeeService employeeService;
    }

2.4 编写springboot核心配置文件

server:
  port: 8080
spring:
  application:
    name: bingbing_take_out
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/bingbing?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
      username: root
      password: 123456
mybatis-plus:
  configuration:
    #在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID

2.5 创建返回结果集R

R结果类中有三个成员变量，分别是code，成功与否的标志，msg，返回消息，泛型data，返回的数据。这三个成员变量与前端代码是相互对应的。

@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;
    }

}

在这里插入图片描述

2.6 编写启动类，测试环境

@Slf4j
@SpringBootApplication
public class BingBingApplication {
    public static void main(String[] args) {
        SpringApplication.run(BingBingApplication.class,args);
        System.out.println("项目初始化完成");
        log.info("项目启动成功");
    }
}

在这里插入图片描述

3. 登录功能开发

3.1 登录功能分析

代码逻辑如下：

将页面提交的密码转成md5加密后的密码，因为我们数据库的密码经过md5进行加密
2. 根据页面提交的用户名查询数据库，获得一个Employee对象
3. 验证用户名是否存在，不存在就返回登陆失败
4. 验证密码是否正确
5. 验证员工状态是否禁用
6. 验证通过，返回用户对象信息,并将员工id存入Session

流程图
在这里插入图片描述

3.2 登录代码编写

@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；

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

    @Autowired
    private EmployeeService employeeService;

    @RequestMapping("/login")
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {
    
        //1. 将页面提交的密码转成md5加密后的密码，DigestUtils.md5DigestAsHex()
        String password = employee.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());

        //2.根据页面提交的用户名查询数据库，获得一个Employee对象
        LambdaQueryWrapper<Employee> lqw = new LambdaQueryWrapper<>();
        lqw.eq(Employee::getUsername,employee.getUsername());
        Employee emp = employeeService.getOne(lqw);

        //3. 验证用户名是否存在，不存在就返回登陆失败
        if(emp == null){
            return R.error("用户名不存在");
        }

        //4. 验证密码是否正确
        if(! emp.getPassword().equals(password)){
            return R.error("密码错误");
        }

        //5. 验证员工状态是否禁用
        if(emp.getStatus()!= 1){
            return R.error("该账号已禁用");
        }

        //6. 验证通过，返回用户对象信息,并将员工id存入Session
        HttpSession session = request.getSession();
        session.setAttribute("employee",emp.getId());
        return R.success(emp);
    }
}

RequestMapping中的映射地址要根据控制台中请求的URL进行拼接。因此，我们在类上的映射地址是"/employee",在方法上的映射地址是"/login"。
在这里插入图片描述
我们来看一下前端的登录方法：前端接收到后台返回的数据信息，判断是否登录成功，登录成功就进行页面跳转，否则登陆失败，根据后台返回数据提示相关信息。

这是返回的结果集对象中的成功与失败的方法，可以通过调用类方法进行return相关信息。
在这里插入图片描述

同时，还可以根据数据库信息判断该用户账号密码是否禁用。

3.3 退出登录功能分析

用户点击首页中的退出按钮，发送请求，可以看到，请求的路劲是employee/logout,因此，我们方法中的映射地址就是“/logout”。
在这里插入图片描述

我们只需要在controller中编写相对应的方法，即删除session中的信息，返回退出成功的标志，让前端页面帮我们进行跳转操作。

3.4 退出登录功能代码实现

注意这里传递的泛型是String，我们只需要给前端响应一个退出成功的标志即可，这样前端获取的code状态码就为1.然后进行页面跳转跳转到登录界面。

/**
     * 员工退出功能
     * @param request
     * @return
     */
    @RequestMapping("/logout")
    public R<String> logout(HttpServletRequest request){
        request.getSession().removeAttribute("employee");
        return R.success("退出成功");
    }

在这里插入图片描述
点击右上角退出按钮，就可以正常退出了。

ぃ小男孩つ

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【实战day01】后台登录功能开发

1. 登录需求分析1.1 登录页面展示1.2 查看登录请求数据输入用户名密码，点击f12，打开控制台，选择网络，查看数据信息1.3 数据模型2. 登录功能基础准备2.1 导入相关坐标依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId&g
复制链接

扫一扫