Java项目实战第6天：登录业务的实现

旧城等待， 2023-03-04 06:51 19阅读 0赞

### 目录 ###

*   *   *  
     *  一、前端发送请求
     *  二、Java后台代码编写
     *  三、前端页面渲染
     *  最后

###  ###

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

感谢你的观看，谢谢你。

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

![format_png][]

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

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

*  前端发送请求给后台服务器。
 *  后台去数据库查询数据响应数据。
 *  前端根据响应数据做不同的渲染。

## 一、前端发送请求 ##

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

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

![format_png 1][]

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

**①表单提交事件**

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

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

**②序列化表单数据**

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

**③异步请求提交**

参数还是四个：

*  “userServlet?methodName=login”：请求路径，携带的参数login就对应着方法login。
 *  loginData：请求中携带的数据，这里就是序列化后的数据。
 *  function(result)\{\}：回调函数，result即为后台响应的数据，
 *  “json”：数据的传输格式为json。

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

## 二、Java后台代码编写 ##

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

**1web层**

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

![format_png 2][]

**①获取请求的数据**

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

**②将数据存放在user对象中**

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

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

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

**③业务层处理并返回结果**

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

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

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

*  登录成功：返回true和对应的用户对象。
 *  登录失败：返回false和对应的错误信息。

**④转换成json数据并响应**

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

**2service层**

![format_png 3][]

**①使用md5将密码加密**

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

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

**有一点值得注意的是**：

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

**②dao层查询数据**

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

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

**3dao层**

使用jdbcTemplate查询数据：

![format_png 4][]

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

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

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

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

**这里有一点需要注意：**

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

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

![format_png 5][]

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

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

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

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

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

## 三、前端页面渲染 ##

**1响应数据格式**

Servlet响应的数据格式是json。

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

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

![format_png 6][]

**①用户登录成功**

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

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

**②用户登录失败**

*  longinFlag：对应的值是false；
 *  errorMsg：错误信息。

这些数据是怎么来的呢？

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

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

**2渲染页面**

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

![format_png 7][]

**①loginFlag为true**

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

**②loginFlag为false**

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

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

## 最后 ##

谢谢你的观看。

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

[format_png]: /images/20230208/77c343e384dd4852adf10560c756258b.png
[format_png 1]: /images/20230208/2c070d4c2a4d4bffbc9c8919de49751f.png
[format_png 2]: /images/20230208/9a50ec00cda1431bb05c0a8813fbb657.png
[format_png 3]: /images/20230208/c8170aef4fa245b68cd406d66439b4ba.png
[format_png 4]: /images/20230208/bafbca5bd196403eba715c5ac30ede95.png
[format_png 5]: /images/20230208/8f0a86004d304f4b98dad406e134c125.png
[format_png 6]: /images/20230208/6fe6bf0e58f74ae48a2bc0be54ad4856.png
[format_png 7]: /images/20230208/ecc80eceabd241f98ec04c322f25d730.png