睿乐购电商课程设计——用户模块前端

浅浅的花香味﹌ 2023-02-22 13:35 1阅读 0赞

### 睿乐购电商课程设计——用户模块前端 ###

*   *   *  公共js函数
         *  登录
         *  注册
         *  忘记密码
         *  个人信息

### 公共js函数 ###

*  `public.js`

/** * 判空 * * @param obj * @returns {boolean} */
    function isNull(obj) { 
        if (obj == null || obj == undefined) { 
            return true;
        }
        if (obj instanceof String && obj.trim() == '') { 
            return true;
        }
        return false;
    }
    
    function checkContentIsNull(...p) { 
        for (let i = 0, len = p.length; i < len; ++i) { 
            if (isNull(p[i])) { 
                alert('内容不能为空');
                return true;
            }
        }
        return false;
    }
    
    /** * 参数长度验证 * * @param obj * @param length * @returns {boolean} */
    function validLength(obj, length) { 
        if (obj.trim().length < length) { 
            return true;
        }
        return false;
    }
    
    /** * 用户名称验证 4到16位（字母，数字，下划线，减号） * * @param username * @returns {boolean} */
    function validusername(username) { 
        let pattern = /^[a-zA-Z0-9_-]{4,16}$/;
        if (pattern.test(username.trim())) { 
            return (true);
        } else { 
            return (false);
        }
    }
    
    /** * 用户密码验证 最少6位，最多20位字母或数字的组合 * * @param password * @returns {boolean} */
    function validPassword(password) { 
        let pattern = /^[a-zA-Z0-9]{6,20}$/;
        if (pattern.test(password.trim())) { 
            return (true);
        } else { 
            return (false);
        }
    }
    
    function checkUsername() { 
        let token = sessionStorage.getItem("token");
        let username = sessionStorage.getItem("username");
        if (isNull(token)) { 
            $('#myinfo').hide();
        } else { 
            $('#username_info').html("<span style='color:red' >" + username + " </span> 睿乐购商城欢迎你");
            $("#index_register").hide();
            $("#index_login").hide();
        }
    }
    
    function checkCart(){ 
        let len = $.cookie("goodCartIdLen");
        if (isNull(len)) { 
            len = 0;
        }
        $(".blockcart .count").text(len);
    }
    
    function addCart(id) { 
        let ids = $.cookie("goodCartId");
        if (isNull(ids)) { 
            ids = '';
        }
        let len = $.cookie("goodCartIdLen");
        if (isNull(len)) { 
            len = 0;
        }
        if (len >= 10) { 
            alert("亲，购物车的商品已有够多的商品了,清空一下，再添加");
        }
        len = parseInt(len) + 1;
        $.cookie("goodCartIdLen", len);
        $(".blockcart .count").text(len);
        let token = sessionStorage.getItem("token");
        if (isNull(token)) { 
            ids += ',' + id;
            $.cookie("goodCartId", ids);
            return;
        }
        $.ajax({ 
            type: "POST", //方法类型
            dataType: "json", //预期服务器返回的数据类型
            url: '/cart/add',
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify({ "goodsId":id}),
            beforeSend: function (request) { 
                request.setRequestHeader("token", token); //设置header值
            },
            success: function (result) { 
                if (result.status == 200) { 
                    console.log("添加到购物车成功");
                } 
                // else if (result.status == 404) { 
    
                // location.href = "404.html";
                // return ;
                // } 
                else { 
                    console.log(result.msg);
                    return ;
                }
    
            },
            error: function () { 
                //location.href="404.html";
                console.log("接口异常，现在联系管理员处理");
                return;
            }
        });
    }
    
    function shopDetail(id){ 
        sessionStorage.setItem("goodsId",id);
        location.href="detail.html";
    }
    
    function goodSearch(){ 
       let searchName =   $("#searchName").val();
       sessionStorage.setItem("searchName",searchName);
       let searchId  =  $("#searchId option:selected").val();
       sessionStorage.setItem("searchId",searchId);
       location.href="shop.html";
       return false;
    }

### 登录 ###

*  `login.html`

<!doctype html>
    <html class="no-js" lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>睿乐购——登录</title>
        <meta name="robots" content="noindex, follow" />
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
        <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
        <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
        <link rel="stylesheet" href="assets/css/style.min.css">
    
    </head>
    
    <body>
    
    
        
        <div class="header-area header-three">
            
            <div class="header-top full-border">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <div class="header-top-left">
                                <p>睿乐购商城欢迎你</p>
                            </div>
                        </div>
                        <div class="col-lg-8 col-12">
                            <div class="box-right">
                                <ul>
                                    <li class="settings">
                                        <a href="register.html">立即注册</a>
                                    </li>
                                    <li class="settings">
                                        <a href="login.html">登录</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
    
    
        
        <div class="breadcrumbs_area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb_content">
                            <ul>
                                <li>
                                    <h1><a href="index.html">首页</a></h1>
                                </li>
                                <li>登录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
        
        <div class="login-area mt-25">
            <div class="container">
                <div class="row">
                    <div class="offset-lg-3 col-lg-5">
                        <div class="checkout_info mb-20">
                            <form class="form-row" action="#" onsubmit="return false;">
                                <h1 class="last-title mb-30 text-center">登录</h1>
                                <div class="form_group col-12">
                                    <label class="form-label">用户名 <span>*</span></label>
                                    <input class="input-form" type="text" placeholder="请输入用户名" id="username" value="张三1号">
                                </div>
                                <div class="form_group col-12 position-relative">
                                    <label class="form-label">密码 <span>*</span></label>
                                    <input class="input-form" type="password" placeholder="请输入密码" id="password" value="123456">
                                </div>
    
                                <div class="form_group col-lg-4">
                                    <label for="remember_box">
                                        <input id="remember_box" type="checkbox">
                                        <span> 记住我 </span>
                                    </label>
                                </div>
    
                                <div class="form_group col-lg-8 text-right">
                                    <button class="login-register" type="submit" onclick="login()">登录</button>
                                </div>
                                <div class="col-12 justify-content-center col-lg-4 text-left">
                                    <p><a href="#" onclick="forget()">忘记密码</a></p>
                                </div>
                                <div class="col-12 col-lg-8 text-right">
                                    <p> 没有账户? <a href="register.html">立即注册</a>.</p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
    
        <script src="assets/js/vendor/vendor.min.js"></script>
        <script src="assets/js/plugins/plugins.min.js"></script>
        <script src="assets/js/plugins/jquery.cookie.js"></script>
    
        
        <script src="assets/js/main.js"></script>
        <script src="assets/js/public.js"></script>
        <script src="assets/js/login.js"></script>
    </body>
    
    </html>

*  `login.js`

### 注册 ###

*  `register.html`

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>睿乐购——注册</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
        <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
        <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
        <link rel="stylesheet" href="assets/css/style.min.css">
    
    </head>
    
    <body>
    
        
        <div class="header-area header-three">
            
            <div class="header-top full-border">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <div class="header-top-left">
                                <p>睿乐购商城欢迎你</p>
                            </div>
                        </div>
                        <div class="col-lg-8 col-12">
                            <div class="box-right">
                                <ul>
                                  
                                    <li class="settings">
                                        <a href="login.html">登录</a>
                                    </li>
                                  
    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    
    
    
            
            <div class="breadcrumbs_area">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb_content">
                                <ul>
                                    <li>
                                        <h1><a href="index.html">首页</a></h1>
                                    </li>
                                    <li>注册</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    
            
            <div class="register-area login-area mt-25">
                <div class="container">
                    <div class="row">
                        <div class="offset-lg-3 col-lg-6">
                            <div class="checkout_info mb-20">
                                <form class="form-row" action="#" onsubmit="return false;">
                                    <h5 class="last-title mb-10 text-center">会员注册</h5>
                                    <div class="col-lg-12 text-left mb-20">
                                        <p class="register-page"> 已有账户? <a href="login.html">立即登录</a></p>
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">用户名: <span id="username_info" style="color: red;">*</span></label>
                                        <input class="input-form" type="text" id="username" value="ant">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">密码 <span>*</span></label>
                                        <input class="input-form input-login" type="password" id="password" value="antrain">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">密码确认<span>*</span></label>
                                        <input class="input-form input-login" type="password" id="password2" id="password2" value="antrain">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">联系电话 <span>*</span></label>
                                        <input class="input-form" type="tel" id="phone" value="15733518352">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">邮箱 <span>*</span></label>
                                        <input class="input-form" type="email" id="email" value="2464210826@qq.com">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label"> 密保问题 <span>*</span></label>
                                        <input class="input-form" type="text" id="question" value="几班的">
                                    </div>
                                    <div class="form_group col-12">
                                        <label class="form-label">密保答案 <span>*</span></label>
                                        <input class="input-form input-login" type="text" id="answer" value="7">
                                    </div>
    
    
                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <div class="form-check">
                                                <div class="custom-checkbox">
                                                    <input class="form-check-input" type="checkbox" id="agree-condition-2">
                                                    <span class="checkmark"></span>
                                                    <label class="form-check-label" for="agree-condition-2">同意协议并注册 <a href="#">《知晓用户协议》</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row mt-20">
                                        <input type="submit" class="btn-secondary" value="注册" onclick="register()">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    
    
            <script src="assets/js/vendor/vendor.min.js"></script>
            <script src="assets/js/plugins/plugins.min.js"></script>
            <script src="assets/js/plugins/jquery.cookie.js"></script>
    
            
            <script src="assets/js/main.js"></script>
            <script src="assets/js/public.js"></script>
            <script> $(function () { $("#username").change(function () { let username = $("#username").val(); //console.log("--"+username); if (isNull(username)) { return; } let data = { "str": username, "type": "username", } $.ajax({ type: "POST", //方法类型 dataType: "json", //预期服务器返回的数据类型 url: "/user/checkValid", contentType: "application/json; charset=utf-8", data: JSON.stringify(data), success: function (result) { if (result.status == 1) { $('#username_info').text(" 该用户名存在") } else if (result.status == 200) { $('#username_info').text("*") } else if (result.status == 404) { location.href = "404.html"; return; } }, error: function () { alert("接口异常，请联系管理员！"); return; } }); }); }); function register() { if ($('#username_info').text() != '*') { alert('该用户名存在, 请重新输入'); return; } if (!$('#agree-condition-2')[0].checked) { alert('注册前先阅读用户协议'); return false; } let username = $("#username").val(); let password = $("#password").val(); let password2 = $("#password2").val(); let email = $("#email").val(); let question = $("#question").val(); let answer = $("#answer").val(); let phone = $("#phone").val(); if (isNull(username)) { alert("请输入用户名!"); return; } if (isNull(password)) { alert("请输入密码!"); return; } if (password !== password2) { alert("两次输入的密码不一致"); return; } let data = { "username": username, "password": password, "email": email, "question": question, "answer": answer, "phone": phone } //console.log(data); $.ajax({ type: "POST", //方法类型 dataType: "json", //预期服务器返回的数据类型 url: "/user/register", contentType: "application/json; charset=utf-8", data: JSON.stringify(data), success: function (result) { //console.log(result); if (result.status == 200) { alert(result.msg); window.location.href = "login.html"; } else if (result.status == 404) { location.href = "404.html"; return; } else { alert(result.msg); } }, error: function () { alert("接口异常，请联系管理员！"); return; } }); } </script>
    </body>
    
    </html>

### 忘记密码 ###

*  `forget.html`

<!doctype html>
    <html class="no-js" lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>睿乐购——找回密码</title>
        <meta name="robots" content="noindex, follow" />
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
        <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
        <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
        <link rel="stylesheet" href="assets/css/style.min.css">
    
    </head>
    
    <body>
        
        <div class="header-area header-three">
            
            <div class="header-top full-border">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <div class="header-top-left">
                                <p>睿乐购商城欢迎你</p>
                            </div>
                        </div>
                        <div class="col-lg-8 col-12">
                            <div class="box-right">
                                <ul>
                                    <li class="settings">
                                        <a href="register.html">立即注册</a>
                                    </li>
                                    <li class="settings">
                                        <a href="login.html">登录</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
        
        <div class="breadcrumbs_area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb_content">
                            <ul>
                                <li>
                                    <h1><a href="index.html">首页</a></h1>
                                </li>
                                <li>找回密码</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
        <div class="login-area mt-25">
            <div class="container">
                <div class="row">
                    <div class="offset-lg-3 col-lg-5">
                        <div class="checkout_info mb-20">
                            <form class="form-row" action="#" onsubmit="return false;">
                                <h1 class="last-title mb-30 text-center">找回密码</h1>
                                <div class="form_group col-12">
                                    <label class="form-label">用户名 <span>*</span></label>
                                    <input class="input-form" type="text" id="username" >
                                </div>
                                <div class="form_group col-12 position-relative">
                                    <label class="form-label">密保问题 <span>*</span></label>
                                    <input class="input-form" type="text" id="question">
                                </div>
                                <div class="form_group col-12 position-relative">
                                    <label class="form-label">密码答案 <span>*</span></label>
                                    <input class="input-form" type="text" id="answer">
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-info" type="submit" id="btn1">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="modal fade" tabindex="-1" role="dialog" id="passwordModel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                  <h4 class="modal-title">输入新密码</h4>
                </div>
                <div class="modal-body">
                    <form class="form-row" action="#" onsubmit="return false;">
                        <div class="form_group col-12">
                            <label class="form-label">密码 <span>*</span></label>
                            <input class="input-form" type="password" id="password" placeholder="请输入新密码">
                        </div>
                        <div class="form_group col-12 position-relative">
                            <label class="form-label">密码确认 <span>*</span></label>
                            <input class="input-form" type="password" id="password2" placeholder="确认新密码"> 
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" id="btn2">确定修改</button>
                </div>
              </div>
            </div>
          </div>
    
    
        <script src="assets/js/vendor/vendor.min.js"></script>
        <script src="assets/js/plugins/plugins.min.js"></script>
        <script src="assets/js/plugins/jquery.cookie.js"></script>
    
        
        <script src="assets/js/main.js"></script>
        <script src="assets/js/public.js"></script>
        <script src="assets/js/forget.js"></script>
    </body>
    
    </html>

*  `forget.js`

### 个人信息 ###

*  `my-account.html`

<!doctype html>
    <html class="no-js" lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>睿乐购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
        </title>
        
        <meta name="description" content="睿乐购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
        
        <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡" />
        <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
        <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
        <link rel="stylesheet" href="assets/css/style.min.css">
    
    </head>
    
    <body>
        
        <div class="header-area">
            
            <div class="header-top full-border">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <div class="header-top-left">
                                <p id="username_info">睿乐购商城欢迎你</p>
                            </div>
                        </div>
                        <div class="col-lg-8 col-12">
                            <div class="box-right">
                                <ul>
                                    <li class="settings">
                                        <a href="my-account.html">我的账户</a>
                                    </li>
    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    
    
            
            <div class="breadcrumbs_area">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb_content">
                                <ul>
                                    <li>
                                        <h1><a href="index.html">首页</a></h1>
                                    </li>
                                    <li>个人中心</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    
            
            <div class="my-account-area mt-50">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-2">
                            <ul class="nav flex-column dashboard-list mb-20 role=" tablist">
                                <li><a class="nav-link active show" data-toggle="tab" href="#dashboard" onclick="info()">个人信息</a></li>
                                <li> <a class="nav-link" data-toggle="tab" href="#orders" onclick="getAllOrder()">历史订单</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#updatePwd">修改密码</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#address" onclick="getAll()">收货地址</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#account-details" onclick="return getAddressTotal();">添加地址</a></li>
                                <li><a class="nav-link" onclick="logout()">退出登录</a></li>
                            </ul>
                        </div>
                        <div class="col-12 col-sm-12 col-md-12 col-lg-10">
                            
                            <div class="tab-content dashboard-content mb-20">
    
                                
                                <div id="dashboard" class="tab-pane fade active show">
                                    <h3 class="last-title">个人信息</h3>
                                    <div class="checkout_info">
                                        <form class="form-row" action="#" onsubmit="return false" method="POST">
    
    
                                            <div class="form_group col-12">
                                                <label class="form-label">联系电话 <span>*</span></label>
                                                <input class="input-form" type="text" id="phone">
                                            </div>
                                            <div class="form_group col-12">
                                                <label class="form-label">邮箱<span>*</span></label>
                                                <input class="input-form input-login" type="text" id="email">
                                            </div>
    
                                            <div class="form_group col-12">
                                                <label class="form-label"> 密保问题 <span>*</span></label>
                                                <input class="input-form" type="text" id="question">
                                            </div>
    
                                            <div class="form_group col-12">
                                                <label class="form-label"> 密保答案 <span>*</span></label>
                                                <input class="input-form" type="text" id="answer">
                                            </div>
    
                                        </form>
                                    </div>
                                    <div class="form_group col-12 col-lg-6">
                                        <button type="button" class="btn btn-info" onclick="updateInformation()">确定修改</button>
                                    </div>
                                </div> 
    
    
                                <div id="orders" class="tab-pane fade">
                                    <h3 class="last-title">历史订单</h3>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>订单编号</th>
                                                    <th>实际付款金额</th>
                                                    <th>付款类型</th>
                                                    <th>邮费</th>
                                                    <th>购买时间</th>
                                                    <th>订单状态</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>￥200.00</td>
                                                    <td>支付宝</td>
                                                    <td>￥0.00</td>
                                                    <td>2020-6-8 </td>
                                                    <td>交易完成</td>
                                                    <td><button type="button" class="btn btn-info">查看信息</button></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div> 
    
                                <div id="updatePwd" class="tab-pane fade">
                                    <h3 class="last-title">修改密码</h3>
                                    <div class="checkout_info">
                                        <form class="form-row" action="#" onsubmit="return false" method="POST">
    
                                            <div class="form_group col-12">
                                                <label class="form-label"> 旧密码 <span>*</span></label>
                                                <input class="input-form" type="password" id="password_old" value="123456">
                                            </div>
                                            <div class="form_group col-12">
                                                <label class="form-label"> 新密码 <span>*</span></label>
                                                <input class="input-form" type="password" id="password_new" value="1234567">
                                            </div>
                                            <div class="form_group col-12">
                                                <label class="form-label">确认新密码 <span>*</span></label>
                                                <input class="input-form" type="password" id="password2" value="1234567">
                                            </div>
                                        </form>
    
                                    </div>
                                    <button type="button" class="btn btn-info" onclick="updatePwd()">确定修改</button>
                                </div> 
    
                                <div id="address" class="tab-pane">
                                    <h3 class="last-title">收货地址 </h3>
                                    <div class="table-responsive">
                                        <table class="table" id="showAddress">
    
                                        </table>
                                    </div>
                                </div> 
    
    
                                <div id="account-details" class="tab-pane fade">
    
                                    <h3 class="last-title">添加收货地址 </h3>
                                    <div class="checkout_info">
                                        <form class="form-row" action="#" onsubmit="return false;">
                                            <div class="form_group col-12 col-lg-4">
                                                <label class="form-label">省 <span>*</span></label>
                                                <input class="input-form" type="text" id="rp" value="河北省">
                                            </div>
                                            <div class="form_group col-12 col-lg-4">
                                                <label class="form-label">市 <span>*</span></label>
                                                <input class="input-form" type="text" id="rc" value="秦皇岛市">
                                            </div>
                                            <div class="form_group col-12 col-lg-4">
                                                <label class="form-label">区/县 <span>*</span></label>
                                                <input class="input-form" type="text" id="rd" value="海港区">
                                            </div>
                                            <div class="form_group col-12 col-lg-8">
                                                <label class="form-label">详细地址 <span>*</span></label>
                                                <input class="input-form input-login" type="text" id="ra" value="燕山大学西校区宿舍4B">
                                            </div>
                                            <div class="form_group col-12 col-lg-4">
                                                <label class="form-label">邮编 <span>*</span></label>
                                                <input class="input-form input-login" type="number" id="rz" value="066000">
                                            </div>
                                        </form>
                                        <button type="button" class="btn btn-info" onclick="add()">添加地址</button>
                                    </div>
    
    
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal fade" tabindex="-1" role="dialog" id="showAddressTo">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">修改地址信息</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-row" action="#" onsubmit="return false;">
                                <div class="form_group col-12 col-lg-4">
                                    <label class="form-label">省 <span>*</span></label>
                                    <input class="input-form" type="text" id="urp">
                                </div>
                                <div class="form_group col-12 col-lg-4">
                                    <label class="form-label">市 <span>*</span></label>
                                    <input class="input-form" type="text" id="urc">
                                </div>
                                <div class="form_group col-12 col-lg-4">
                                    <label class="form-label">区/县 <span>*</span></label>
                                    <input class="input-form" type="text" id="urd">
                                </div>
                                <div class="form_group col-12 col-lg-8">
                                    <label class="form-label">详细地址 <span>*</span></label>
                                    <input class="input-form input-login" type="text" id="ura">
                                </div>
                                <div class="form_group col-12 col-lg-4">
                                    <label class="form-label">邮编 <span>*</span></label>
                                    <input class="input-form input-login" type="text" id="urz">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="updAddress()" id="btn2">提交</button>
                        </div>
                    </div>
                </div>
            </div>
    
    
            <script src="assets/js/vendor/vendor.min.js"></script>
            <script src="assets/js/plugins/plugins.min.js"></script>
            <script src="assets/js/plugins/jquery.cookie.js"></script>
            
            <script src="assets/js/main.js"></script>
            <script src="assets/js/public.js"></script>
            <script src="assets/js/personal.js"></script>
    </body>
    
    </html>

*  `personal.js`