Javaweb之SpringBootWeb案例之 登录功能的详细解析

1. 登录功能

1.1 需求

在登录界面中，我们可以输入用户的用户名以及密码，然后点击 "登录" 按钮就要请求服务器，服务端判断用户输入的用户名或者密码是否正确。如果正确，则返回成功结果，前端跳转至系统首页面。

1.2 接口文档

我们参照接口文档来开发登录功能

• 基本信息

  请求路径：/login
  ​
  请求方式：POST
  ​
  接口描述：该接口用于员工登录Tlias智能学习辅助系统，登录完毕后，系统下发JWT令牌。 

• 请求参数

  参数格式：application/json

  参数说明：

  名称	类型	是否必须	备注
  username	string	必须	用户名
  password	string	必须	密码

  请求数据样例：

  {
      "username": "jinyong",
      "password": "123456"
  }

• 响应数据

  参数格式：application/json

  参数说明：

  名称	类型	是否必须	默认值	备注	其他信息
  code	number	必须		响应码, 1 成功 ; 0 失败
  msg	string	非必须		提示信息
  data	string	必须		返回的数据 , jwt令牌

  响应数据样例：

  {
    "code": 1,
    "msg": "success",
    "data": "eyJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoi6YeR5bq4IiwiaWQiOjEsInVzZXJuYW1lIjoiamlueW9uZyIsImV4cCI6MTY2MjIwNzA0OH0.KkUc_CXJZJ8Dd063eImx4H9Ojfrr6XMJ-yVzaWCVZCo"
  }

1.3 思路分析

登录服务端的核心逻辑就是：接收前端请求传递的用户名和密码 ，然后再根据用户名和密码查询用户信息，如果用户信息存在，则说明用户输入的用户名和密码正确。如果查询到的用户不存在，则说明用户输入的用户名和密码错误。

1.4 功能开发

LoginController

@RestController
public class LoginController {
​
    @Autowired
    private EmpService empService;
​
    @PostMapping("/login")
    public Result login(@RequestBody Emp emp){
        Emp e = empService.login(emp);
        return  e != null ? Result.success():Result.error("用户名或密码错误");
    }
}

EmpService

public interface EmpService {
​
    /**
     * 用户登录
     * @param emp
     * @return
     */
    public Emp login(Emp emp);
​
    //省略其他代码...
}

EmpServiceImpl

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;
​
    @Override
    public Emp login(Emp emp) {
        //调用dao层功能：登录
        Emp loginEmp = empMapper.getByUsernameAndPassword(emp);
​
        //返回查询结果给Controller
        return loginEmp;
    }   
    
    //省略其他代码...
}

EmpMapper

@Mapper
public interface EmpMapper {
​
    @Select("select id, username, password, name, gender, image, job, entrydate, dept_id, create_time, update_time " +
            "from emp " +
            "where username=#{username} and password =#{password}")
    public Emp getByUsernameAndPassword(Emp emp);
    
    //省略其他代码...
}

1.5 测试

功能开发完毕后，我们就可以启动服务，打开postman进行测试了。

发起POST请求，访问：http://localhost:8080/login

postman测试通过了，那接下来，我们就可以结合着前端工程进行联调测试。

先退出系统，进入到登录页面：

在登录页面输入账户密码：

登录成功之后进入到后台管理系统页面：