java编写简单登录系统程序—java编写用户登录系统 收藏 0

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

今天是刘小爱自学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。

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

最后

谢谢你的观看。

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

一步步使用SpringBoot实现登录和用户管理功能源码分享

前后端分离开发是当今开发的主流。本篇文章从零开始，一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能，以及登录之后对用户的管理功能。通过这个例子，可以快速入门SpringBoot+Vue前后端分离的开发。

有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦

1、前后端分离简介

在这里首先简单说明一下什么是前后端分离和单页式应用：前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一个页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

2、示例所用技术简介

简单说明以下本示例中所用到的技术，如图所示：

后端

• SpringBoot：SpringBoot是当前最流行的Java后端框架。可以简单地看成简化了的、按照约定开发的SSM(H)， 大大提升了开发速度。官网地址：https://spring.io/projects/spring-boot
• MybatisPlus: MyBatis-Plus（简称 MP）是一个 MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。官网地址：https://mybatis.plus/

前端：

• Vue :Vue 是一套用于构建用户界面的渐进式框架。尽管Vue3已经发布，但是至少一段时间内主流应用还是vue2.x，所以示例里还是采用Vue2.x版本。官网地址：https://cn.vuejs.org/
• ElementUI: ElementUI 是目前国内最流行的Vue UI框架。组件丰富，样式众多，也比较符合大众审美。虽然一度传出停止维护更新的传闻，但是随着Vue3的发布，官方也Beta了适配Vue3的ElementPlus。官网地址：https://element.eleme.cn/#/zh-CN

数据库：

• MySQL：MySQL是一个流行的开源关系型数据库。官网地址：https://www.mysql.com/

上面已经简单介绍了本实例用到的技术，在开始本实例之前，最好能对以上技术具备一定程度的掌握。

前端项目使用 veu-cli脚手架，vue-cli需要通过npm安装，是而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

NPM原始的源是在国外的服务器上，下载东西比较慢。

可以通过两种方式来提升下载速度。

• 下载时指定源//本次从淘宝仓库源下载 npm –registry=https://registry.npm.taobao.org install
• 配置源为淘宝仓库//设置淘宝源 npm config set registry https://registry.npm.taobao.org

也可以安装 cnpm ，但是使用中可能会遇到一些问题。

使用如下命令安装 vue-cli 脚手架:

注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控等内容。

前端的开发工具采用的当下最流行的前端开发工具 VS code。

下载对应的版本，一步步安装即可。安装之后，初始界面如下：

VS Code安装后，我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单，在搜索面板中查找到后，直接安装即可。

后端项目创建如下：

• 打开Idea, New Project ，选择 Spring Intializr

• 填入项目的相关信息

• SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖

• 创建完成的项目

数据库设计非常简单，只有一张表。

MP提供了代码生成器的功能，可以按模块生成Controller、Service、Mapper、实体类的代码。在数据库表比较多的情况下，能提升开发效率。官网给出了一个Demo，有兴趣的可以自行查看。

• 实体类

• Mapper接口：继承BaseMapper即可

OK，到此单表的增删改查功能已经完成了，是不是很简单。

这里我们创建了一个 Result 类，用于异步统一返回的结果封装。一般来说，结果里面有几个要素必要的

• 是否成功，可用 code 表示（如 200 表示成功，400 表示异常）
• 结果消息
• 结果数据

实际上由于响应码是固定的，code 属性应该是一个枚举值，这里作了一些简化。

为了接收前端登录的数据，我们这里创建了一个登录用的业务实体类：

启动后端项目：

访问登录界面，效果如下：

这样一个简答的登录就完成了，接下来，我们会对这个登录进一步完善。

前面虽然实现了登录，但只是一个简单的登录跳转，实际上并不能对用户的登录状态进行判别，接下来我们进一步完善登录功能。

在最后一页可以看到我们添加的用户：

效果：

通过这个示例，相信大家已经对 SpringBoot+Vue 前后端分离开发有了一个初步的掌握。

当然，由于这个示例并不是一个完整的项目，所以技术上和功能上都非常潦草

有兴趣的同学可以进一步地去扩展和完善这个示例。

有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com