登录/注册
My Queen
2145
占位
1
占位
1
浏览量
占位
粉丝
占位
关注
springboot+vue实现登录案例(附VUE整个项目代码)
My Queen
2022-09-03 21:41:39 2022-09-03
48
0

文章目录

前言

提示:这里可以添加本文要记录的大概内容:

一、准备环境

1.1 sptingboot 整合mybatis、swagger、代码生成器、Lombok

上一篇文章已经讲到

sptingboot 整合mybatis、swagger、代码生成器、Lombok

1.2 环境工具

vue 框架(使vscode导入已经写好的前端项目)

springboot框架(IDEA开发工具)

二、开发思路及流程

2.1 根据前端登录代码和用户页面设计对象返回类型

前端代码页面

在这里插入图片描述
根据上述的前端页面和代码,发现success和msg是公共的(都需要返回的一个数据);
除此之外,还有一个data,这个应该是一个用户的实体类对象。这个data的属性还包含了token。
根据上述页面设计返回对象的工具类及相关的对象。
1、提取公共的属性:

package com.tzw.ecbms.util;
import lombok.Data;
import lombok.experimental.Accessors;
import java.util.HashMap;
import java.util.Map;
/**
* @author tzw
* @version 1.0
* 返回结果
*/
@Data
@Accessors(chain = true)
public class Resp {
//操作是否成功
private Boolean success;
//状态码
private Integer code;
//消息
private String message;
}

2、针对code去设计一个接口,里面存放code常量

package com.tzw.ecbms.util;
/**
* @author tzw
* @version 1.0
*/
public interface ResultCode {
Integer SUCCESS = 20000;//成功
Integer ERROR = 20001;//失败
}

3、返回的数据不能携带密码,所以针对用户去重新设计一个返回类。(不含密码,且包含需要返回的数据)

package com.tzw.ecbms.util;
import lombok.Data;
/**
* @author tzw
* @version 1.0
*/
@Data
public class UserResp {
private String deptId;
private String realName;
private Long accountId;
private String userPhone;
private String status;
private String token;
}

4、返回的对象中既包括用户信息,还包含公共的数据。所以我们针对用户登录再去设计一个返回类。它继承公共数据Resp类,然后把UserResp类作为data加入到自己的属性中,这样登录类的返回信息就较为完善了。

package com.tzw.ecbms.util;
import lombok.Data;
/**
* @author tzw
* @version 1.0
*/
@Data
public class LoginResp extends Resp {
private UserResp data;
}

2.2 根据列表参数和返回类型设计controller层

在这里插入图片描述

通过查看前端的接口,编写controller层的代码。

package com.tzw.ecbms.controller;
import com.tzw.ecbms.service.IUserService;
import com.tzw.ecbms.util.LoginResp;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* @author tzw
* @version 1.0
*/
@RestController
@RequestMapping("/api")
public class LoginController {
@Autowired
IUserService userService;
@ApiOperation("登录")
@PostMapping("/login")
LoginResp login(@RequestParam(value = "username") String accountId,
@RequestParam(value = "password") String password){
return userService.login(accountId, password);
}
}

2.3 根据前端登录代码和用户页面设计接口和数据库的表

在这里插入图片描述

在这里插入图片描述

2.4 编写service层的代码

根据controller层的列表参数和返回类型,设计Service的接口和实现类。

IUserService接口:

package com.tzw.ecbms.service;
import com.tzw.ecbms.entity.User;
import com.baomidou.mybatisplus.extension.service.IService;
import com.tzw.ecbms.util.LoginResp;
import com.tzw.ecbms.util.UserResp;
/**
* <p>
* 服务类
* </p>
*
* @author student_tzw
* @since 2022-08-30
*/
public interface IUserService {
public LoginResp login(String accountId, String password);
}

IUserServiceImpl实现类

package com.tzw.ecbms.service.impl;
import com.tzw.ecbms.mapper.UserMapper;
import com.tzw.ecbms.service.IUserService;
import com.tzw.ecbms.util.LoginResp;
import com.tzw.ecbms.util.UserResp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* <p>
* 服务实现类
* </p>
*
* @author student_tzw
* @since 2022-08-30
*/
@Service
public class UserServiceImpl implements IUserService {
@Autowired
UserMapper userMapper;
@Override
public LoginResp login(String accountId, String password) {
LoginResp loginResp = new LoginResp();
UserResp userResp = userMapper.login(accountId, password);
if(userResp == null){
loginResp.setSuccess(false);
loginResp.setMessage("用户名或密码错误");
return loginResp;
// return (LoginResp)loginResp.setSuccess(false).setMessage("用户名或密码不存在");
}
loginResp.setData(userResp);
loginResp.setSuccess(true);
loginResp.setMessage("登录成功");
return loginResp;
}
}
  • 首先注入userMapper的对象通过对象调用login()方法,方法参数包含登录所需要的用户名和密码。登录的时候传入用户名和密码的时候,首先应该从数据库中查询有没有当前用户名,然后再判断密码是否正确。登录失败,则返回失败相关的数据,登录成功返回需要的对象及相关信息。
  • 因为msg 和 success这些信息是没有存储到数据库的,所以在mapper层只是根据对应的用户名和密码来查询User对象对应的UserResp返回类。用这个返回的对象来处理逻辑代码。如果验证成功,则把这个UserResp作为data以及msg、success传给最终的返回结果对象LoginResp。

2.5 编写dao层(mapper)的代码

UserMapper.java

package com.tzw.ecbms.mapper;
import com.tzw.ecbms.util.UserResp;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
/**
* <p>
* Mapper 接口
* </p>
* @author student_tzw
* @since 2022-08-30
*/
@Repository
public interface UserMapper {
UserResp login(@Param("accountId") String accountId, @Param("password") String password);
}

UserMapper.xml (查询我们需要的信息,然后返回给service)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.tzw.ecbms.mapper.UserMapper">
<select id="login" resultType="com.tzw.ecbms.util.UserResp">
select account_id,dept_id,real_name,user_phone,status
from tb_user where account_id=#{accountId} and password=#{password};
</select>
</mapper>

2.6 根据数据库的表生成Entity层的User对象代码

package com.tzw.ecbms.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import java.time.LocalDateTime;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
/**
* <p>
*
* </p>
*
* @author student_tzw
* @since 2022-08-30
*/
@Data
@TableName("tb_user")
@ApiModel(value = "User对象", description = "")
public class User implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty("表的字段id")
@TableId(value = "id", type = IdType.AUTO)
private Long id;
@ApiModelProperty("公司部门id ")
private String deptId;
@ApiModelProperty("用户姓名")
private String realName;
@ApiModelProperty("登录账号")
private Long accountId;
@ApiModelProperty("登录密码")
private String password;
@ApiModelProperty("邮箱地址")
private String email;
@ApiModelProperty("手机号")
private String userPhone;
@ApiModelProperty("创建时间")
private LocalDateTime createTime;
@ApiModelProperty("创建人")
private String createUser;
@ApiModelProperty("更新人")
private String updateUser;
@ApiModelProperty("更新时间")
private LocalDateTime updateTime;
@ApiModelProperty("状态")
private String status;
}

三、运行项目

查看前端登录网址。

在这里插入图片描述
在新终端输入运行项目命令:
在这里插入图片描述
运行项目到登录页面:
在这里插入图片描述
执行后端代码:
在这里插入图片描述

输入正确的账号和密码:登录成功!

在这里插入图片描述

总结

暂无评论