记一次用户登录的过程

最新推荐文章于 2024-04-16 22:14:27 发布

忍法阡陌

最新推荐文章于 2024-04-16 22:14:27 发布

阅读量1.2k

点赞数

分类专栏： java html5/JavaScript Spring/SpringMVC Maven 文章标签： springmvc 用户登录 ajax jquery java

本文链接：https://blog.csdn.net/yc199505/article/details/72528822

版权

html5/JavaScript 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

java

5 篇文章 0 订阅

订阅专栏

Spring/SpringMVC

3 篇文章 0 订阅

订阅专栏

1. 环境说明

开发语言/脚本：Java JavaScript

开发工具：Eclipse
框架：Spring
浏览器：Chrome

2. 前端代码展示

index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<%@ include file="/WEB-INF/inc/meta.jsp"%>
</head>
<script type="text/javascript">

	function reset() {
		$('#form')[0].reset();
	}

	function loginCheck () {
		$.ajax({
			url:"${ctx}/loginCheck.do",
			dataType:'html',
			type:'post',
			async:false,
			data:$('#form').serialize(),
			success:function(data){
				if(data=='login success!'){
					layer.msg(
						"欢迎您登录!",
						{icon:1,time:2000},
						function() {
							window.location = "${ctx}/loginsucc.html"
						}
					);
				}
				else if(data=='login failed!'){
					layer.msg("用户名或密码错误！");
				}else{
					layer.msg("未知错误！请与管理员联系！谢谢！");
				}
			},
		});
	}
</script>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="row clearfix">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<form class="form-horizontal" id="form">
						<fieldset>

						<!-- Form Name -->
						<legend>记一次登录的过程：</legend>

						<!-- Text input-->
						<div class="form-group">
						  <label class="col-md-4 control-label" for="username">用户名：</label>
						  <div class="col-md-4">
						  <input id="username" name="username" type="text" placeholder="用户名" class="form-control input-md" required="">
						  <span class="help-block">请输入用户名</span>
						  </div>
						</div>

						<!-- Password input-->
						<div class="form-group">
						  <label class="col-md-4 control-label" for="password">密  码：</label>
						  <div class="col-md-4">
						    <input id="password" name="password" type="password" placeholder="密码" class="form-control input-md" required="">
						    <span class="help-block">请输入您的密码</span>
						  </div>
						</div>

						<!-- Button (Double) -->
						<div class="form-group">
						  <label class="col-md-4 control-label" for="reset"></label>
						  <div class="col-md-8">
						    <a href="javascript:void(0);" id="reset" name="reset" class="btn btn-warning" onclick="reset()">清空</a>
						    <a id="login" name="login" class="btn btn-primary col-md-offset-1" onclick="loginCheck()">登录</a>
						  </div>
						</div>

						</fieldset>
					</form>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

loginsucc.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>登录成功</title>
<%@ include file="/WEB-INF/inc/meta.jsp"%>
</head>
<script>

    function logout () {
        $.ajax({
            url:"${ctx}/logout.do",
            dataType:'html',
            type:'post',
            async:false,
            success:function(data){
                if(data=='logout success!'){
                    layer.msg(
                        "注销登录成功！",
                        {icon:1,time:2000},
                        function() {
                            window.location = "${ctx}/show.html"
                        }
                    );
                }
                else{
                    layer.msg("未知错误！请与管理员联系！谢谢！");
                }
            },
        });
    }
</script>
<body>
欢迎您！${username},登录成功!<a href="javascript:void(0);" onclick="logout()">点此退出登录！</a>
</body>
</html>

3. 后台代码展示

Controller层：
IndexController.java:

package com.edu.yc.web;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.edu.yc.entity.User;
import com.edu.yc.service.UserService;

@Controller
@RequestMapping(value="/")
public class IndexController {
	
	@Autowired
	private UserService us;
	
	@RequestMapping(value={"","show.html"})
	public String index(Model model){
		return "index";
	}
	
	@RequestMapping(value="loginCheck.do")
	@ResponseBody
	public String loginCheck(Model model,User userInfo,HttpSession hs){
		boolean result = us.loginCheck(userInfo);
		if(result==true){
			hs.setAttribute("CURR_USER", userInfo);
			model.addAttribute("username", userInfo.getUsername());
			return "login success!";
		}else{
			return "login failed!";
		}
	}
	
	@RequestMapping(value="loginsucc.html")
	public String loginSucc(Model model,HttpSession hs){
		User user = (User)hs.getAttribute("CURR_USER");
		if(user!=null){
			model.addAttribute("username", user.getUsername());
			return "loginsucc";
		}else{
			return "gotologin";
		}
	}
	
	@RequestMapping(value="logout.do")
	@ResponseBody
	public String logout(Model model,HttpSession hs){
		hs.invalidate();
		return "logout success!";
	}
	
}

Service层：
UserService.java:

package com.edu.yc.service;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Service;

import com.edu.yc.entity.User;

@Service
public class UserService {
	
	public static List<User> users;
	
	static{
		users = new ArrayList<User>();
		User user = new User();
		user.setUsername("zhangsan");
		user.setPassword("123");
		User user1 = new User();
		user1.setUsername("lisi");
		user1.setPassword("456");
		users.add(user);
		users.add(user1);
	}
	
	public boolean loginCheck(User userInfo) {
		// TODO Auto-generated method stub
		for(User tmpuser : users){
			if(tmpuser.equals(userInfo)){
				return true;
			}
		}
		return false;
	}
}

JavaBean层:
User.java:

package com.edu.yc.entity;

public class User {
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", password=" + password + "]";
	}
	
	@Override
	public boolean equals(Object obj){
		if(obj instanceof User){
			User user = (User) obj;
			String username = user.getUsername();
			String password = user.getPassword();
			if(this.username!=null||this.password!=null){
				if(this.username.equals(username)&&this.password.equals(password)){
					return true;
				}else{
					return false;
				}
			}else{
				return false;
			}
		}else{
			return false;
		}
	}
}

4. 界面截图

首页登录界面

登录成功
直接拼地址登录

5. 过程详解

这个小的Demo，没有结合啥mybatis，hibernate，没整那么麻烦，只弄了一个Spring框架，这样有助于新手的理解。

登录流程：

浏览器中输入http://localhost:8181/requestTest/show.html这个URL

浏览器会请求本机的8181端口，然后把该请求的数据包发送到这个8181端口

服务器jetty监听了8181端口，收到了数据包，得到请求路径是http://localhost:8181/requestTest/show.html，jetty解析路径找到requestTest这个上下文对应的由jetty管理的web项目，在requestTest后面的以/开头后面的路径，都是被Spring管理的

于是请求会到对应的方法上，因为在对应的Controller和Controller中的方法上，有RequestMapping，这个是Spring的注解配置方式，十分方便

请求到达对应的方法处理了业务逻辑之后，再向浏览器返回ResponseBody也就是响应头，或者跳转到jsp页面，将jsp页面作为资源的形式发送给浏览器

前端通过响应头得到验证结果，然后通过请求新的URL去跳转到登录成功的页面

##6. 小结
#### 例子很简单，简单做了一次表单提交请求，并不是直接用form的submit按钮直接跳转页面请求，而是通过ajax调用jQuery的方法提交的表单，如此做的好处是，页面不会在登陆失败的时候又要刷新，让请求次数少了一次，减轻了服务器压力。当然一个表单只能少请求一次，但如果表单多了的话，减轻的压力还是很可观的。
#### 用到了Spring的两种响应方式，一种是返回Response响应报，另一种是响应一个jsp页面，在Servlet中sendRedirect此例子中并没有用到，原因是，sendRedirect实质上是后台模拟前台的浏览器去向服务器发送URL请求，所以并没有专门做例子去展示
##7.结束语

见到新技术的时候，不要去怕深入，新技术的出现，肯定是因为有新需求的出现，新需求出现了，但原有的解决相应问题的解决方案不够用了，那么便会推进新的技术理论的出现和发展
不要为了学习新技术而学习新技术，因为如果没有具体的去使用新技术，是不那么容易理解的
搞不懂新技术是干什么的，要学会不求甚解，先学会用，然后再相辅相成的大胆猜测，小心求证
接下来还会将一些流行的技术，用通俗的话来说明，有兴趣的，可以继续关注我的博客的动态，菜鸟上路，请多多关照！欢迎大家指正！
最后附上源码：http://download.csdn.net/detail/yc199505/9849213