html+servlet+angularjs记住密码保存cookie

最新推荐文章于 2021-06-05 13:22:55 发布

原创最新推荐文章于 2021-06-05 13:22:55 发布 · 728 阅读

0 ·

CC 4.0 BY-SA版权

java学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于前后端分离的登录系统实现方案，包括前端使用AngularJS进行表单验证和交互，后端采用Java Servlet进行登录验证及Cookie管理。

define(['app'],function(app){
app.controller('loginCtrl',function($scope,$http){
	$scope.remember=false;
	$scope.user={
			username:'',
			password:'',
			check:'',
			remember:$scope.remember
	}
	
	/** 发送请求判断是否记住密码 */
	$http({
		url:'rememberServlet',
		method:'post'
	}).then(function(resp){
		$scope.user.username=resp.data.username;
		$scope.user.password=resp.data.password;
		$scope.remember = resp.data.remember;
	});
	
	console.log($scope.remember);
	
	/** 点击图片刷新 */
	$scope.capture = "capture"; 
	//改变请求图片的路径
	$scope.changeImg = function(){
		$scope.capture = "capture?f=" + Math.random();
	}
	
	
	
	
	/** 登录函数 */
	$scope.login = function(){
		//不能为空验证
//		if(user.username==undefined || user.username==''){
//			$scope.error="账号不能为空!";
//			return;
//		}
//		if(user.password==undefined || user.password==''){
//			$scope.error="密码不能为空!";
//			return;
//		}
//		if(user.check==undefined || user.check==''){
//			$scope.error="验证码不能为空!";
//			return;
//		}
		
		/** 点击登录时将是否选中赋值*/
		$scope.user.remember=$scope.remember;
		
		/** 数据库验证*/
		
		$http({
			url:'login',
			method:'post',
			params:$scope.user,
			dataType:'josn'
		}).then(function(resp){
			//刷新验证码
			$scope.changeImg();
			if(resp.data.result==-2){
				alert("验证码错误");
				
			}else if(resp.data.result==-1){
				alert("账号或密码错误");
				
			}else{
				alert("登陆成功!"+resp.data.username);
				
			}
			
			
		})
		
	}
	
	});
})

<link rel="stylesheet" href="static/css/login.css" />
<div class="row login-row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 login-col">
		<form action="index.html" method="get">
			<div class="login-div">
				<div>
					<em><h3 class="login-h3">XXXX管理系统</h3></em>
				</div>
				<hr class="hr"/>
				<div class="input-group input-group-lg">
					<div class="input-group-btn ">
						<label for="user" class="btn btn-default"id="users">账号:</label>
					</div>
					<input type="text"id="user" class="form-control" placeholder="Username" ng-model="user.username"/>
				</div>
				<div class="input-group input-group-lg">
					<div class="input-group-btn">
						<label for="pass" class="btn btn-default"id="passw">密码:</label>
					</div>
					<input type="password"id="pass" class="form-control"  placeholder="Password"ng-model="user.password"/>
				</div>
				<div class="input-group input-group-lg">
					<div class="input-group-btn">
						<label for="key" class="btn btn-default"id="keys">
							<i class="fa fa-key"></i>
						</label>
					</div>
					<input type="text"id="key" class="form-control" ng-model="user.check"/>
					<div class="input-group-addon" style="width:168px;padding:0;color:175,215,151;"><img ng-src="{{capture}}" ng-click="changeImg()" title="点击刷新" style="cursor:pointer"></div>
				</div>
				
				<p style="margin-top: -20px;">记住密码？<input type="checkbox" ng-model="remember"/> </p>
				<div>
					<input class="btn btn-default"data-loading-text="Loading..."autocomplete="off"
						 id="ss"value="登录"ng-click ="login()">
				</div>
			</div>
		</form>
	</div>
</div>

package team.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;
import team.service.LoginService;
import team.serviceimpl.LoginServiceImpl;

public class LoginServlet extends HttpServlet{

	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//1. 先对验证码进行验证
		String check = req.getParameter("check");
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		String remember = req.getParameter("remember");
		int result;
		
		//从session中获得验证码的值
		String check2 = (String) req.getSession().getAttribute("sb");
		if(check2.equals(check)) {
			//在验证码正确的情况下对账号密码进行验证
			LoginService service = new LoginServiceImpl();
			result = service.login(username, password);
			System.out.println(result);	
		}else {
			result=-2;//验证码不一致 result = -2
		}
		
		//当用户可登录, 并且勾中记住密码, 将账户密码存入cookie
		if(result==1&&"true".equals(remember)) {
				Cookie c1 = new Cookie("username",username);
				resp.addCookie(c1);
				Cookie c2 = new Cookie("password",password);
				resp.addCookie(c2);
				Cookie c3 = new Cookie("remember","ture");
				resp.addCookie(c3);
				System.out.println("保存cookie成功!");
			}else {
				Cookie c1 = new Cookie("username","");
				resp.addCookie(c1);
				Cookie c2 = new Cookie("password","");
				resp.addCookie(c2);
				Cookie c3 = new Cookie("remember","false");
				resp.addCookie(c3);
//				System.out.println("保存cookie失败");
			}
		JSONObject json = new JSONObject();
		json.put("result", result);
		json.put("username", username);
		
		//3. 将结果返回给前台
			PrintWriter pw = resp.getWriter();
			pw.print(json);
			pw.flush();
			pw.close();
		
		
		
	}
}

package team.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSON;
import net.sf.json.JSONObject;

public class RememberServlet extends HttpServlet{
		
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
		String username="";
		String password="";
		boolean remember=false;
		
		
		//1. 获取cookie
		Cookie[] cookies = req.getCookies();
		if(cookies != null){			
			for(Cookie c : cookies){
				String name = c.getName();
				if("username".equals(name)){
					username = c.getValue();
				}else if("password".equals(name)){
					password = c.getValue();
				}else if("remember".equals(name)){
					remember = "ture".equals(c.getValue());
				}
			}
		}
		
		System.out.println(username);
		System.out.println(password);
		System.out.println(remember);
		System.out.println("读取结束");
		
		//创建json对象
		JSONObject json = new JSONObject();
		json.put("username", username);
		json.put("password", password);
		json.put("remember", remember);
		
		//将json对象但会给页面
		PrintWriter pw = resp.getWriter();
		pw.print(json);
		pw.flush();
		pw.close();
		
	}
}

服务层,和连接数据库,主要在于login.js验证,对页面读取cookie