zoukankan      html  css  js  c++  java

  • 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';
    });
});

    　　
  • 相关阅读:
    HTML滚动时位置固定
    SQL Server 2008中的代码安全===主密钥
    细说SQL Server中的加密
    SQL Server中的加密
    jQuery跨域调用WebService
    js中的preventDefault与stopPropagation详解
    jQuery中return false,e.preventDefault(),e.stopPropagation()的区别
    Tinymce在ASP.NET中的使用方法
    JSON.stringify 语法实例讲解
    json转字符串 —— jsonObj.toJSONString()与JSON.stringify(jsonObj)json to string
  • 原文地址：https://www.cnblogs.com/SkyeAngel/p/9038652.html
Copyright © 2011-2022 走看看