shop--15.升级--账号注册，登录，登出（前端）
注册
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>注册</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">注册</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-name"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="用户名" id="username">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" placeholder="密码" id="password">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" placeholder="确认密码" id="confirmPassword">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="email" placeholder="邮箱" id="email">
</div>
</div>
</div>
</li>
<!--gender 下拉列表-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">性别</div>
<div class="item-input">
<select id="gender">
<option data-id="1" selected>Male</option>
<option data-id="2">Female</option>
</select>
</div>
</div>
</div>
</li>
<!--用户类型 下拉列表-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-user_type"></i></div>
<div class="item-inner">
<div class="item-title label">用户类别</div>
<div class="item-input">
<select id="usertype">
<option data-id="1">顾客</option>
<option data-id="2" selected>店家</option>
<option data-id="3">超级管理员</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="用户昵称" id="nickname">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-title label">头像</div>
<div class="item-input">
<input type="file" id="small-img">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<label for="j_captcha" class="item-title label">验证码</label> <input
id="j_captcha" name="j_captcha" type="text"
class="form-control in" placeholder="验证码" />
<div class="item-input">
<img id="captcha_img" alt="点击更换" title="点击更换"
onclick="changeVerifyCode(this)" src="../Kaptcha" />
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-danger"
id="back">返回登录</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-fill" id="submit">注册</a>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/common/commons.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/local/register.js' charset='utf-8'></script>
</body>
</html>
register.js
$(function() {
var registerUrl = '/local/localuserregister';
$('#submit').click(function() {
var localUser = {};
var personInfo = {};
localUser.username = $('#username').val();
localUser.password = $('#password').val();
personInfo.email = $('#email').val();
/*使用的下拉菜单来进行选择，获取值的方法*/
personInfo.gender = $('#gender').find('option').not(function(){
return !this.selected;
}).data('id');
/*$('select#gender').find('option:selected').val();*/
personInfo.userType = $('#usertype').find('option').not(function(){
return !this.selected;
}).data('id');
personInfo.nickname = $('#nickname').val();
localUser.personInfo = personInfo;
var thumbnail = $('#small-img')[0].files[0];
console.log(thumbnail);
var formData = new FormData();
formData.append('thumbnail', thumbnail);
formData.append('localUser', JSON.stringify(localUser));
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
$.toast('请输入验证码！');
return;
}
formData.append("verifyCodeActual", verifyCodeActual);
$.ajax({
url : registerUrl,
type : 'POST',
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
$.toast('提交成功！');
window.location.href = '/local/login';
} else {
$.toast('提交失败！');
$('#captcha_img').click();
}
}
});
});
$('#back').click(function() {
window.location.href = '/local/login';
});
});
登录
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>登录</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">登录</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-name"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="text" id="username" placeholder="用户名">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" id="psw" placeholder="密码">
</div>
</div>
</div>
</li>
<li id="verifyPart" hidden="true">
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<label for="j_captcha" class="item-title label">验证码</label> <input
id="j_captcha" name="j_captcha" type="text"
class="form-control in" placeholder="验证码" />
<div class="item-input">
<img id="captcha_img" alt="点击更换" title="点击更换"
onclick="changeVerifyCode(this)" src="../Kaptcha" />
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-success"
id="register">注册</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-fill" id="submit">登录</a>
</div>
</div>
</div>
</div>
<script type='text/javascript'
src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/local/login.js'
charset='utf-8'></script>
</body>
</html>
login.js
$(function() {
var registerUrl = '/local/localuserregister';
$('#submit').click(function() {
var localUser = {};
var personInfo = {};
var password =$('#password').val();
var confirmPassword = $('#confirmPassword').val();
if(password != confirmPassword){
$.toast('两次密码不一致！');
return;
}
localUser.username = $('#username').val();
localUser.password = password;
personInfo.email = $('#email').val();
/*使用的下拉菜单来进行选择，获取值的方法*/
personInfo.gender = $('#gender').find('option').not(function(){
return !this.selected;
}).data('id');
/*$('select#gender').find('option:selected').val();*/
personInfo.userType = $('#usertype').find('option').not(function(){
return !this.selected;
}).data('id');
personInfo.nickname = $('#nickname').val();
localUser.personInfo = personInfo;
var thumbnail = $('#small-img')[0].files[0];
console.log(thumbnail);
var formData = new FormData();
formData.append('thumbnail', thumbnail);
formData.append('localUser', JSON.stringify(localUser));
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
$.toast('请输入验证码！');
return;
}
formData.append("verifyCodeActual", verifyCodeActual);
$.ajax({
url : registerUrl,
type : 'POST',
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
$.toast('提交成功！');
window.location.href = '/local/login';
} else {
$.toast('提交失败！');
$('#captcha_img').click();
}
}
});
});
$('#back').click(function() {
window.location.href = '/local/login';
});
});
登出
logout.js
$(function(){
$('#log-out').click(function () {
//清除session
$.ajax({
url:'/local/logout',
type:'post',
dataType:"json",
success:function(data){
if(data.success){
var usertype=$('#log-out').attr('usertype');
//清除成功后退出到登录界面
window.location.href = '/local/login?usertype=' + usertype;
return false;
}
},
error : function (data, error) {
alert(error);
}
});
});
});
修改密码
changepwd.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>修改密码</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">修改密码</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-name"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="用户名" id="username">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" placeholder="原密码" id="password">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" placeholder="新密码" id="newPassword">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-input">
<input type="password" placeholder="确认密码" id="confirmPassword">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<label for="j_captcha" class="item-title label">验证码</label> <input
id="j_captcha" name="j_captcha" type="text"
class="form-control in" placeholder="验证码" />
<div class="item-input">
<img id="captcha_img" alt="点击更换" title="点击更换"
onclick="changeVerifyCode(this)" src="../Kaptcha" />
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-danger"
id="back">返回登录</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-fill" id="submit">修改密码</a>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/common/commons.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/local/changepwd.js' charset='utf-8'></script>
</body>
</html>
changepwd.js
$(function() {
var url = '/local/changelocalpwd';
$('#submit').click(function() {
var username = $('#username').val();
var password = $('#password').val();
var newPassword = $('#newPassword').val();
var confirmPassword = $('#confirmPassword').val();
if(newPassword != confirmPassword){
$.toast('两次密码不一致！');
return;
}
var formData = new FormData();
formData.append('username', username);
formData.append('password', password);
formData.append('newPassword', newPassword);
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
$.toast('请输入验证码！');
return;
}
formData.append("verifyCodeActual", verifyCodeActual);
$.ajax({
url : url,
type : 'POST',
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
$.toast('提交成功！');
window.location.href = '/shopadmin/shoplist';
} else {
$.toast('提交失败！' + data.errMsg);
$('#captcha_img').click();
}
}
});
});
$('#back').click(function() {
window.location.href = '/shopadmin/shoplist';
});
});
