前言:
当时要做一个管理系统,在做到实现登录功能的时候,由于我基础知识掌握的不够牢固,一直在原地打转,后来在公司前辈的指导下实现了该功能.运用到了SpringBoot,Ajax,html.JS,JQuery,等技术.
总流程:
1.前端页面login.html
1.1导入JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script src="https://apps.bdimg/libs/jquery/2.1.4/jquery.min.js">
//在这里导入jquery
</script>
</head>
<body>
</body>
</html>因为我们在后面需要从前端获取到用户输入的数据并利用jquery获取input输入框中的值的方法将其
传递到后台.
1.2写一段input标签来获取用户输入的账号密码
账号:<input type="text" id="userAccount" name = "userAccount"> <br>
密码:<input type="password" id = "password" name = "password"> <br>
<button type="submit" id="button" style="margin-top:10px;" onclick="login()">提交</button>
这里的<button>中,有一个鼠标点击事件:οnclick="login()" 这个事件是指在点击该按钮时会执行这个login()方法,该方法的功能是登录(从上面两个input中获取数据并通过Ajax传递到后台做验证后再返回验证结果,并使Ajax根据不同的比对结果执行不同的操作:跳转页面/错误提示)
下面有具体的说明.
在此之前先来介绍一下,如何利用jquery获取input输入框中的值.
1.3如何利用jquery获取input输入框中的值:示例
如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value
先准备一段 HTML
1
<input type="text"id="CN_NAME"name="CN_NAME"class="CN_NAME">jquery获取input文本框中的值
通过 name
var name = $('input[name="CN_NAME"]').val();通过 id
var name = $('#CN_NAME').val();通过 class
var name = $('.CN_NAME').val();javascript获取input输入框中的值
通过 name
document.getElementsByName("CN_NAME")[0].value通过 id
var name = document.getElementById("CN_NAME").value通过 class
document.getElementsByClassName("CN_NAME")[0].valueps：下面看下jQuery获取各种input输入框的值
1.获取一组radio单选框的值（name属性为一组的radio的name属性）
1
varq1 = $("input[name=element_name]:checked").val();2.获取select下拉框的值
var q2 = $("#element").val();3.获取几个下拉框组合的值
1
varq4 = ("#element1").val() +("#element1").val() +("#element2").val() + $("#element3").val();4.获取input输入框的值
var q5 = $("#element").val();
1.4利用jquery获取input输入框中的值:实例
在login.html文件的页面中:
<script>
// 通过JQuery 获取密码输入框里输入的密码的数据
function login() {
var userAccount = $('#userAccount').val();
var password = $('#password').val();
//var params = {"input_user_account":"input_password"}
var params = {
"userAccount": userAccount,
"password": password
};
//=======================================================================================
//发送前面获取的数值到后台
$.ajax({
type:"post",
ansyv:true,
data:params,
datatype:"json",
url:"http://localhost:9000/tre/User/login",
success:function(data){
if (data){
//alert('登录成功')
window.location.href ="https://www.baidu/";//成功就跳转,这里可以写你需要跳转的页面,本文以百度页面做示例
}else{
alert('帐号或密码错误');
}
},
error:function(){
alert("请求出错!");
}
})
}
</script>这里将Jquery从前面的input标签里根据id=userAccount与id=password.分别获取用户输入到里面的账号与密码数据,并以JSON格式封装到Params中.
var userAccount = $('#userAccount').val();
var password = $('#password').val();
//var params = {"input_user_account":"input_password"}
var params = {
"userAccount": userAccount,
"password": password
};
在获取数据后,通过Ajax将获取的数据发送到后台
$.ajax({
type:"post",//请求方式为POST
ansyv:true,
data:params,//内容是上面获取的数据
datatype:"json",//格式为JSON格式
url:"http://localhost:9000/tre/User/login",//请求地址
//以下为获取到从后台返回的比对数据的结果后根据情况做出反应
success:function(data){
//成功获得比对结果(true/false)后执行success模块,再通过if判断分别对true/false做出不
同的反应(跳转页面/提示错误)
if (data){
//alert('登录成功')
window.location.href ="https://www.baidu/";//成功就跳转
}else{
alert('帐号或密码错误');
}
},
//没能从后台获取比对结果时执行error $.ajax({
type:"post",//请求方式为POST
ansyv:true,
data:params,//内容是上面获取的数据
datatype:"json",//格式为JSON格式
url:"http://localhost:9000/tre/User/login",//请求地址
//以下为获取到从后台返回的比对数据的结果后根据情况做出反应
success:function(data){
//成功获得比对结果(true/false)后执行success模块,再通过if判断分别对true/false做出
//不同的反应(跳转页面/提示错误)
if (data){
//alert('登录成功')
window.location.href ="https://www.baidu/";//成功就跳转
}else{
alert('帐号或密码错误');
}
},
//没能从后台获取比对结果时执行error,提示请求出错,这时你应该去DeBug以下数据传输流程,
//看看到底是哪里的数据没能正常传递.
error:function(){
alert("请求出错!");
}
})整个login.html的全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script src="https://apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
账号:<input type="text" id="userAccount" name = "userAccount"> <br>
密码:<input type="password" id = "password" name = "password"> <br>
<button type="submit" id="button" style="margin-top:10px;" onclick="login()">提交
</button>
<script>
// 通过JQuery 获取密码输入框里输入的密码的数据
function login() {
var userAccount = $('#userAccount').val();
var password = $('#password').val();
//var params = {"input_user_account":"input_password"}
var params = {
"userAccount": userAccount,
"password": password
};
//发送获取的数值到后台
$.ajax({
type:"post",
ansyv:true,
data:params,
datatype:"json",
url:"http://localhost:9000/tre/User/login",
success:function(data){//本来用的mag 现在用:data
if (data){
//alert('登录成功')
window.location.href ="http://127.0.0.1:5501/index.html";//成功就跳转https://www.baidu/
}else{
alert('帐号或密码错误');
}
},
error:function(){
alert("请求出错!");
}
})
}
</script>
</body>
</html>
这些就是前台login.html的全部代码了,量不是很多,但是设计的内容也不算少.可以多看看.
接下来咱们跟随数据从前台流向后台去.
2.后台页面
2.1 UserController.java
代码展示:
@Controller
//@RestController
@RequestMapping( "/User")
public class UserController {
@Autowired
private UserService userService;
//实现登录
@RequestMapping(value = "/login",method = RequestMethod.POST)
@ResponseBody
public boolean login(Integer userAccount, Integer password){
return userService.LoginIn(userAccount,password);
}
}Controller接收从前端Ajax传递来的数据并存放到 login(Integer userAccount, Integer password)中,然后将其传递给服务层Service
2.2 UserService.java
代码展示:
@Service
public class UserService {
@Autowired
@Resource
private UserMapper userMapper;
//登录,验证密码是否正确
public boolean LoginIn(Integer userAccount, Integer password) {
User info = userMapper.getInfo(userAccount, password);
System.out.println("从数据库查到的密码为: "+info.getPassword());
if(info.getPassword().equals(password)){// 等同于if(info.getPassword() == password)
System.out.println("输入的密码与数据库中的一致");
return true;
}else {
System.out.println("输入的密码与数据库中的不同!");
return false;
}
}
}Service接收到从Controller传递来的参数后将其放置在
LoginIn(Integer userAccount, Integer password)其中,然后传递到Mapper中,再通过Mapper的SQL语句对数据库进行根据账号userAccount查询出对应在数据库里的账号与密码.
2.3 UserMapper.java
代码展示:
@Mapper
public interface UserMapper {
//登录查询，可以实现登录功能
@Select("SELECT user_account,password FROM user WHERE user_account = #{userAccount}")
User getInfo(Integer userAccount, Integer password);
}Mapper根据数据库中的"user_account"也就是账号,查询出与之对应的数据信息.并将其返回给Service
其实,从前端Ajax传递出数据给Controller,再传给Service,再到Mapper,最终从数据库抽出数据的过程就是一个根据id查询信息的过程,只不过这个查询过程的前半段的最开始的数据的来源是通过Ajax获取的用户输入,接下来又是一个小重点,现在我们的Service获取了Mapper辛辛苦苦从数据库中抽取来的数据,那我们要怎么处理它们呢? 做比较!
Service在获取到数据库存储的密码之后,需要做的事就是赶紧拿这个'真-密码'与前端传来的'密码'做比对,看看它们是否一致(这里我的账号密码都是Integer类型的,,如果是String类型的可以回顾一下下面的方法介绍)
String类型的比对方法:
//通过equals进行判断字符串是否不相等.
String中equals()方法覆盖了父类的Object方法，比较规则为：如果两个对象的类型一致，并且内容一致，则返回true，否则返回false.
例如：
String a = "abc";
String b = "abc";
if(a.equals(b)){ //通过equals比较a,b是否相等
//相等的情况System.out.println("a与b是相等的哦");}else{
//不相等的情况System.out.println("a与b是不等的哦");
}
那咱们继续进行"真密码"与"密码"之间的比对工作
代码为:
public boolean LoginIn(Integer userAccount, Integer password) {
User info = userMapper.getInfo(userAccount, password);
System.out.println("从数据库查到的密码为: "+info.getPassword());
//其中,info.getPassword()为Service从Mapper哪里得到的数据库内的密码
//password为从Controller那里传来的用户从前端输入的密码
if(info.getPassword().equals(password)){// 等同于if(info.getPassword() == password)
System.out.println("输入的密码与数据库中的一致");
return true;
}else {
System.out.println("输入的密码与数据库中的不同!");
return false;
}
}现在我们假设用户输入的密码password与数据库内的密码info.getPassword()一致,则应该会提示"输入的密码与数据库中的一致"并返回true的结果
我们在Service验证密码为true的这个结果会传递给Controller,并被Ajax获取
$.ajax({
type:"post",//请求方式为POST
ansyv:true,
data:params,//内容是上面获取的数据
datatype:"json",//格式为JSON格式
url:"http://localhost:9000/tre/User/login",//请求地址
//以下为获取到从后台返回的比对数据的结果后根据情况做出反应
success:function(data){
//成功获得比对结果(true/false)后执行success模块,再通过if判断分别对true/false做出不
同的反应(跳转页面/提示错误)
if (data){
//alert('登录成功')
window.location.href ="https://www.baidu/";//成功就跳转
}else{
alert('帐号或密码错误');
}
},
//没能从后台获取比对结果时执行error $.ajax({
type:"post",//请求方式为POST
ansyv:true,
data:params,//内容是上面获取的数据
datatype:"json",//格式为JSON格式
url:"http://localhost:9000/tre/User/login",//请求地址
//以下为获取到从后台返回的比对数据的结果后根据情况做出反应
success:function(data){
//成功获得比对结果(true/false)后执行success模块,再通过if判断分别对true/false做出
//不同的反应(跳转页面/提示错误)
if (data){
//alert('登录成功')
window.location.href ="https://www.baidu/";//成功就跳转
}else{
alert('帐号或密码错误');
}
},
//没能从后台获取比对结果时执行error,提示请求出错,这时你应该去DeBug以下数据传输流程,
//看看到底是哪里的数据没能正常传递.
error:function(){
alert("请求出错!");
}
})我们将比对的结果从后台又传回了Ajax,
Ajax收到了我们的反馈就会执行success(如果出现bug没能传回结果,将执行error)
因为我们的比对结果为true所以在success里的if判断中走true的模块,所以会执行 window.location.href ="https://www.baidu/"; 至此就完成了页面的跳转也就进入了百度的页面(示例),当然了,做自己的项目的话只需要把访问地址改成你的主页面index.html的地址,就会从login.html跳转到index.html的页面,也就完成了登录的功能.
总结:
1.过程:
整个过程是一个回环式的数据传输的过程,从用户输入数据点击登录开始,我们执行
1.用户输入数据并点击登录
2.jquery获取数据
3.以JSON格式封装
4.通过Ajax传递到后台的Controller
5.Controller传递给Service
6.Service传递给Mapper
7.Mapper根据账号去数据库抽取数据
8.Mapper将抽取的数据返回给Service
9.Service将数据库的数据与从Controller获得的前端数据做比对,返回一个布尔值(true/false)
10.Service将布尔值传递给Controller
11.Controller中的比对结果被Ajax获取
12.Ajax成功获取结果(走success并根据true/false执行不同的操作:跳转页面/提示错误),没有获取到结果(走error,提示连接错误)
13.跳转页面到index.html则成功实现了登录功能
2.重点:
1: 利用jquery获取input输入框中的值
2: 利用Ajax将数值传递到后台
3: Service既要传递从前台来的输入数据,又要返回作比较后的结果
3.难点:
1. 利用Ajax将数值传递到后台
2. Service既要传递从前台来的输入数据,又要返回作比较后的结果的功能的实现
3. 理解整个过程的信息传递流程
感谢您能看到这里,我只是一个刚刚开始编码的小白,如有不妥的地方希望您不吝赐教!谢谢~
更多推荐
利用Ajax传递数据实现在SpringBoot前后端分离项目中的登录功能
发布评论