您的位置：首页 > 其它

基于FullCalendar插件的简单个人日程安排系统(2)

2017-11-27 11:38 573 查看
(之前写了2个小时的内容没有保存，又要重新写，我 (꒦_꒦) )

先展示下工程目录:



系统流程图



UML类图



ER图



login.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!--    一个自定义的SimpleTag，用于记住用户名 -->
<%@taglib prefix="mytag" uri="MyTag"%>

<!DOCTYPE html>
<html>
<head>
<title>个人日程安排系统登录界面</title>

<!--    因为这个登录界面模板我也是从网上找的，除了login.css这个文件是我自己写的外，其他都是模板附带的，所以除了login.css最好别改动。 -->
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/animate-custom.css" />
<link rel="stylesheet" type="text/css" href="../css/login.css" />
</head>
<body>
<div class="container">

<header>
<h1>个人日程安排系统</h1>
</header>

<section>
<div id="container_demo">
<a class="hiddenanchor" id="toregister"></a> <a class="hiddenanchor"
id="tologin"></a>
<div id="wrapper">

<!--                登录部分页面代码 -->
<div id="login" class="animate form">

<!--                    这个onsubmit属性是html5的form的一个属性，如果值为true则正常跳转到action的路径，如果值为false，则不能跳转 -->
<!--                      这里的onsubmit属性值用一个函数返回值是因为这个signin()函数要用于判断用户名密码是否正确有效 -->
<form name="login_form" action="index.jsp" method="post"
onsubmit="return signin()">
<h1>登  录</h1>
<p>

<!--                            这里的oninvalid属性和oninput属性也是input自带的属性 -->
<!--                            oninvalid="setCustomValidity('请输入用户名')就是当用户输入不合法时提示"请输入用户名" -->
<!--                            oninput="setCustomValidity('')就是当用户输入时调用这个函数-->
<!--                            注意这两个属性要成对出现才能实现提示效果 -->
<label for="username" class="uname"> 用户名 </label> <input
id="username" name="username" required
oninvalid="setCustomValidity('请输入用户名')"
oninput="setCustomValidity('')" placeholder="my user name"
value="<mytag:FourthTag/>" />
</p>
<p>
<label for="password" class="password"> 密码 </label> <input
id="password" name="password" required
oninvalid="setCustomValidity('请输入密码')"
oninput="setCustomValidity('')" type="password"
placeholder="my password" />

ef00
</p>
<p id="loginError">用户名或密码错误</p>
<p class="keeplogin">
<input type="checkbox" name="rememberusername"
id="rememberusername" value="loginkeeping" /> <label
for="loginkeeping">记住账号</label>
</p>
<p class="login button">
<input type="submit" value="Login" />

</p>
<p class="change_link">
没有账号 ? <a href="#toregister" class="to_register">注 册</a>
</p>
</form>
</div>

<!--                    注册部分页面代码 -->
<div id="register" class="animate form">
<form action="login.jsp#tologin"
onsubmit="return signup()" method="post">
<h1>注  册</h1>
<p>
<label for="userNameSignUp" class="uname"> 用户名 </label> <input
id="userNameSignUp" name="userNameSignUp" required
oninvalid="setCustomValidity('请输入要想注册的用户名')"
oninput="setCustomValidity('')" placeholder="my username" />
</p>
<p>
<label for="passwordSignUp" class="youpasswd"> 密码 </label> <input
id=passwordSignUp name=passwordSignUp required
oninvalid="setCustomValidity('请输入你的密码')"
oninput="setCustomValidity('')" type="password"
placeholder="my password" />
</p>
<p>
<label for="passwordSignUp_confirm" class="youpasswd">
确认密码 </label> <input id="passwordSignUp_confirm"
name="passwordsignup_confirm" required
oninvalid="setCustomValidity('请输入你的密码')"
oninput="setCustomValidity('')" type="password"
placeholder="my password" />
</p>
<p id="signUpError" class="keeplogin"></p>
<p class="signin button">
<input type="submit" value="Sign up" />
</p>
<p class="change_link">
已注册账号 ? <a href="#tologin" class="to_register"> 登 录 </a>
</p>
</form>
</div>

</div>
</div>
</section>
</div>

<!-- 引入处理用户登录&注册的js文件 -->
<script src="../js/signin.js" charset="UTF-8"></script>

</body>
</html>

<!--    引入公共尾部 -->
<jsp:include page="footer.jsp" />


signin.js

/**
* @see 该js文件用于处理login.jsp页面的登录和注册
* @author wangbin
* @time 2017年11月15日 下午2:41:20
*/

/**
* @see 处理用户(普通用户或者管理员)登录
* @author wangbin
* @time 2017年11月15日 下午2:44:20
*/
function signin()
{
/**
* xmlhttp XMLHttpRequest对象,用于在后台与服务器交换数据
* username 登录页面用户输入的用户名
* password 登录页面用户输入的密码
* loginError 登录页面的错误提示
* result   用户是否正确登录，若正确登录则返回true,否则返回false
*/
var xmlhttp, username, password, loginError,rememberusername, result = false;
loginError = document.getElementById("loginError");
username = document.getElementById("username").value;
password = document.getElementById("password").value;
rememberusername = document.getElementById("rememberusername").checked;
//新建XMLHttpRequest对象
//对于不同浏览器新建XMLHttpRequest对象方式不同
if (window.XMLHttpRequest) {
// 对于 IE7+, Firefox, Chrome, Opera, Safari浏览器
xmlhttp = new XMLHttpRequest();
} else {
// 对于 IE6,IE5浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//向处理登录的servlet发送请求，该请求包含用户名和密码
xmlhttp.open("POST", "loginServlet", false);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("username=" + username + "&password=" + password +"&rememberusername="+ rememberusername);
//处理servlet返回的结果
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//如果servlet返回"incorrect",说明用户名或密码错误
//显示错误提示
//登录失败
if (xmlhttp.responseText == "incorrect") {
loginError.style.display = "block";

result = false;
} else {
//如果servlet没有返回"incorrect",说明，用户名、密码正确
//根据账号的不同类型，servlet会返回不同的地址
//若账号类型为管理员，则servlet会返回管理员首页面的地址
//若账号类型为普通用户，则servlet会返回普通用户首页面的地址
//不显示错误提示
//登录成功
//跳转到相应首页面
loginError.style.display = "none";
document.forms['login_form'].action=xmlhttp.responseText;
result = true;
}
}
return result;
}

/**
* @see 隐藏登录界面，显示注册界面
* @author wangbin
* @time 2017年11月15日 下午3:03:20
*/
function toRegister(){

document.getElementById("login").style.display="none";
document.getElementById("register").style.display="block";

}

/**
* @see 隐藏注册界面，显示登录界面
* @author wangbin
* @time 2017年11月15日 下午3:05:20
*/
function toLogin(){
$("register").hide();
$("login").show();
}
/**
* @see 处理普通用户注册
* @author wangbin
* @time 2017年11月15日 下午3:25:02
*/
function signup(){
var userNameSignUp,passwordSignUp,passwordSignUp_confirm,signUpError,xmlhttp;
userNameSignUp = document.getElementById("userNameSignUp").value;
passwordSignUp = document.getElementById("passwordSignUp").value;
passwordSignUp_confirm = document.getElementById("passwordSignUp_confirm").value;
signUpError = document.getElementById("signUpError");
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(passwordSignUp != passwordSignUp_confirm){
signUpError.style.display = "block";
signUpError.innerHTML="两次密码不一致";
return false;
}else{

xmlhttp.open("POST","signUpServlet",false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("userNameSignUp="+userNameSignUp+"&passwordSignUp="+passwordSignUp);

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText=="success"){
signUpError.style.display = "none";
alert("注册成功!");
return true;
}else if(xmlhttp.responseText=="error"){
signUpError.innerHTML="该用户名已经注册 !";
signUpError.style.display = "block";

return false;
}else{
signUpError.value="Register failly!";
signUpError.style.display = "block";

return false;
}
}

}
}


我用于处理用户登录和注册的办法是: 通过js获取用户的输入信息，再通过AJAX将用户输入的信息传递给后端，也就是上面出现的signin()函数中的loginServlet和signup()函数中的signUpServlet。在这两个servlet中对用户信息进行判断，然后将结果返回到jsp页面，jsp再根据servlet不同的返回值做出不同的提示。

由于后端部分内容实在是有点多而且有点乱，所以我放在后一篇文章中了。

有疑惑的地方可以留言。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航