Python Web 框架-Ajax day07

day06回顾

1.关系映射

一对多
在"多"表(实体类)中实现：
实现外键关联
外键属性=db.Column(db.TYPE,db.ForeignKey('主表.主键'))
在"一"表(实体类)中实现：
实现关联属性以及反向引用
属性名 = db.relationship('关联的实体类',backref='属性名',lazy='dynamic')
一对一
在任何一个表(实体)中实现：
实现外键关联
外键属性=db.Column(db.TYPE,db.ForeignKey('主表.主键'))
在另一个表(实体)中实现：
实现关联属性以及反向引用
属性名 = db.relationship('关联的实体类',backref='属性名',uselist=False)
多对多
创建关联表
对象名 = db.Table(

               '关联表名',
               db.Column('id',db.Integer,primary_key=True),
               db.Column('外键列名1',db.TYPE,db.ForeignKey('主表1.主键')),
               db.Column('外键列名2',db.TYPE,db.ForeignKey('主表2.主键'))
           )
       在任何一个实体中实现：
           实现关联属性以及反向引用

           关联属性名=db.relationship(
               '关联的实体类名',
               secondary='关联的第三张表表名',
               lazy='dynamic',
               backref=db.backref(
                   '反向引用属性名',
                   lazy='dynamic'
               )
           )

什么是cookie
cookie 是一种数据存储技术
将一段文本保存在客户端(浏览器)的一种技术，并可以长时间保存
cookie的使用场合
1. 记住密码
2. 记住搜索关键词
Flask 中使用 cookie
1. 使用响应对象保存cookie到客户端
  响应对象：
  1.resp = make_response("响应字符串")
  2.resp = redirect('地址')
  响应对象.set_cookie(key,value,max_age)
  key :保存的cookie的名称
  value ：保存的cookie的值
  max_age : 保存的时间，以 s 为单位的数字
2. 获取 cookie 中的值
  每次向服务器发送请求时，都会把 cookie 中的数据封装到request中带到服务器
  request.cookies
  request.cookies['key']
  request.cookies.get('key')

2.session

什么是session
session - 会话
session是保存在服务器，为每个浏览器所开辟的一段空间
session 在 Flask 中的实现
1. 配置 SECRET_KEY
  app.config['SECRET_KEY'] = "YOUR GUESS"
2. 使用session
  from flask import session
  1. 向session中保存数据
    session['key'] = value
  2. 从session中获取数据
    value = session['key']
  3. 从session中删除数据
    del session[key]
session 与 cookie 的异同：
相同：都能够保存数据
不同：
1. 保存地方不同
  session 是保存在服务器上的
  cookie 是保存在浏览器上的
2. 保存时长不同
  cookie 可以永久性保存
  session 临时性保存数据
3. 安全性问题
  session 安全级别较高
  cookie 安全级别较低

3.AJAX

什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 xml

通过 JS 异步的向服务器发送请求并接收响应数据

同步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低
异步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待

AJAX优点：
1.异步访问
2.局部刷新

使用场合：
1.搜索建议
2.表单验证
3.前后端完全分离
AJAX核心对象 - 异步对象(XMLHttpRequest)
1. 什么是XMLHttpRequest
  简称为 xhr
  称为 "异步对象"，代替浏览器向服务器发送异步的请求并接收相应
  
  xhr 是由JS来提供的
2. 创建异步对象 (xhr)
  主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器(IE7+,Chrome,Firefox,Safari,Opera)全部都支持 XMLHttpRequest。但在IE低版本浏览器中(IE6以及以下)，就不支持XMLHttpRequest，需要使用 ActiveXObject() 来创建异步对象
  
  <script>
  if(window.XMLHttpRequest){
  支持 XMLHttpRequest
  var xhr = new XMLHttpRequest();
  
  }else{
  不支持XMLHttpRequest,使用 ActiveXObject 创建异步对象
  var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  </script>

今日示例：

FlaskDemo7.py

from flask import Flask, make_response, request, render_template, session, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']="mysql://root:123456@localhost:3306/flask"
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN']=True
app.config['SECRET_KEY'] = 'INPUT A STRING'
db=SQLAlchemy(app)

import pymysql
pymysql.install_as_MySQLdb()

class Users(db.Model):
    __tablename__ = "users"
    id = db.Column(db.Integer,primary_key=True)
    uname = db.Column(db.String(50),nullable=False)
    upwd = db.Column(db.String(50),nullable=False)
    realname = db.Column(db.String(30),nullable=False)

    def __repr__(self):
        return "<Users %r>" % self.uname

# db.drop_all()
db.create_all()

@app.route('/set_cookie')
def set_cookie():
    # 将响应内容构建成响应对象
    resp = make_response("Set Cookie Success")
    # 保存数据进cookie
    resp.set_cookie('username','sf.zh')
    # 保存数据进cookie并设置max_age
    resp.set_cookie('keywords','Cannon',max_age=60*60*24*365)
    return resp


@app.route('/get_cookie')
def get_cookie():
    # username = request.cookies['username']
    keywords = request.cookies['keywords']
    print('keywords:%s' % (keywords))
    return "get cookie ok"

@app.route('/login',methods=['GET','POST'])
def login():
    if request.method == 'GET':
        # 判断之前是否有成功登录过(id和uname是否存在于cookie上)
        if 'id' in request.cookies and 'uname' in request.cookies:
            return '您已成功登录'
        else:
            # 去往 login.html 模板上
            return render_template('login.html')
    else:
        # 1.接收用户名和密码
        uname = request.form['uname']
        upwd = request.form['upwd']
        # 2.验证用户名和密码是否正确(数据库查询)
        user = Users.query.filter_by(uname=uname,upwd=upwd).first()
        # 3.如果正确的话,判断是否记住密码
        if user:
            resp = make_response('登录成功')
            print(type(user.id))
            # 登录成功
            if 'isSaved' in request.form:
                # 将　id 和　uname 保存进cookie
                m_age = 60*60*24*365
                resp.set_cookie('id',str(user.id),max_age=m_age)
                resp.set_cookie('uname',uname,max_age=m_age)
            return resp
        else:
            # 4.如果不正确的话,则给出提示
            return "登录失败"
        pass

@app.route('/setSession')
def setSession():
    session['username'] = 'sanfeng.zhang'
    return "Set session Success"

@app.route('/getSession')
def getSession():
    username = session['username']
    return 'session值为:'+username

@app.route('/delSession')
def delSession():
    del session['username']
    return "Delete Session Success"

@app.route('/sign_in',methods=['GET','POST'])
def sign_in():
    if request.method == 'GET':
        return render_template('sign_in.html')
    else:
        uname = request.form['uname']
        upwd = request.form['upwd']
        user = Users.query.filter_by(uname=uname,upwd=upwd).first()
        if user:
            # 登录成功，将信息保存进　session
            session['id'] = user.id
            session['uname'] = user.uname
            return redirect('/index')
        else:
            #　登录失败，回到sign_in.html
            return render_template('sign_in.html')

@app.route('/index')
def index():
    # 判断用户是否登录成功
    if 'id' in session and 'uname' in session:
        uname = session['uname']
    return render_template('index.html',params=locals())

@app.route('/sign_out')
def sign_out():
    if 'id' in session and 'uname' in session:
        del session['id']
        del session['uname']
    return redirect('/index')

@app.route('/create_xhr')
def create_xhr():
    return render_template('xhr.html')



if __name__ == '__main__':
    app.run(debug=True)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/login" method="post">
        <p>
            用户名称: <input type="text" name="uname">
        </p>
        <p>
            用户密码: <input type="password" name="upwd">
        </p>
        <p>
            记住密码: <input type="checkbox" name="isSaved">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

sign_in.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/sign_in" method="post">
        <p>
            用户名称: <input type="text" name="uname">
        </p>
        <p>
            用户密码: <input type="password" name="upwd">
        </p>
        <p>
            记住密码: <input type="checkbox" name="isSaved">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% if params.uname %}
        <h3>
            欢迎：{{ params.uname }}
            <a href="/sign_out">退出</a>
        </h3>
    {% else %}
        <h3>
            <a href="/sign_in">登录</a>
        </h3>
    {% endif %}

</body>
</html>

xhr.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="createXhr()">创建XHR</button>
    <script>
        function createXhr(){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHttp")
            }
            console.log(xhr);
        }
    </script>
</body>
</html>