商城项目日结

其他 2020-03-11 09:55:51 阅读次数: 0

今天主要对 商城的注册模块的前端页面 以及后端交互功能进行了代码编写
项目地址：
代码如下：
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    input.error {
      border-bottom: 1px solid red;
    }

    label.error {
      color: red;
      display: block;
      font-size: 14px;
    }
    </style>
    <!-- <link rel="stylesheet" href="../css/login.css"> -->
    <link rel="stylesheet" href="../css/register.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.min.css">
</head>
<body>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/jquery-validate/jquery.validate.min.js"></script>
    <script src='../lib/jquery-validate/localization/messages_zh.min.js'></script>
    <script src="../lib/jquery-cookie/jquery.cookie.js"></script>
    <script src="../js/register.js"></script>

    <div class="header">
        <div class="container">
            <a href="./index.html"><img src="../images/login/logo.png" alt="logo.png"></a>
        </div>
    </div>

    <div class="register">
        
            <div class="register-container">
                <div class="register-container-titile">TP-LINK会员注册</div>

                <!-- <p class="register-container-info">账号或密码错误</p> -->
                <div class="account-tab">
                    <p class="account-tab-item active" index="1">手机注册</p>
                    <p class="account-tab-item" index="2">邮箱注册</p>
                </div>
                
                <div class="box">
                    <div id="tab" index="1">
                        <form id="register-p" action="../server/register.php" method="POST" >
                            <div class="account-phone "  >
                                <div class="account-register-phone">
                                    <input type="text" class="account-register-phone-input" name="username" maxlength="50" placeholder="手机号">
                                </div>
                                <!-- <p class="account-info">请输入邮箱或手机号</p> -->

                                <div class="account-register-phone-password">
                                    <input type="password" class="account-register-phone-password-input" name="password" maxlength="50" placeholder="密码" id="pass-p">
                                </div>
                                <!-- <p class="account-password-info">请输id入密码</p> -->

                                <div class="account-register-phone-password2">
                                    <input type="password" class="account-register-phone-password2-input" name="password2" maxlength="50" placeholder="确认密码">
                                </div>

                                <div class="account-register-phone-code">
                                    <input type="text" class="account-register-phone-code-input" name="codeI" id="codeI" maxlength="50" placeholder="验证码">
                                    <input type="button" class="account-register-phone-code-img" name="code" id="code" onclick="createCode(4,'code','code2'),confirmBox()">
                                </div>

                                <div class="account-register-phone-submit">
                                    <button class="btn btn-primary btn-lg" style="width: 400px;background-color: #0096FF;border:none;text-align: center;" onclick="validate('codeI')">立即注册</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div id="tab" index="2" style="display: none;">
                        <form id="register-e" action="../server/login.php" method="POST">
                            <div class="account-mail"  >
                               
                                <div class="account-mail-contact">
                                    <input type="text" class="account-mail-contact-input" name="username" maxlength="50" placeholder="电子邮箱">
                                </div>
                                <!-- <p class="account-info">请输入邮箱或手机号</p> -->

                                <div class="account-mail-password">
                                    <input type="password" class="account-mail-password-input" name="password" maxlength="50" placeholder="密码">
                                </div>
                                <!-- <p class="account-password-info">请输id入密码</p> -->
                                <div class="account-mail-password2">
                                    <input type="password" class="account-mail-password2-input" name="password2" maxlength="50" placeholder="密码">
                                </div>

                                <div class="account-mail-code">
                                    <input type="text" class="account-mail-code-input" name="codeI2" id="codeI2" maxlength="50" placeholder="验证码">
                                    <input type="button" class="account-mail-code-img" name="code2" id="code2" onclick="createCode(4,'code','code2')">
                                </div>

                                <div class="account-mail-submit">
                                    <button class="btn btn-primary btn-lg" style="width: 400px;background-color: #0096FF;border:none;text-align: center;" onclick="validate('codeI2')">立即注册</button>
                                </div>
                                
                            </div>
                        </form>
                    </div>
                </div>
                    
                <div class="account-bottom clean" style="width: 400px;margin: 0 auto 80px;">
                    <input type="checkbox" id="cbId"><a href="用户协议" class="fancybox">同意TP-Link注册协议</a>
                    <a class="account-bottom-register" href="./login.html" style="text-decoration: none;float: right;">立即登录</a>
                </div>
            </div>
        
    </div>
    </body>
</html>

css

.header{
    width:100%;
    height:80px;
}

.header .container{
    width:1200px;
    margin:0 auto;
}

.header .container img{
    width:237px;
    height:20px;
    margin:30px 123px 0 0;
    display:inline-block;
}

.register{
    width: 100%;
    height: 1000px;
    background: linear-gradient(to bottom,#66CCFF,#FFFFFF);
}

.register-container{
    width:600px;
    background-color:#fff;
    margin-left:360px;
    float:left;
    margin-top:80px;
}
.register-container-titile{
    padding:40px 0 0;
    font-size:24px;
    color:#0096FF;
    line-height:40px;
    text-align:center;
    font-weight:700;
}

.account-tab{
    width:400px;
    height:32px;
    margin:36px auto 0;
}

.account-tab-item{
    width:50%;
    height:100%;
    float:left;
    font-size:14px;
    color:#333;
    text-align:center;
    line-height:32px;
    box-sizing:border-box;
    border-bottom:1px solid #CCC;cursor:pointer;
}

.account-tab-item.active{
    color:#0096FF;
    border-bottom:1px solid #0096FF
}

.account-phone{
    width:100%;
    margin:0 auto
}

.account-register-phone{
    width:400px;
    height:48px;
    margin:24px auto 0;
    position:relative
}

.account-register-phone-input{
    font-size:14px;
    color:#333;
    line-height:20px;
    border:none;
    padding-bottom:9px;width:100%;
    border-bottom:1px solid #ccc
}

.account-register-phone-contact-img{width:16px;height:16px;position:absolute;right:0;bottom:12px}



.account-register-phone-password{width:400px;height:48px;margin:24px auto 0;position:relative}

.account-register-phone-password-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}

.account-register-phone-password2{width:400px;height:48px;margin:24px auto 0;position:relative}


.account-register-phone-password2-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}



.account-register-phone-code{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-register-phone-code-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}

.account-register-phone-code-img{position:absolute;top:-5px;right:0;width:100px;height:30px;display:block;cursor:pointer;font-family:Arial,宋体; 
    font-style:italic;border:none;letter-spacing:3px;outline: none;}

.account-register-phone-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}

.account-register-submit-word{font-size:16px;color:#FFF;text-align:center;line-height:48px;font-weight:700}



.account-mail{width:100%;margin:0 auto}
.account-mail.visible{display: none;}

.account-mail-contact{width:400px;height:48px;margin:24px auto 0;position:relative}
/* .account-register-main-mail-contact-subtitle{font-size:12px;color:#999;margin-top:2px} */
.account-mail-contact-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-contact-img{width:16px;height:16px;position:absolute;right:0;bottom:12px}

.account-mail-password{width:400px;height:48px;margin:24px auto 0;position:relative}

.account-mail-password-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}

.account-mail-password2{width:400px;height:48px;margin:24px auto 0;position:relative}

.account-mail-password2-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}

.account-mail-code{width:400px;height:48px;margin:24px auto 0;position:relative}

.account-mail-code-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-code-img{position:absolute;top:-5px;right:0;width:100px;height:30px;display:block;cursor:pointer;font-family:Arial,宋体; 
    font-style:italic;border:none;letter-spacing:3px;outline: none;}

.account-mail-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}
.account-register-main-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}
.account-register-main-submit-word{font-size:16px;color:#FFF;text-align:center;line-height:48px;font-weight:700}

js 主要是进行表单验证的功能 和验证码的生成

    <script>
        
            $('.account-tab > p').click(function () {
            $(this) // 你点击的那一个 li
                .addClass('active') // 添加类名
                .siblings() // 所有兄弟元素(不包含自己)
                .removeClass('active') // 移除类名
                .parent() // 找到父元素 account-tab
                .next() // 下一个兄弟元素 box
                .children() // box 下面的phone mail
                // .removeClass('visible') // 移除类名
                .eq($(this).index()) // 找到索引和我点击的对应的那一个
                .show()
                .siblings("#tab")
                .hide();

        
            })

        
    </script>
    <script>
            window.onload=createCode(4,"code",'code2');
            // window.onload=createCode(4,"code2");
            var code ; //在全局定义验证码  
            
            function createCode(len,tag,tag2){ 
                code = "";  
                var codeLength = len;//验证码的长度  
                var checkCode = document.getElementById(tag);  
                var checkCode2 = document.getElementById(tag2);  
                var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
                                        'S','T','U','V','W','X','Y','Z');//随机数  
                for(var i = 0; i < codeLength; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
                }  
                checkCode.value = code;//把code值赋给验证码  
                checkCode2.value= code;
            } 

            function validate(tag){  
                var inputCode = document.getElementById(tag).value.toUpperCase(); //取得输入的验证码并转化为大写     
                if(inputCode.length <= 0) { //若输入的验证码长度为0  
                     alert("请输入验证码！"); //则弹出请输入验证码  
                }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                    alert("验证码输入错误！"); //则弹出验证码输入错误  
                    createCode();//刷新验证码  
                    document.getElementById(tag).value = "";//清空文本框  
                }else { //输入正确时  
                    alert("合格！"); 
                } 
            }
            // confirmBox();
            function confirmBox(){
                var confirmBox = document.getElementById("cbId");//cbId为checkbox的ID
                if(confirmBox.checked){
                form.submit();
                }else{
                alert("请同意协议");
                return false;
                }
            }
            //添加手机号码验证
            $.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $(function(){

                var flag = $("#register-p").validate({
                    onfocusout: function(element) { $(element).valid(); }, 
                    rules: {
                        // key 就是你要验证的哪个 input 框的 name 属性
                        username: {
                            required:true,
                            isMobile:true,
                        }, // 用户名必填
                        password: { // 一个字段可以写多个验证方式
                            required: true,
                            minlength: 6, // 最少是六个
                            maxlength: 12, // 最多十二个
                        },
                        password2:{
                            required:true,
                            equalTo:"#pass-p"
                        },
                        codeI: 'required'
                        },
                        // 你自定义提示的文本内容
                    messages: {
                        // key 就是你验证的哪个 input 框的 name 属性
                        username: {
                            required:'请输入电话号码',
                            isMobile:'请输入正确的电话号码'
                        },
                        password: {
                            required: '请输入密码!',
                            minlength: '最少要输入 6 个字符!'
                        },
                        password2:{
                            required:"请确认密码",
                            equalTo:"两次密码不相同"
                        },
                        codeI: '请输入验证码!'
                        },
                        // 表单的提交事件
                        //    这个函数会在表单验证通过以后执行
                        submitHandler: function (form) {
                        // form 接收的就是你的 form 标签
                        // console.log(form)
                        // console.log('表单验证通过了, 我需要使用 ajax 去提交数据了')

                        // 有一个 jQuery 的方法
                        // serialize() 快速获取表单输入的数据
                        //  $(form).serialize() 就能拿到这个 form 标签里面的表单数据
                        // console.log($(form).serialize())  // username=admin&password=123456

                        // 发送请求到后端
                          console.log('验证成功');
                          $.post('../server/register.php', $(form).serialize(), res => {
                            console.log(res)
                            var result = JSON.stringify(res)
                            console.log(result)
                            var admin =res.username
                            console.log(admin)
                            if (result.code === 0) {
                                console.log('登录失败')
                            } else {
                            // 登录成功
                            $.cookie('name', admin);
                            window.location.href = './index.html'
                            }
                          }, 'json')
                        
                        }
                    
                });

                var flag2 = $("#register-e").validate({
                    onfocusout: function(element) { $(element).valid(); }, 
                    rules: {
                        // key 就是你要验证的哪个 input 框的 name 属性
                        username: {
                            required:true,
                            email:true,
                        }, // 用户名必填
                        password: { // 一个字段可以写多个验证方式
                            required: true,
                            minlength: 6, // 最少是六个
                            maxlength: 12, // 最多十二个
                        },
                        password2:{
                            required:true,
                            equalTo:"#pass-p"
                        },
                        codeI2: 'required'
                        },
                        // 你自定义提示的文本内容
                    messages: {
                        // key 就是你验证的哪个 input 框的 name 属性
                        username: {
                            required:'请输入邮箱',
                            email:'请输入正确的邮箱'
                        },
                        password: {
                            required: '请输入密码!',
                            minlength: '最少要输入 6 个字符!'
                        },
                        password2:{
                            required:"请确认密码",
                            equalTo:"两次密码不相同"
                        },
                        codeI2: '请输入验证码!'
                        },
                        // 表单的提交事件
                        //    这个函数会在表单验证通过以后执行
                        submitHandler: function (form) {
                      

                        // 发送请求到后端
                          console.log('验证成功');
                          $.post('../server/register.php', $(form).serialize(), res => {
                            console.log(res)
                            var result = JSON.stringify(res)
                            console.log(result)
                            var admin =res.username
                            console.log(admin)
                            if (res === 0) {
                                console.log('注册失败')
                                alert('注册失败')
                            } else {
                                console.log('注册成功')
                                alert('注册成功')
                            $.cookie('name',admin);
                            window.location.href = './index.html'
                            }
                          }, 'json')
                        
                        }
                    
                });
            });      
    </script>

server php文件 rigister.php 向数据库中添加新用户

<?php

  // 1. 接收前端的参数
  $username = $_POST['username'];
  $password = $_POST['password'];

  // 2. 去数据库验证
  // 2-1. 连接数据库
  header('content-type: text/html;charset=utf-8;');

  // 连接数据库
  $link = mysqli_connect('localhost', 'root', 'root', 'newdata');

  // 执行 sql 语句了

  //   执行插入的 sql 语句
  $res = mysqli_query($link, "INSERT INTO `login` (`username`, `password`) VALUES('$username', '$password')");

  // 输出结果看一下
  //   true 表示插入成功
//   print_r($res);

  if ($res) {
    $arr = array("message" => "注册成功", "code" => 1,"username" => "$username");
  } else {
    $arr = array("message" => "注册失败", "code" => 0);
  }

//   // 把这关联型数组返回
  print_r(json_encode($arr));

  //   echo json_encode($arr);


?>
张运成
发布了9 篇原创文章 · 获赞 0 · 访问量 103
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43861707/article/details/104622321
结
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022