5-flask项目

flask-bootstrap的使用：

使用flask-bootstrap: 步骤：

1. pip install flask-bootstrap

2. 进行配置：

    from flask-bootstrap import Bootstrap
    bootstrap = Bootstrap()
    # 在__init__.py中进行初始化：
   ​
    ###### 初始化bootstrap
   ​
    bootstrap.init_app(app=app)

    

3. 内置的block：

   {% block title %}首页{% endblock %}
   ​
   {% block navbar %} {% endblock %}
   ​
   {% block content %} {% endblock %}
   ​
   {% block styles %} {% endblock %}
   ​
   {% block srcipts %} {% endblock %}
   ​
   {% block head %} {% endblock %}
   ​
   {% block body %} {% endblock %}

4. 创建base.py

   {% extends "bootstrap/base.html" %}
   {% block title %}首页{% endblock %}
   {% block styles %}
      {{ super() }}
       <style>
          .....
       </style>
   {% endblock %}
   ​
   {% block navbar %}
    ....
      
   {% endblock %}
   ​
   {% block content %}
      {% block newcontent %}
           <h1>Hello, Bootstrap</h1>
      {% endblock %}
      {% block footer %}
           <p id="myfoot">京ICP备11008000号-6京公网安备11010802020853</p>
      {% endblock %}
   {% endblock %}

    

5. 子模板继承父模板：

   {% extends 'base.html' %}
   {% block title %}
       博客首页
   {% endblock %}
   {% block styles %}
      {{ super() }}
      <style>
        .....
      </style>
   {% endblock %}
   ​
   {% block newcontent %}
      <div id="container">
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
          <div class="article"></div>
      </div>
   {% endblock %}
   ​

    

会话机制

（1）cookie

　　在网站中，HTTP请求是无状态的。也就是说，即使第一次用户访问服务器并登录成功后，第二次请求服务器依然不知道当前发起请求的是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，浏览器将这些数据保存在本地。当用户发起第二次请求的时候，浏览器自动的将上次请求得到的cookie数据携带给服务器，服务器通过这些cookie数据就能分辨出当前发起请求的是哪个用户了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4K，因此使用cookie只能存储一些少量的数据。

（2）session

　　session与cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源。

（3）cookie和session的结合使用

　　web开发发展至今，cookie和session的使用已经出现了一些非常成熟的方案。在如今的市场和企业里，一般有两种存储方式：

• 存储在服务器：通过cookie存储一个session_id，然后具体的数据则保存在session中。当用户已经登录时，会在浏览器的cookie中保存一个session_id，下次再次请求的时候，会把session_id携带上来，服务器根据session_id在session库中获取用户的session数据，从而能够辨别用户身份，以及得到之前保存的状态信息。这种专业术语叫做server side session

• 将session数据加密，然后存储在cookie中。这种专业术语叫做client side session，flask采用的就是这种方式，但是也可以替换成其它形式

实现方式：

1. cookie方式：

• 保存：

     通过response对象保存。
      response = redirect(xxx)
      response = render_template(xxx)
      response = Response()
      response = make_response()
     response = jsonify()
     通过对象调用方法
     response.set_cookie(key,value,max_age)
     其中max_age表示过期时间，单位是秒
     也可以使用expires设置过期时间，expires=datetime.now()+timedelta(hour=1)

   

• 获取：

  通过request对象获取。
      request.form.get()
      request.args.get()
      cookie也在request对象中
      request.cookies.get(key) ----> value

   

• 删除：

   

   通过response对象删除。 把浏览器中的key=value删除了
      response = redirect(xxx)
      response = render_template(xxx)
      response = Response()
      response = make_response()
     response = jsonify()
     通过对象调用方法
     response.delete_cookie(key)

   

2. session方式：

   session： 是在服务器端进行用户信息的保存。一个字注意： 使用session必须要设置配置文件，在配置文件中添加SECRET_KEY=’xxxxx’， 添加SECRET_KEY的目的就是用于sessionid的加密。如果不设置会报错。

3. • 设置： 如果要使用session，需要直接导入： from flask import session

   把session当成字典使用，因此：session[key]=value ​ 就会将key=value保存到session的内存空间 ​ 并会在响应的时候自动在response中自动添加有一个cookie：session=加密后的id

   • 获取 用户请求页面的时候就会携带上次保存在客户端浏览器的cookie值，其中包含session=加密后的id 获取session值的话通过session直接获取，因为session是一个字典，就可以采用字典的方式获取即可。 value = session[key] 或者 value = session.get(key)

     这个时候大家可能会考虑携带的cookie怎么用的？？？？ ​ 其实是如果使用session获取内容,底层会自动获取cookie中的sessionid值， ​ 进行查找并找到对应的session空间

      

   • 删除 session.clear() 删除session的内存空间和删除cookie del session[key] 只会删除session中的这个键值对，不会删除session空间和cookie

 博客登录之短信验证码方式登录

登录页用户密码和手机验证码的表单切换

因为是复制的邮箱的表单，我们这里用作手机的表单，得做点修改

我们给登录页添加js点击事件。

 遍历所有的span标签，当点击到哪个span，把所有的登录表单都隐藏，把点击到的span的索引作为参数，这个索引对应的表单展示出来。这样就实现了登录表单的切换

    <script>
        $(function () {
                $(".logintab").hide();
                $(".logintab").first().show();
                $("#tab span").each(function (i) {
                    $(this).click(function () {
                        $(".logintab").hide();
                        $(".logintab").eq(i).show();
                    })
                });
            }
        )

    </script>

我们注册时，用户密码是必填且唯一的。所以我们可以通过用户密码登录也可以通过手机验证码登录

 当我们点击手机时

 成功跳到手机验证码登录

手机验证码登录页面。我们需要输入手机号码，然后点击发生验证码，这里是通过ajax发送的请求。要发送短信验证码，需要使用第三方的短信服务。
比如我们的服务请求阿里短信服务，给某个手机发送短信，阿里短信服务会给该手机发送短信，然后将发送的情况响应给我们的程序。我们根据阿里短信服务响应的结果，如果是成功，那么我们程序就给浏览器点击发送验证码的地方显示，短信已发送成功。
用户从手机中找到验证码，填在浏览器中，然后点击登录
点击登录之后，用户携带手机号和手机验证码请求我们的服务器。
阿里短信服务响应的不只是成功发送的数据，还有发送了哪个验证码的数据。这时我们就根据用户发送过来的验证码和阿里短信服务给我们响应的验证码对比，如果一致，那么就登录。否则就算登录失败。

也就是手机验证码登录，需要两个路由，一个是sendMessage,一个是Login。我们已经有用户账号密码登录的路由了。我们想让手机验证码登录的还是走这同一个登录路由

 其实两个form都是在div上，div类名一样，它们请求的地址都是login。那么我们怎么区分两种不同的登录方式呢。可以在访问地址上传参，根据传参来判断。

 一个post请求的路由分成了两个部分，通过路由拼接字符串传参来判断，执行不同的登录方式代码。这时是从args里面取数据，如果是1就把用户账号密码登录的代码放到下面，否则判断如果等于2，那么就写我们刚刚分析的短信验证码登录方式的登录代码

 接下来就需要写短信验证码的点击发送事件了

当我们点击发送短信验证码按钮，就获取到用户输入的手机号码，并获取到这个input的后面的span标签，设置好样式，发送失败时接收并展示错误信息使用。

判断手机号的长度是不是是11位，是的话使用ajax请求发送短信的路由，否则给手机号输入框后面的span添加提示文本；

    <script>
        $(function () {
                // 显示|隐藏 登录方式
                $(".logintab").hide();
                $(".logintab").first().show();
                $("#tab span").each(function (i) {
                    $(this).click(function () {
                        $(".logintab").hide();
                        $(".logintab").eq(i).show();
                    })
                });

                // 发送验证码
                $('#btnCheck').click(function () {
                    let phone = $('#inputPhone').val();
                    let span_obj = $('#inputPhone').next('span');
                    span_obj.css({'color': 'red', 'font-size': '12px'});
                    if (phone.length == 11) {
                        //发送ajax
                        $.get('{{ url_for('user.send_message') }}',{phone:phone},function(data){

                        });
                    } else {
                        span_obj.text('必须输入11位手机号码')
                    }
                });
            }
        )

    </script>

原文地址：http://www.cnblogs.com/machangwei-8/p/16929399.html