java项目业务_Java项目实战第6天:登录业务的实现

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

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

0ced9681-590d-4947-88f3-cf15ef95a6bf.png

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

一个功能的实现,基本上都是三个步骤:

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

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

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

一、前端发送请求

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

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

1712822c-d5ec-405c-bce9-5e1a1848a381.png

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

①表单提交事件

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

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

②序列化表单数据

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

③异步请求提交

参数还是四个:

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

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

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

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

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

二、Java后台代码编写

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

1web层

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

9b13071e-1457-4418-a7b1-43fed80e1bd8.png

①获取请求的数据

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

②将数据存放在user对象中

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

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

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

③业务层处理并返回结果

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

如果不为空,登录成功。

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

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

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

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

④转换成json数据并响应

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

2service层

2b0282cb-b9b4-4bf6-8068-ce1bfef8725b.png

①使用md5将密码加密

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

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

有一点值得注意的是:

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

②dao层查询数据

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

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

3dao层

使用jdbcTemplate查询数据:

f89118b2-fc98-4853-8905-d6164778b148.png

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

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

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

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

这里有一点需要注意:

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

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

10069635-a41c-4613-b732-6303811e1bf8.png

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

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

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

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

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

三、前端页面渲染

1响应数据格式

Servlet响应的数据格式是json。

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

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

ed18825a-7f96-46a1-a2d3-9aee62f2cb3a.png

①用户登录成功

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

loginFlag:对应的值是true;

longinUser:对应的值是用户数据(值也是有多个键值对组成)

②用户登录失败

longinFlag:对应的值是false;

errorMsg:错误信息。

这些数据是怎么来的呢?

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

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

2渲染页面

根据loginFlag对应的值,做出不同的处理:

9c99554d-124d-44f4-9803-d20d0819823b.png

①loginFlag为true

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

②loginFlag为false

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

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

最后

谢谢你的观看。

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值