当前位置：首页 > news >正文

登录功能login.html

news 来源：原创 2025/5/19 9:37:54

文章目录

前言
一、login.html
二、getVerify()
controller
login() 登录功能
encodePwd(pwd,key)
login.do
验证是否异地登录
找回账号
verifySubmit()

前言

登录login.html，验证码获取verifycode，登陆函数login()

一、login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body ><div aglin="center"><h1>NJUPT登录系统</h1><div>用户名：<input type="text" id="sno"/><br>密 码：   <input type="password" id="pwd"/><br>  验证 码：<input type="text" id="code"/><label id="verifycode"></label><button onclick="getVerify()">获取验证码</button><br>  <button onclick="login()">登录</button></div></div>
</body>
</html>

打开浏览器，可以得到如下页面
在这里插入图片描述
由于我们还没写getVerify()和login()，点击这两个button无反应，验证码的位置也没有显示VerifyCode此id对应的验证码。

二、getVerify()

首先复制这段代码

function getVerify(){if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } }

创建一个用于进行异步 HTTP 请求的对象，也就是常说的 XMLHttpRequest 对象，根据不同的浏览器创建不同的对象，现代版本浏览器一般都是if分支。

xmlhttp.open("get","getcode.do",false);

用这个请求的对象的open，第一个参数请求方法 " get " 或者 " post "；第二个参数URL，对应controller中相同@RequestMapping注释的方法。最后一个参数是否异步请求，这里选择false。

	xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { key=xmlhttp.responseTextconsole.log(key);document.getElementById("verifycode").innerHTML=key} else {console.error(xmlhttp.status);}}

onreadystatechange 是 XMLHttpRequest 对象的一个事件处理属性，当 XMLHttpRequest 对象的状态发生变化时，会触发这个事件处理函数。

readyState：值为4表示已完成，响应数据已经完全接收。
xmlhttp.status：表示 HTTP 响应的状态码，200 表示请求成功。

然后编写对于响应消息的操作，比如这里我们需要相应的到一个验证码，responseText肯定返回一个Integer，用key去接收，javascript会自动解析key是怎样的类型，就算是数组也可以解析。

然后在控制台显示key，并且将key填入id为" verifycode"的html元素，也就是获取验证码按钮之前的< label id=“verifycode”>

响应失败就在控制台显示xmlhttp.status状态码。

xmlhttp.send();

其主要作用是向服务器发送 HTTP 请求，请求类型和请求URL根据open里面的参数决定。也就是说，执行到send()才把请求发送到服务器。open () 只是起一个连接作用。send发送请求成功之后，才会执行function。这里的function没有名字

controller

getcode.do这条URL对应的方法在哪里呢？我们在src新建一个com.njupt.controller包->StudentController.java类。

@RestController
public class StudentController {@RequestMapping(value="getcode.do",method=RequestMethod.GET)public Integer getCode() {Integer code=(int)(Math.random()*10000);if (code<1000) code+=1000;return code;}}

使用 Spring Boot 框架创建了一个 RESTful 风格的控制器类 StudentController，其主要功能是处理客户端发起的特定 GET 请求，并返回一个 4 位随机整数。

@RestController 注解的类会被Spring识别为Controller控制器，并且类中所有处理请求的方法返回值会直接作为 HTTP 响应体，无需额外的视图解析。

@RequestMapping：用于将 HTTP 请求映射到控制器的处理方法。

生成一个0-9999的随机数，如果小于1000，就加1000，保证验证码是四位，返回code。
在这里插入图片描述
key就会接收code，再填入id为verifycode的元素。

验证 码：<input type="text" id="code"/><label id="verifycode"></label><button onclick="getVerify()">获取验证码</button><br>

点击获取验证码按钮，就会获得验证码。
在这里插入图片描述
以firefox浏览器为例，点击右上角三条横线，点击更多工具。

选择开发者工具，打开控制台

就能看到console.log(key)显示的验证码，这里我点了很多下 “获取验证码”，最下面的1499是最近一次获取的。

如果我们希望每次进入login.html页面会自动生成验证码，无需手动点击，可以在< body >里面添加 load = getVerify() 每次进入login.html页面首先执行getVerify()，就会有验证码显示，同样的，点击获取验证码，可以获取新的验证码。

login() 登录功能

function login(){if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open();xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { } else {console.error(xmlhttp.status);}} xmlhttp.send(); 
}

先写出每个javascript function里面一样的结构，如上。

xmlhttp.open()
open()里面的参数如何确定，我们肯定要把sno学号和pwd密码传过去和数据库里面的数据进行比对，如果一致，则登陆成功。要传参数肯定是post请求，这里用异步。
xmlhttp.open(“post”,“login.do”,true);建立连接之后，把sno和pwd存入变量stuID,pwd。然后设置请求头，密码传输肯定不能明文传输，我们要进行加密。再把stuID和pwd通过post传过去。

stuID=document.getElementById("sno").value;
pwd=document.getElementById("pwd").value;
pwd=encodePwd(pwd,key);alert(pwd)
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");xmlhttp.send("stuID="+stuID+"&pwd="+pwd);

设置请求头代码每次复制即可。
encodePwd加密函数我们通过key验证码对pwd加密，于是在登录界面就不显示验证码，我们把输入验证码注释掉。
在这里插入图片描述
因为要用到getVerify()里面的key，所以key要设置为全局变量。

encodePwd(pwd,key)

加密函数，类似于C语言小练习专栏里面的加密逻辑，通过key加密，再通过-key解密。
在这里插入图片描述

我们可以在WebContent里新建文件夹js，js里面创建my.js文件。里面存放需要的js函数。再把my.js导入login.html。

<head>
<meta charset="UTF-8">
<title>login</title>
<script src="js/my.js"></script>
<script type="text/javascript">

function encodePwd(str,key)
{result="";for( i=0;i<str.length;i++){if(str[i]>='A'&&str[i]<='Z'){key1=key%26;index=(str.charCodeAt(i)-65+26+key1)%26;result=result+String.fromCharCode(index+65)}else if(str[i]>='a'&&str[i]<='z'){key1=key%26;index=(str.charCodeAt(i)-97+26+key1)%26;result=result+String.fromCharCode(index+97)}else if(str[i]>='0'&&str[i]<='9'){key1=key%10;index=(str.charCodeAt(i)-48+10+key1)%10;result=result+String.fromCharCode(index+48)}else result=result+str[i]}return result  
}

加密过程不多赘述。
比如输入密码123，通过随机key加密得到901
在这里插入图片描述

login.do

在StudentController里面写一个login.do对应的方法。返回一个什么类型给响应呢。不妨返回一个VO类：
VO类主要用来显示信息，像从前端向后端传递用户输入数据，或后端向前端返回处理结果等。它聚焦于数据本身，不包含业务逻辑。

比如我们创建一个LoginVo类
在src/com/njupt.voPackage包里创建LoginVo类

public class LoginVo {private Integer code;private String message;public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}
}

code用来表示登录情况的种类，比如登录成功，学号密码错误，有人在异地登录等等。
message用来展示给客户。

我们需要code来对pwd进行解密，可以选择增加参数code传过来，也可以选择在getcode.do里面把code设置在HttpSession session里面。

@RequestMapping(value="getcode.do",method=RequestMethod.GET)
public Integer getCode(HttpSession session) {Integer code=(int)(Math.random()*10000);if (code<1000) code+=1000;session.setAttribute("code", code);return code;
}

将生成的验证码存储到HttpSession中，键为"code"，后续在同一个会话内的其他方法可以通过这个键获取到验证码。

然后在login.do就可以把code调出来。

@RequestMapping(value="login.do",method=RequestMethod.POST)
public LoginVo login(@RequestParam("stuID")String stuID,@RequestParam("pwd")String pwd,HttpSession session) {LoginVo vo=new LoginVo();Integer key=(Integer)session.getAttribute("code");return vo;
}

解密方法写在哪里？刚才的加密方法是javascript，controller是java文件，二者不通。不妨创建一个util工具类，把自己写的工具都放在里面
在这里插入图片描述

public class MyUtil {public static String encodePwd(String s, int key){if(s==null) return null;char str[]=s.toCharArray();for(int i=0;i<str.length;i++){if(str[i]>='A'&&str[i]<='Z'){int key1=key%26;int index=(str[i]-'A'+26+key1)%26;str[i]=(char)(index+'A');}else if(str[i]>='a'&&str[i]<='z'){int key1=key%26;int index=(str[i]-'a'+26+key1)%26;str[i]=(char)(index+'a');}else if(str[i]>='0'&&str[i]<='9'){int key1=key%10;int index=(str[i]-'0'+10+key1)%10;str[i]=(char)(index+'0');}}return new String(str);}
}

工具都是静态方法。解码规则同加密规则，不多赘述。

解密之后，带着stuID和pwd去和数据库里找出对应的学生。用找到的stu信息判别是否有该用户，是否有异地登录。

因为要去数据库，我们通过studentService去调用Service层的方法

Student stu=studentService.login(stuID, pwd);

当然在StudentController开头要增加属性

@Resource
private StudentService studentService;

StudentService是一个业务逻辑层的服务类，用于处理与学生相关的业务操作，比如学生信息的增删改查等。

@Resource其默认按名称进行注入，即会根据被注入对象的名称在 Spring 容器中查找匹配的 Bean 进行注入。不写注解studentService堆上申请空间为null，调用其方法会报空指针异常。

这个时候再去写src/com.njupt.service/StudentService Interface接口

public interface StudentService {public Student login();
}

以及src/com.njupt.service/StudentService.impl接口实现类

@Service
public class StudentServiceImpl implements StudentService{@Resourceprivate StudentMapper studentmapper;@Overridepublic Student login(String userID, String pwd) {// TODO Auto-generated method stubreturn studentmapper.login(stuID,pwd);}
}

@Service：这是 Spring 框架的注解，用于将该类标记为一个服务组件，Spring 容器会自动扫描并将其实例化，纳入 Spring 的管理体系。

@Resource：这是 JSR - 250 规范中的注解，用于资源注入，类似于 Spring 的@Autowired。这里将StudentMapper类型的对象注入到studentmapper变量中。

StudentMapper是一个 MyBatis 的 Mapper 接口，用于执行数据库操作。

编写StudentMapper

public interface StudentMapper 
{@Select("select * from student where stuID=#{stuID} and pwd=#{pwd2}")public Student login(@Param("stuID")String stuID,@Param("pwd2")String pwd);}

原来还要写一个StudentMapperImpl接口实现类，以及studentmapper.xml配置文件，但是@Select(“select * from student where stuID=#{stuID} and pwd=#{pwd2}”)省略了这一步骤。这是 MyBatis 的注解，用于指定 SQL 查询语句。@param注释的id写入#{ }里，相当于社会语句里面的占位符。可以任意取名字，只要对应即可，比如把pwd参数取名pwd2，社会语句里面也用pwd2。

#{stuID}和#{pwd2}是 MyBatis 的占位符，在执行 SQL 时会被实际传入的参数值替换。

再从mapper层往上看。如果查询到就返回Student类，没查询到就返回null。service层返回mapper层的返回值到controller。最终才实现这一句话

Student stu=studentService.login(stuID, pwd);

我们先来测试一下对不对，输入一个错误学号密码
login.html

xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { json=eval("("+xmlhttp.responseText+ ")")console.log(json)if(json.code==100)alert("用户名或密码错误!")	} else {console.error(xmlhttp.status);}}

StudentController

if(stu==null) {vo.setCode(100);vo.setMessage("userID or pwd is error!");return vo;
}

在这里插入图片描述
说明代码可行，从数据库获取数据正确。

验证是否异地登录

要验证是否有其他人登录，必然要在登陆后进行一些操作，让登录和没登陆有区别。每次登录肯定都有一个stuID学号，HttpSession session，请求就会有唯一的session，还可以有登陆时间，登陆地点（IP地址）。
于是我们可以创建一个UserNode，每次登录就把这些信息存在一个UserNode，并且把这些Node用hashmap存起来，当然也可以用链表。

		UserNode node=HavingLogin.check(stuID);if(node==null) {node=new UserNode();node.setStuID(stuID);node.setSession(session);node.setLoginTime(MyUtil.getTime());node.setIp(request.getRemoteAddr());HavingLogin.add(node);vo.setCode(200);vo.setMessage("success");return vo;}

比如我们先检查是否被登录HavinfgLogin.check(stuID)，如果没有被登录，那就登录并且写好vo类的code和message，返回 vo类。

UserNode
由于UserNode并不对应数据库的每张表，也就是不是po类，也不和显示有关，故不是vo类，所以可以放在工具类。

public class UserNode
{String stuID;HttpSession session;String ip;String  loginTime;public UserNode() {}public UserNode(String stuID,HttpSession session,String ip,String loginTime){this.session=session;this.stuID=stuID;this.ip=ip;this.loginTime=loginTime;}public String getStuID() {return stuID;}public void setStuID(String stuID) {this.stuID = stuID;}public HttpSession getSession() {return session;}public void setSession(HttpSession session) {this.session = session;}public String getIp() {return ip;}public void setIp(String ip) {this.ip = ip;}public String getLoginTime() {return loginTime;}public void setLoginTime(String loginTime) {this.loginTime = loginTime;}
}

MyUtil.getTime () 我们要在MyUtil里写获取时间函数。工具方法都用static方便调用。可以用SimpleDataFormat类创建时间

public static String getTime() {SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");return sdf.format(new Date());
}

获取Ip地址
request.getRemoteAddr()：在 Java Web 开发中，request是HttpServletRequest类型的对象（比如在 Servlet 或基于 Spring - MVC 等框架的开发中），getRemoteAddr()是HttpServletRequest的一个方法，用于获取发送请求的客户端的 IP 地址。

我们要在login.do参数再加一个HttpServletRequest request

@RequestMapping(value="login.do",method=RequestMethod.POST)
public LoginVo login(@RequestParam("stuID")String stuID,@RequestParam("pwd")String pwd,HttpSession session,HttpServletRequest request) {

设置好UserNode信息后，调用HavingLogin.add(node)存起来。

com.njupt.util里面创建HavingLogin.java

public class HavingLogin
{// key 对应的是学号， value是对应的登录信息private  static HashMap<String, UserNode> havingPools=new HashMap<String, UserNode>();public static UserNode check(String stuID){return  havingPools.get(stuID);}public static void removeNode(String stuID){havingPools.remove(stuID);}public static boolean add(UserNode node){return havingPools.put(node.stuID,node)==null;}}

HashMap havingPools KV存储key是学号，value是UserNode，即登录信息。add就是把设置好信息的node存入havingPools，那么检查登录就是get(stuID)，get方法只是得到stuID键对应的value，并不会把stuID和对应的value从hashmap里面删去，删去用remove。如果查出stuID已经存进去了，说明有异地登录，如果是null，说明没有异地登陆。

登陆成功vo.code设置为200，message设置为success，已经有人登录设置code为300，message为登录时间和Ip

controller

vo.setCode(300);
vo.setMessage(node.getLoginTime()+node.getIp());

json=eval("("+xmlhttp.responseText+ ")")console.log(json)if(json.code==100)alert(jsno.message);else if(json.code==200)alert(json.message);location.href="success.html";else if(json.code==300)alert(json.message);

第一句json=eval()每次复制即可，这行代码主要用于将服务器返回的 JSON 格式的字符串数据转换为 JavaScript 对象。当然了json会自动解析为一个类，我们可以在login.html里调用json.code，json.message。

登陆成功跳转到success.html，只不过我们没写success.html
在这里插入图片描述
再次登陆同一个账号，显示登陆时间和IP地址。

找回账号

如果是陌生人登陆了我们的账号，我们要验证找回账号。常见的有回答问题。在数据库里建立问题表：
在这里插入图片描述
示例

id：问题序号
question：问题
answer：答案
stuID：学号

当login.html里json.code==300时弹出确认框，问是否验证。如果要找回账号，按道理，要把stuID传过去回答对应的问题。如果在verify中获得stuID，我们可以用uuid。
uuid
保证数据全球唯一性与一致性，通过uuid生成算法能够保证全球唯一；避免数据冲突等好处。

给每一个登录操作vo类都设置一个uuid。

public class LoginVo {private Integer code;private String message;private String uuid;

每次异地验证返回vo类前都设置一个vo.uuid

vo.setCode(300);
String uuid=UUID.randomUUID().toString();
vo.setUuid(uuid);
session.setAttribute(uuid, stuID);
vo.setMessage(node.getLoginTime()+node.getIp());
return vo;

由于UUID.randomUUID()返回的是一个UUID类，我们要把它转化成String，才能在session.setAttribute里面用uuid字符串把stuID存起来，这个唯一的uuid就对应这个stuID。

   else if(json.code==300){if (confirm("该账号已在其他设备登录："+json.message+" 是否要验证拿回?"))location.href="verify.html?"+json.uuid;

把uuid传到verify.html

verify.html

uuid="";
count=0;
function getParam()
{value=location.search;value=value.substring(1);uuid=value;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("get","question.do?uuid="+value,true);xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { problems=eval("("+xmlhttp.responseText+")")count=problems.length;document.getElementById("infos").innerHTML=display(problems);} } xmlhttp.send();
}

设置全局变量uuid，count表示问题数量。
value获取uuid，因为location.search是"?uuid"，所以要把第一个字符略去才是uuid。

get请求uuid对应学号的问题，响应problems是问题数组，count记录problems的数量。再把problems显示在id为infos的HTML元素。

显示结果如下
在这里插入图片描述
第一个问题的答案框 id 为p1，第二个问题答案 id 为p2。
最后点击验证进入verifySubmit()。

verifySubmit()

要验证问题，肯定要把答案传过去请求，我们可以把答案写成json字符串数组，格式为[ “123”,“spring”,“China”]。

function verifySubmit(){answer="[";for(i=0;i<count;i++)answer+="\""+document.getElementById("p"+(i+1))+"\"";answer+="\""+uuid+"\"]";if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) } xmlhttp.open("post","question.do",true);xmlhttp.setRequestHeader("Content-type","application/json");xmlhttp.send(answer);
}

首先是json格式的左括号 [ ，然后每一条答案都有双引号 " " 围起来，最后再添加uuid，也封装成字符串格式。

把answer post请求过去，带有参数故要设置请求头。

URL为 “question.do”，虽然名字和getParam()里面的一样，但是请求方式不一样，所以不会冲突。

刚刚在getSafeQuestions里已经把List< SafeProblem > lists用uuid作为key存在了session里。我们这个时候不需要再次访问数据库，直接通过uuid就获取到所有SafeProblem，用answer里的值和SafeProblem预存的答案进行比对，只要有不匹配的，设置vo.code=400。如果所有答案都匹配，设置code为500，返回vo。

@RequestMapping(value="question.do",method=RequestMethod.POST)
public LoginVo getSafeQuestions(@RequestBody String[] answer,HttpSession session){String uuid=answer[answer.length-1];LoginVo vo=new LoginVo();List<SafeProblem> lists=(List<SafeProblem>)session.getAttribute(uuid);for(int i=0;i<lists.size();i++) {SafeProblem sp=lists.get(i);if(!sp.getAnswer().equals(answer[i])) {vo.setCode(400);vo.setMessage("回答不正确");return vo;}}uuid=UUID.randomUUID().toString();SafeProblem sp=lists.get(0);session.setAttribute(uuid, sp.getStuID());vo.setCode(500);vo.setMessage("验证成功");vo.setUuid(uuid);return vo;

@RequestBody String[] answer
@RequestBody注解用来处理json格式的请求参数。

如果验证成功给一个全新的uuid。

对应javascript代码

xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) {json=eval("("+xmlhttp.responseText+")")if(json.code==500){alert("verify success,please change your pwd right now.")location.href="changePwd.html?"+json.uuid;} else {alert("不要窃取密码")location.href="login.html";}}else{console.error(xmlhttp.status);}

输入正确答案：南邮；青菜
在这里插入图片描述
错误答案

文章目录

前言

一、login.html

二、getVerify()

controller

login() 登录功能

encodePwd(pwd,key)

login.do

验证是否异地登录

找回账号

verifySubmit()

相关文章：