【JavaWeb】105：登录业务的实现

今天是刘小爱自学Java的第105天。

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

学完注册业务，开始学习新的功能：登录。

一个功能的实现，基本上都是三个步骤：

前端发送请求给后台服务器。

后台去数据库查询数据响应数据。

前端根据响应数据做不同的渲染。

一、前端发送请求

现在不是注册页面了而是登录页面，也就是前端提供的静态资源中的login.html文件。

在该文件中编写对应的js代码：

代码中的console.log()，是为了检测代码是否能正常执行，若代码没问题就将这些删除。

表单提交事件

找到该页面中登录表单的id，然后根据其id绑定一个提交事件。

在登录页面中，用户一旦提交就会触发。

序列化表单数据

如果数据存在多个的情况，可以选择将登录中的数据序列化，再将序列化后的数据提交。

异步请求提交

参数还是四个：

"userServlet?methodName=login"：请求路径，携带的参数login就对应着方法login。

loginData：请求中携带的数据，这里就是序列化后的数据。

function(result){}：回调函数，result即为后台响应的数据，

"json"：数据的传输格式为json。

return false是将表单设置成默认不提交。

二、Java后台代码编写

Java三层架构中的代码编写：

1web层

前端提交的请求参数为login，就对应一个login方法：

获取请求的数据

登录页面中的数据不止一个，所以使用方法getParameterMap()获取数据

将数据存放在user对象中

在Java中一切万物都可以是类。

无论是前端请求中的数据，还是数据库中的数据都是可以对应Java中的一个类。

这里使用BeanUtils的populate方法将请求数据转换成一个user对象。

业务层处理并返回结果

业务层返回值是一个user对象：

如果不为空，登录成功。

如果为空，没有查到对应数据，登录失败。

将结果以键值对的形式存储在map中：

登录成功：返回true和对应的用户对象。

登录失败：返回false和对应的错误信息。

转换成json数据并响应

这步不用多说，写了很多遍了。

2service层

使用md5将密码加密

用户在登录页面输入的密码是明文，而数据库中存的数据是使用md5加密后的密文。

所以需要先将明文转换成密文，再拿着密文去数据库中查询。

有一点值得注意的是：

不要忘了将密文重新设定到user中。

dao层查询数据

方法名的命名规则，见名知义：通过email和password来查询用户数据。

返回结果是一个user对象，返回即可。

3dao层

使用jdbcTemplate查询数据：

如果我们是使用query方法，它查询的结果是一个集合（也就是一个或多个user对象）。

而事实上根据现实中的逻辑判断，登录业务只能查询到一个user对象。

所以这里使用queryForObject()方法，看方法名就能知道是以对象的形式查询数据。

当然直接使用query方法，然后取集合中的第一个元素应该也是可以的。

这里有一点需要注意：

主动try…catch一个异常，因为如果查询不到元素，jdbcTemplate会报错。

我们查看queryForObject()方法中的源码：

这块代码的意思是说，如果查询到的User对象个数为0，底层会抛异常。

而我们需要将这个异常捕获，从而告诉前端没有查询到数据。

当然源码中下面的异常是指如果能查询到多个User对象，底层也会抛异常。

而这块异常一般是不会出现的，毕竟登录业务怎么可能一个用户名和密码对应好几个用户。

在设计数据表的时候应该就需要考虑到这点，保证登录用户名的唯一性。

三、前端页面渲染

1响应数据格式

Servlet响应的数据格式是json。

那数据在浏览器中到底是什么样子的呢？

通过浏览器F12打卡控制台可以查看：

用户登录成功

json数据，就可以理解成一个或多个键值对。

loginFlag：对应的值是true;

longinUser：对应的值是用户数据（值也是有多个键值对组成）

用户登录失败

longinFlag：对应的值是false；

errorMsg：错误信息。

这些数据是怎么来的呢？

在servlet中我们自己创建的map集合，再向集合中添加的数据。

而json是为了在浏览器与服务器之间传输方便，其实本质就可以按照一个map来理解。

2渲染页面

根据loginFlag对应的值，做出不同的处理：

loginFlag为true

登录成功了，所以使用location跳转到主页页面，也就是index.html。

loginFlag为false

在登录页面中有一个标签用以提示错误信息，其id就是errorMsg。

登录失败了，就将错误信息添加到该页面中。

最后

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。