会话技术

最新推荐文章于 2024-06-16 19:31:31 发布

weixin_43586849

最新推荐文章于 2024-06-16 19:31:31 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_43586849/article/details/84649761

版权

1.什么是会话
会话(session)跟踪是web程序中常用的技术，用来跟踪用户的整个会话，常用的会话跟踪技术是cookie和session。cookie通过在客户端记录信息，确定用户身份，session通过在服务器端记录信息确定用户身份

2.COOKIE机制
在程序中，会话跟踪是很重要的事情，理论上，一个用户的所有请求操作都应该属于一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆

3.
而web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议，一旦数据交换完毕，客户端与服务器端的链接就会关闭再次交换数据需要建立新的连接，这就意味着服务器无法从连接上跟踪会话

4.例：用户登录

第一步：创建html样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

第二步：使用<meta>标签来适应不同的设备

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>用户登录</title>

第三步：引入样式

<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>
</head>
<body>

第四步：搭建用户登录标题

    <div class="container">
     <div class="row">
         <div class="col-sm-12"><h2 class="text-center">用户登录</h2></div>
     </div>

第五步：创建form表单和基本框架注意：验证码为上一次的验证码

  <form id="from1" class="form-horizontal" action="demo1.php" method="post">
          <div class="form-group">
            <label for="user" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="pwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input type="pwd" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
            </div>
          </div>
          <div class="form-group">
            <label for="yzm" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="yzm" name="yzm" placeholder="请输入验证码">
           </div>
            <div class="col-sm-6">
                <img width="100" src="yzm.php" id="validecode" alt="看不清楚,点击刷新">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
            </div>
          </div>
     </form>
    </div>

第六步：正则验证用户名，密码，验证码不能为空的验证

    <script type="text/javascript">
       $(function(){
             $('#validecode').click(function() {
                 $(this).attr('src','yzm.php?'+ Math.random());
                  
             })
       })

       $(function () {
            $('form').bootstrapValidator({
    　　　　　　　message: 'This value is not valid',
                　feedbackIcons: {
                    　　　　　　　　valid: 'glyphicon glyphicon-ok',
                    　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                    　　　　　　　　validating: 'glyphicon glyphicon-refresh'
                　　　　　　　　   },
                fields:{
                    user:{
                        validators:{
                            notEmpty: {
                                message: '用户名不能为空'
                            }
                       }
                    },
                    pwd:{
                        validators: {
                            notEmpty: {
                                message:'密码不能为空'
                            }
                        }
                    },
                   yzm:{
                        validators:{
                            notEmpty:{
                                message: '验证码不能为空'
                            }
                        }
                    }
                  
                }
            });
        });
    </script>
</body>
</html>

输出结果为：