Django框架基础知识汇总(有项目版)

Web框架本质


web系统概念

1. Http,无状态,短连接
2. 浏览器(socket客户端)、网站(socket服务端)

web框架本质

import socket  
def handle_request(client):
    buf = client.recv(1024)
    client.send("HTTP/1.1 200 OK\r\n\r\n")
    client.send("Hello, Seven")  
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)  
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()  
if __name__ == '__main__':
    main()

自定义Web框架

a. socket服务端
b. 根据URL不同返回不同的内容
路由系统:
URL -> 函数
c. 字符串返回给用户
模板引擎渲染:
HTML充当模板(特殊字符)
自己创造任意数据
字符串
  • 静态网站处理方式:
import socket

def f1(request):
    """
    处理用户请求,并返回相应的内容
    :param request: 用户请求的所有信息
    :return:
    """
    f = open('index.fsw','rb')
    data = f.read()
    f.close()
    return data

def f2(request):
    f = open('aricle.tpl','rb')
    data = f.read()
    f.close()
    return data

routers = [
    ('/xxx', f1),
    ('/ooo', f2),
]


def run():
    sock = socket.socket()
    sock.bind(('127.0.0.1',8080))
    sock.listen(5)

    while True:
        conn,addr = sock.accept() # hang住
        # 有人来连接了
        # 获取用户发送的数据
        data = conn.recv(8096)
        data = str(data,encoding='utf-8')
        headers,bodys = data.split('\r\n\r\n')
        temp_list = headers.split('\r\n')
        method,url,protocal = temp_list[0].split(' ')
        conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

        func_name = None
        for item in routers:
            if item[0] == url:
                func_name = item[1]
                break

        if func_name:
            response = func_name(data)
        else:
            response = b"404"

        conn.send(response)
        conn.close()

if __name__ == '__main__':
    run()
  • 动态网站处理方式一(手动进行替换的模版引擎):
import socket
def f3(request):
    import pymysql
    # 创建连接,获得数据
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123',db='db666')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute('select id,username,password from userinfo')
    user_list = cursor.fetchall()
    cursor.close()
    conn.close()

    # 组装数据模型
    content_list=[]
    for row in user_list:
        tp = '<tr><td>%s</td><td>%s</td><td>%s</td></tr>'%(row['id'],row['username'],row['password'])
        content_list.append(tp)
    content = "".join(content_list) # 将列表中的数据拼接成字符串

    # 模板渲染(模板+数据)
    f = open('userlist.html','r',encoding='utf-8')
    template = f.read()
    f.close()
    data = template.replace('@@sdfsdffd@@', content)
    return bytes(data, encoding='utf-8')

# 路由系统
routers = [
    ('/userlist.htm', f3),    
]

def run():
    sock = socket.socket()
    sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    sock.bind(('127.0.0.1',8080))
    sock.listen(5)

    while True:
        conn,addr = sock.accept() # hang住
        # 有人来连接了
        # 获取用户发送的数据
        data = conn.recv(8096)
        data = str(data,encoding='utf-8')
        headers,bodys = data.split('\r\n\r\n')
        temp_list = headers.split('\r\n')
        method,url,protocal = temp_list[0].split(' ')
        conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

        func_name = None
        for item in routers:
            if item[0] == url:
                func_name = item[1]
                break

        if func_name:
            response = func_name(data)
        else:
            response = b"404"

        conn.send(response)
        conn.close()

if __name__ == '__main__':
    run()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
            </tr>
        </thead>

        <tbody>
            @@sdfsdffd@@
        </tbody>
    </table>
</body>
</html>

动态网站二(使用jinjia2模板引擎进行替换)

import socket
def f4(request):
    import pymysql
    # 创建连接
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123', db='db666')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select id,username,password from userinfo")
    user_list = cursor.fetchall()
    cursor.close()
    conn.close()

    f = open('hostlist.html','r',encoding='utf-8')
    data = f.read()
    f.close()

    # 基于第三方工具实现的模板渲染
    from jinja2 import Template
    template = Template(data)
    data = template.render(xxxxx=user_list, user='dsafsdfsdf')
    return data.encode('utf-8')

# 路由系统
routers = [
      ('/host.html', f4),
]

def run():
    sock = socket.socket()
    sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    sock.bind(('127.0.0.1',8080))
    sock.listen(5)

    while True:
        conn,addr = sock.accept() # hang住
        # 有人来连接了
        # 获取用户发送的数据
        data = conn.recv(8096)
        data = str(data,encoding='utf-8')
        headers,bodys = data.split('\r\n\r\n')
        temp_list = headers.split('\r\n')
        method,url,protocal = temp_list[0].split(' ')
        conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

        func_name = None
        for item in routers:
            if item[0] == url:
                func_name = item[1]
                break

        if func_name:
            response = func_name(data)
        else:
            response = b"404"

        conn.send(response)
        conn.close()

if __name__ == '__main__':
    run()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            {% for row in xxxxx %}
                <tr>
                    <td>{{row.id}}</td>
                    <td>{{row.username}}</td>
                    <td>{{row.password}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {{user}}
</body>
</html>

Django框架基础内容


框架种类

- a,b,c --> Tornado
- [第三方a],b,c          --> wsgiref -> Django 
- [第三方a],b,[第三方c]  --> flask,

Django项目前期配置

pip3 install django
# 创建Django程序
django-admin startproject mysite
# 进入程序目录
cd mysite
# 启动socket服务端,等待用户发送请求
python manage.py runserver 127.0.0.1:8080
 Django配置文件:settings.py 
……
DIRS': [os.path.join(BASE_DIR, 'template')],
……
Mysql数据库:
DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME':'dbname',
    'USER': 'root',
    'PASSWORD': 'xxx',
    'HOST': '',
    'PORT': '',
    }
}

#备注:
# 由于Django内部连接MySQL时使用的是MySQLdb模块,而python3中还无此模块,所以需要使用pymysql来代替  
# 如下设置放置的与project同名的配置的 __init__.py文件中  
import pymysql
pymysql.install_as_MySQLdb() 
静态文件路径:
static目录
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
额外配置(跨站请求伪装crsf):
MIDDLEWARE = [
……
#'django.middleware.csrf.CsrfViewMiddleware',
……
]

项目案例

  • 网站请求
# urls.py

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
     url(r'^index/',index),
]
def index(request):
    # return HttpResponse('Index')
    return render(request, 'index.html',{
        'name': 'tom',
        'users':['李志','李杰'],
        'user_dict':{'k1':'v1', 'k2':'v2'},
        'user_list_dict':[
            {'id':1,'name':'tom','email':'[email protected]'},
            {'id':1,'name':'tom','email':'[email protected]'},
            {'id':1,'name':'tom','email':'[email protected]'},
            {'id':1,'name':'tom','email':'[email protected]'},
        ]
    })
# template/index

<p>{{ name }}</p>
<p>{{ users.0 }}</p>
<p>{{ users.1 }}</p>
<p>{{ user_dict.k1 }}</p>
<p>{{ user_dict.k2 }}</p>
<h3>循环</h3>
<ul>
    {% for item in users %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>
<h3>循环</h3>
<table border="1">
    {% for row in user_list_dict %}
        <tr>
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.email }}</td>
            <td>
                <a>编辑</a> | <a href="/del/?nid={{ row.id }}">删除</a>
            </td>
        </tr>
    {% endfor %}
</table>
  • 网站登陆
# urls

from django.conf.urls import url
from django.contrib import admin
from django.shortcuts import HttpResponse,render,redirect

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^login/',login),
]
def login(request):
    """
    处理用户请求,并返回内容
    :param request: 用户请求相关的所有信息(对象)
    :return:
    """
    # 字符串
    # return HttpResponse('<input type="text" />')
    # return HttpResponse('login.html')
    # 自动找到模板路径下的login.html文件,读取内容并返回给用户
    # 模板路径的配置

    print(request.GET)  # 结果为字典格式,值为列表类型
    if request.method == "GET":
        return render(request,'login.html')
    else:
        # 用户POST提交的数据(请求体)
        u = request.POST.get('user')
        p = request.POST.get('pwd')
        if u == 'root' and p == '123':
            # 登录成功
            # return redirect('http://www.oldboyedu.com')
            return redirect('/index/')   # 重定向
        else:
            # 登录失败
            return render(request,'login.html',{'msg': '用户名或密码错误'})
# template

<form method="POST" action="/login/">
    <input type="text" name="user" />
    <input type="password" name="pwd" />
    <input type="submit" value="登录" />
    {{ msg }}
</form>

django学员管理系统


数据库设计结构

表结构:班级\学生\老师
(班级表):
id    title
1425期 

(学生表):
id     name      班级ID(FK)
 1     张杰      1

(老师表):
id        name
1       林峰
2       林狗
3       苑天

(老师班级关系表):
id     老师ID    班级ID
1       1          1
2       1          2
3       2          2

班级管理模块

  • 查(母版继承)
# urls

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'classes/', views.classes),
   ]
# view

from django.shortcuts import render,redirect
import pymysql

def classes(request):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123', db='s4db65', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 设置查询结果为字典格式
    cursor.execute("select id, title from class")
    class_list = cursor.fetchall()  # 结果为字典
    cursor.close()
    conn.close()
    print(class_list)
    return render(request, 'classes.html',{'class_list':class_list})
# html

{% extends ‘manage.html’% } # 继承母版
{%block content%} # 母版块中填充内容

<h1>班级列表</h1>
<div>
    <a href="/add_class/">添加</a>
</div>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>班级名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in class_list %}
        <tr>
            <td>{{ row.id }}</td>
            <td>{{ row.title }}</td>
            <td>
                <a href="">编辑</a>
                |
                <a href="">删除</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endbloc %}
# urls

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^add_class/', views.add_class),
]
# view

def add_class(request):
    if request.method == 'GET':
        return render(request,'add_class.html')
    else:
        print(request.POST)
        v = request.POST.get('title')
        conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='123',db='s4db65',charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute('insert into class(title) value(%s)', [v,])
        conn.commit()   # 提交事务
        cursor.close()
        conn.close()
        return redirect('/classes/')
# html

<h1>添加班级</h1>
<form method="post" action="/add_class/">
    <p>班级名称:<input type="text" name="title" /></p>
    <input type="submit" value="提交">
</form>
# urls

urlpatterns = [
      url(r'^del_class/', views.del_class),
  ]
# view

def del_class(request):
   nid = request.GET.get('nid')
   conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123', db='s4db65', charset='utf8')
   cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
   cursor.execute('delete from class where id=%s',[nid,])
   conn.commit()
   cursor.close()
   conn.close()
   return redirect('/classes/')
# urls

urlpatterns = [
    url(r'^edit_class/', views.edit_class),
]
# view

def edit_class(request):
    if request.method == 'GET': # 获取数据
        nid = request.GET.get('nid')
        conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd = '123', db='s4db65',charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute('select id, title from class where id=%s', [nid,])
        result = cursor.fetchone()
        cursor.close()
        conn.close()
        print(result)
        return render(request,'edit_class.html',{'result':result})
    else:
        nid = request.GET.get('nid')
        title = request.POST.get('title')
        print(nid, title)
        conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='123',db='s4db65', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute('update class set title=%s where id=%s',[title,nid,])
        conn.commit()
        cursor.close()
        conn.close()
        return redirect('/classes/')
  • 模态对话框实现增加班级功能
# html

<a onclick="showModal()">对话框添加</a>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="model hide">
    <p>
        <input type="text" id="title">
    </p>
    <input type="button" value="提交" onclick="AjaxSend()"/><span id=""></span>
    <input type="button" value="取消" onclick="cancleModal()">
</div>
# css

.hide {
    display: none;
}
.shadow {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 999;
}
.model {
    z-index: 1000;
    position: fixed;
    height: 300px;
    width: 400px;
    background: white;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -150px;
}
# js

function showModal() {
    document.getElementById('shadow').classList.remove('hide')
    document.getElementById('modal').classList.remove('hide')
}
function cancleModal() {
    document.getElementById('shadow').classList.add('hide');
    document.getElementById('modal').classList.add('hide');
}
function AjaxSend() {
    $.ajax({
        url: '/modal_add_class/',
        type: 'POST',
        data: {'title': $('#title').val()},
        success: function (data) {
            console.log(data);
            if (data == 'ok') {
                location.href = '/classes';
            } else {
                $('errormsg').text(data);
            }
        }
    })
}
# urls

urlpatterns = [url(r'^modal_add_class/', views.modal_add_class]
# views

sqlheper工具类(将增删改查进行封装):
def modify(sql,args):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123', db='s4db65', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    conn.commit()
    cursor.close()
    conn.close()


----------


def modal_add_class(request):
    title = request.POST.get('title')
    if len(title) > 0:
        sqlheper.modify('insert into class (title) value(%s)',[title,])
        return HttpResponse('ok')
    else:
        return HttpResponse('班级标题不能为空')

学生管理模块

# urls

url(r'^students/',views.students),
# views

def students(request):
    conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='123',db='s4db65',charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute('select student.id,student.name,class.title from student left JOIN class on student.class_id = class.id')
    student_list = cursor.fetchall()
    cursor.close()
    conn.close()
    print('结果:',student_list)
    return render(request,'students.html',{'student_list':student_list})
# html

<h1>学生列表</h1>
<div><a href="/add_student/">添加</a></div>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>学生姓名</th>
        <th>所属班级</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in student_list %}
        <tr>
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.title }}</td>
            <td>
                <a href=" ">编辑</a>
                <a>删除</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
# urls

url(r'^add_student/',views.add_student)
# views

def add_student(request):
    if request.method == 'GET':  #只负责跳转页面
        conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='123',db='s4db65',charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute('select id,title from class')
        class_list = cursor.fetchall()
        cursor.close()
        conn.close()
        return render(request,'add_student.html',{'class_list':class_list})
    else:
        name = request.POST.get('name')  #负责提交数据的跳转页面
        class_id = request.POST.get('class_id')
        conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='123',db='s4db65',charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute('insert into student(name,class_id)values(%s,%s)',[name,class_id,])
        conn.commit()
        cursor.close()
        conn.close()
        return redirect('/students/')
# html

<h1>添加学生</h1>
<form method="post" action="/add_student/">
    <p>学生姓名<input type="text" name="name"> </p>
    <p>
        所属班级
        <select name='class_id'>
            {% for row in class_list %}
            <option value="{{ row.id }}">{{ row.title }}</option>
            {% endfor %}
        </select>
    </p>
<input type="submit" value="提交" />
</form>
# urls

url(r'^edit_student/',views.edit_student),
# views

from utils import sqlheper
def edit_student(request):
    if request.method == "GET":
        nid = request.GET.get('nid')
        class_list = sqlheper.get_list("select id,title from class",[])
        current_student_info = sqlheper.get_one('select id,name,class_id from student where id=%s',[nid,])
        print('结果:',class_list,current_student_info,nid)
        return render(request,'edit_student.html',{'class_list': class_list,'current_student_info':current_student_info})
    else:
        nid = request.GET.get('nid')
        name = request.POST.get('name')
        class_id = request.POST.get('class_id')
        sqlheper.modify('update student set name=%s,class_id=%s where id=%s',[name,class_id,nid,])
        return redirect('/students/')
# html

<h1>编辑学生</h1>
<form method="post" action="/edit_student/?nid={{ current_student_info.id }}">
    <p>学生姓名<input type="text" name="name" value="{{ current_student_info.name }}"></p>
    <p>
        所属班级
        <select name="class_id">
            {% for row in class_list %}
                {% if row.id == current_student_info.class_id %}
                    <option selected="selected" value="{{ row.id }}">{{ row.title }}</option>
                {% else %}
                    <option value="{{ row.id }}">{{ row.title }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </p>
    <input type="submit" value="提交"/>
</form>
  • 模态对话框实现增
# html

<div class="shadow hide" id="shadow"></div>
<div class="add-Modal hide" id="addModal">
    <p> 姓名:<input id="addName" type="text" name="name" placeholder="姓名" /></p>
    <p>班级:
    <select id="addClassId" name="classId">
        {% for row in class_list %}
            <option value="{{ row.id }}">{{ row.title}}</option>
        {% endfor %}
    </select>
    </p>
<p>
   <input id="btnAdd" type="button" value="添加" />
    <input id="btnCancle" type="button" value="取消" />
</p>
<span id="addError" style="color: red"></span>
</div>
# css

.shadow{
    position: fixed;
    top: 0;
    bottom:0;
    left:0;
    right: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 999;
}
.add-Modal{
    position: fixed;
    top:50%;
    left:50%;
    width: 400px;
    height: 300px;
    z-index: 1000;
    background-color: white;
    margin-left: -200px;
    margin-top: -200px;
}
.hide{
    display: none;
}
# js

$(function(){
    $('#addModal_window').click(function(){
        $('#shadow,#addModal').removeClass('hide');
    });
     $('#btnCancle').click(function(){
        $('#shadow,#addModal').addClass('hide');
    });
    $('#btnAdd').click(function () {
         $.ajax({
            url: '/modal_add_student/',
            type: 'POST',
            data:{'name':$('#addName').val(),'class_id':$('#addClassId').val()},
            success:function (arg) {
                arg = JSON.parse(arg);
                if(arg.status){
                    location.reload();
                }else {
                    $('#addError').text(arg.message);
                }
            }
        })
    })
# urls

url(r'^modal_add_student/', views.modal_add_student),
# views

def modal_add_student(request):
    ret = {'status':True,'message':None}
    try:
        name = request.POST.get('name')
        print('result',name)
        class_id = request.POST.get('class_id')
        sqlheper.modify('insert into student (name,class_id)values(%s,%s)',[name,class_id,])
    except Exception as e:
        ret['status']=False
        ret['message']=str[e]
    return HttpResponse(json.dumps(ret))
  • 模态对话框实现改
# html

……
<a class="btn-edit">对话框编辑</a>
……
<div id="editModal" class="add-Modal hide">
     <h3>编辑学生信息</h3>
    <p>
        姓名:<input type="text" name="name" id="editName" placeholder="姓名">
         <input type="text" id="editId" style="display: none" />
    </p>
    <p> 班级:
    <select id="editClassId" name="classId">
        {% for row in class_list %}
            <option value="{{ row.id }}">{{ row.title }}</option>
        {% endfor %}
    </select>
    </p>
<p>
     <input id="btnEdit" type="button" value="更新" />
     <input id="btnEditCancle" type="button" value="取消" />
</p>
    <span id="editError" style="color: red;"></span>
</div>
# css


.shadow{
    position: fixed;
    top: 0;
    bottom:0;
    left:0;
    right: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 999;
}
.add-Modal{
    position: fixed;
    top:50%;
    left:50%;
    width: 400px;
    height: 300px;
    z-index: 1000;
    background-color: white;
    margin-left: -200px;
    margin-top: -200px;
}
.hide{
    display: none;
}
# js

$('.btn-edit').click(function () { #显示数据
        $('#shadow,#editModal').removeClass('hide');
        var tds = $(this).parent().prevAll();
        var studentId = $(tds[2]).text();
        var studentName = $(tds[1]).text();
        var classId = $(tds[0]).attr('clsid');
        console.log(studentId,studentName,classId)
        $('#editId').val(studentId);
        $('#editName').val(studentName);
        $('#editClassId').val(classId);
    });
    $('#btnEditCancle').click(function () {
        $('#shadow,#editModal').addClass('hide');
    })

    $('#btnEdit').click(function(){  #提交数据
        $.ajax({
            url:'/modal_edit_student/',
            type: 'POST',
            data: {'nid': $('#editId').val(), 'name':$('#editName').val(),'class_id': $('#editClassId').val()},
            dataType: 'JSON', //JSON.parse(arg)
            success:function(arg){
                if(arg.status){
                    location.reload();
                }else{
                    $('#editError').text(arg.message);
                }
            }
        })
    })
})
# urls

url(r'^modal_edit_student/', views.modal_edit_student),
# views

def modal_edit_student(request):
    ret = {'status': True,'message': None}
    try:
        nid = request.POST.get('nid')
        name = request.POST.get('name')
        class_id = request.POST.get('class_id')
        sqlheper.modify('update student set name=%s,class_id=%s where id=%s',[name,class_id,nid,])
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))

老师管理模块

# urls

url(r'^teachers/', views.teachers),
# views

# 多对多,以老师表展示
def teachers(request):
    teacher_list = sqlheper.get_list('select id,name from teacher',[])
    teacher_list = sqlheper.get_list("""
      select teacher.id as tid,teacher.name,class.title from teacher
        LEFT JOIN teacher2class on teacher.id = teacher2class.teacher_id
        left JOIN class on class.id = teacher2class.class_id;
    """,[])
    print(teacher_list)
    result = {}
    for row in teacher_list:
        tid =row['tid']
        if tid in result:
            result[tid]['titles'].append(row['title'])
        else:
            result[tid] = {'tid': row['tid'],'name':row['name'],'titles': [row['title'],]}
    return render(request,'teacher.html',{'teacher_list':result.values()})
# html

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>老师姓名</th>
            <th>任教班级</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for row in teacher_list %}
            <tr>
                <td>{{ row.tid }}</td>
                <td>{{ row.name }}</td>
                <td>
                    {% for item in row.titles %}
                        <span>{{ item }}</span>
                    {% endfor %}
                </td>
                <td>
                    <a href="/edit_teacher/?nid={{ row.tid }}">编辑</a>
                    <a>删除</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
# ursl

url(r'^add_teacher/', views.add_teacher),
# views

def add_teacher(request):
    if request.method == "GET":
        class_list = sqlheper.get_list('select id,title from class',[])
        return render(request,'add_teacher.html',{'class_list': class_list})
    else:
        name = request.POST.get('name')
        # 老师表中添加一条数据
        teacher_id = sqlheper.create('insert into teacher(name) values(%s)',[name,])
        # 老师和班级关系表中插入数据        
        class_ids = request.POST.getlist('class_ids')   

        # 一次连接,一次提交
        data_list = []
        for cls_id in class_ids:
            temp = (teacher_id,cls_id,)
            data_list.append(temp)
        obj = sqlheper.SqlHelper()   # 通过自定义的mysql组件获得mysql连接对象
        obj.multiple_modify('insert into teacher2class(teacher_id,class_id) values(%s,%s)',data_list)
        obj.close()
        return redirect('/teachers/')
# html

<h1>添加老师</h1>
<form method="POST" action="/add_teacher/">
    <p><input type="text" name="name" placeholder="老师姓名" /></p>
    <p>
        <select multiple size="10" name="class_ids">
            {% for item in class_list %}
                <option value="{{ item.id }}">{{ item.title }}</option>
            {% endfor %}
        </select>
    </p>
    <input type="submit" value="提交" />
</form>
# html

<h1>编辑老师</h1>
<form method="POST" action="/edit_teacher/?nid={{ teacher_info.id }}">
    <p><input type="text" name="name" value="{{ teacher_info.name }}" /></p>
    <p>
        <select name="class_ids" multiple size="10">
            {% for item in class_list %}
                {% if item.id in class_id_list %}
                    <option value="{{ item.id }}" selected>{{ item.title }}</option>
                {% else %}
                    <option value="{{ item.id }}">{{ item.title }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </p>
    <input type="submit" value="提交" />
</form>
# urls

url(r'^edit_teacher/',views.edit_teacher),
# views

def edit_teacher(request):
    if request.method == "GET":
        nid = request.GET.get('nid')
        obj = sqlheper.SqlHelper()
        teacher_info = obj.get_one('select id,name from teacher where id =%s',[nid,])
        class_id_list = obj.get_list('select class_id from teacher2class where teacher_id=%s',[nid,])
        class_list = obj.get_list('select id,title from class',[])
        obj.close()
        print('当前老师信息',teacher_info)
        print('当前老师任教的班级id',class_id_list)
        temp = []
        for i in class_id_list:
            temp.append(i['class_id'])
        print('所有班级',class_list)
        # return HttpResponse('...')
        return render(request,'edit_teacher.html',{
            'teacher_info': teacher_info,
            'class_id_list': temp,
            'class_list': class_list,
        })
    else:
        nid = request.GET.get('nid')
        name = request.POST.get('name')
        class_ids = request.POST.getlist('class_ids')
        obj = sqlheper.SqlHelper()
        # 更新老师表
        obj.modify('update teacher set name=%s where id=%s',[name,nid])
        # 更新老师和班级关系表
        # 先把当前老师和班级的对应关系删除,然后再添加
        obj.modify('delete from teacher2class where teacher_id=%s',[nid,])
        data_list = []
        for cls_id in class_ids:
            temp = (nid,cls_id,)
            data_list.append(temp)
        obj = sqlheper.SqlHelper()
        obj.multiple_modify('insert into teacher2class(teacher_id,class_id) values(%s,%s)',data_list)
        obj.close()
        return redirect('/teachers/')
  • 模态对话框增
# html

<div id="shadow" class="shadow hide"></div>
<div id="addModal" class="addModal hide">
    <p>老师姓名:<input type="text" name="name" id="addName"></p>
    <p>
        <select id="classIds" multiple="multiple" size="10">
        </select>
    </p>
    <input type="button" id="addSubmit" value="提交">
    <input type="button" id="cancle" value="取消">
</div>
# css

.shadow{
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 999;
}
.addModal{
    position: fixed;
    width: 400px;
    height: 300px;
    top:50%;
    left:50%;
    margin-left: -200px;
    margin-top: -200px;
    background-color: white;
    z-index: 1000;
}
.hide{
    display: none;
}
# js

    $(function () {
       bindAdd();
      bindAddSubmit();
    });
function bindAdd() {
    $('#btnAdd').click(function () {
        $('#shadow,#addModal').removeClass('hide');
        $.ajax({
            url:'/get_all_class/',
            type:'GET',
            dataType:'JSON',
            success:function (arg) {
                $.each(arg,function(i,row){
                    var tag = document.createElement('option');
                    tag.innerHTML = row.title;
                    tag.setAttribute('value',row.id);
                    $('#classIds').append(tag);
                });
            }
        })
    });
    $('#cancle').click(function () {
         $('#shadow,#addModal').addClass('hide');
    })
}

function bindAddSubmit(){
    $('#addSubmit').click(function(){
        var name = $('#addName').val();
        var class_id_list = $('#classIds').val();
        console.log(name,class_id_list);
        $.ajax({
            url:'/modal_add_teacher/',
            type: 'POST',
            data: {'name':name, 'class_id_list': class_id_list},
            dataType:'JSON',
            traditional: true,// 如果提交的数据的值有列表,则需要添加此属性
            success: function (arg) {
                if(arg.status){
                    location.reload();
                }else{
                    alert(arg.message);
                }
            }
        })
    });
}
# urls

url(r'^get_all_class/', views.get_all_class),
url(r'^modal_add_teacher/', views.modal_add_teacher),
# views

def get_all_class(request):
    obj = sqlheper.SqlHelper()
    class_list = obj.get_list('select id,title from class',[])
    return HttpResponse(json.dumps(class_list))

def modal_add_teacher(request):
    ret = {'status': True,'message': None}
    try:
        name = request.POST.get('name')
        class_id_list = request.POST.getlist('class_id_list')
        teacher_id = sqlheper.create('insert into teacher(name) values(%s)',[name,])
        data_list = []
        for cls_id in class_id_list:
            temp = (teacher_id,cls_id,)
            data_list.append(temp)
        obj = sqlheper.SqlHelper()
        obj.multiple_modify('insert into teacher2class(teacher_id,class_id) values(%s,%s)',data_list)
        obj.close()
    except Exception as e:
        ret['status'] = False
        ret['message'] = "处理失败"
    return HttpResponse(json.dumps(ret))
# sqlheper

def create(sql,args):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='s4db65', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    conn.commit()
    last_row_id = cursor.lastrowid
    cursor.close()
    conn.close()
    return last_row_id

class SqlHelper(object):
    def __init__(self):
        self.connect() # 读取配置文件
    def connect(self):
        self.conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='s4db65', charset='utf8')
        self.cursor = self.conn.cursor(cursor=pymysql.cursors.DictCursor)
    def multiple_modify(self,sql,args):
        self.cursor.executemany(sql,args)
        self.conn.commit()
    def close(self):
        self.cursor.close()
        self.conn.close()

BOOTSTRAP框架

  • bootstrap
下载
导入项目
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
根据网站内容,添加对应class标签

fontawesome:同上

后台管理布局(HTML母版)

# manage.html


<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="/static/css/commons.css" />
    {% block css %}{% endblock %}
</head>
<body>
    <div class="pg-header">
        <div class="logo left">老男孩后台管理</div>
        <div class="avatar right" style="position: relative">
            <img style="width: 40px;height: 40px;" src="/static/images/1.jpg">
            <div class="user-info">
                <a>个人资料</a>
                <a>注销</a>
            </div>
        </div>
        <div class="rmenus right">
            <a><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息</a>
            <a><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="menus">
            <a> <i class="fa fa-futbol-o" aria-hidden="true"></i> 班级管理</a>
            <a>学生管</a>
            <a>老师管理</a>
        </div>
        <div class="content">
            <ol class="breadcrumb">
              <li><a href="#">首页</a></li>
              <li><a href="#">班级管理</a></li>
              <li class="active">添加班级</li>
            </ol>
            {% block xx  %}{% endblock %}

        </div>
    </div>
    {% block js %}{% endblock %}
# css


body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        .pg-header{
            height: 48px;
            min-width: 1190px;
            background-color: #204d74;
            line-height: 48px;
        }
        .pg-header .logo{
            color: white;
            font-size: 18px;
            width: 200px;
            text-align: center;
            border-right: 1px solid #8a6d3b;
        }
        .pg-header .rmenus a{
            display: inline-block;
            padding: 0 15px;
            color: white;
        }
        .pg-header .rmenus a:hover{
            background-color: #269abc;
        }
        .pg-header .avatar{
            padding: 0 20px;
        }
        .pg-header .avatar img{
            border-radius: 50%;
        }
        .pg-header .avatar .user-info{
            display: none;
            background-color: white;
            border: 1px solid #dddddd;
            position: absolute;width: 100px;top: 48px;right: 20px;color: white;z-index: 100;
             text-align: center;
        }
        .pg-header .avatar:hover .user-info{
            display: block;
        }
        .pg-header .avatar .user-info a{
            display: block;
        }
        .menus{
            width: 200px;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 48px;
            border-right: 1px solid #dddddd;
            background-color: #dddddd;
        }
        .content{
            position: absolute;
            left: 200px;
            right: 0;
            top: 48px;
            bottom: 0;
            min-width: 990px;
            overflow: scroll;
            z-index: 99;
        }
        .pg-body .menus a{
            display: block;
            padding: 10px 5px;
            border-bottom: 1px solid #ffffff;
        }

用户登陆(包含cookies内容)

# html


<form method="post" action="/login/">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
# urls

url(r'^login/', views.login),
# views


def login(request):
    if request.method == "GET":
        return render(request,'login.html')
    else:
        user = request.POST.get('username')
        pwd = request.POST.get('password')
        if user == 'tom' and pwd == '123':
            obj = redirect('/classes/')
            obj.set_signed_cookie('ticket',"567",salt='jjjjjj',max_age=900,path='/') # 设置cookies,浏览器的cookies中会直接以明文显示567
            return obj
        else:
            return render(request,'login.html')

def classes(request):
    # 去请求的cookie中找凭证
    # tk = request.COOKIES.get('ticket')
    tk = request.get_signed_cookie('ticket',salt='jjjjjj')
    print(tk)
    if not tk:
        return redirect('/login/')
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='s4db65', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select id,title from class")
    class_list = cursor.fetchall()
    cursor.close()
    conn.close()
    return render(request, 'classes.html', {'class_list': class_list})
# 内容延伸


装饰器装饰views中的函数

 @xzxx
def index(request):
    obj = HttpResponse('...')
    obj.set_cookie(.....)
    request.COOKIES.get(...)
    obj.set_signed_cookie(.....)
    request.get_signed_cookie(....)

动态路由


urls

# 动态路由
# url(r'^edit/(\w+)/(\w+)/', views.edit),
# url(r'^edit/(?P<a1>\w+)/(?P<a2>\w+)/', views.edit),
# url(r'^edit/(\w+).html$', views.edit) #正则表达式实现静态伪装

views

def edit(request,*args,**kwargs):#获得请求数据
    print(args,kwargs)
    return HttpResponse('...')

路由分发


#路由分发实现不同模块分开编辑,团队协作开发
url(r'^app01/', include('app01.urls')), #不同的程序模块
url(r'^app02/', include('app02.urls')),
# url(r'^', default),  # 设置默认页面,接收任意请求
# url(r'^', views.index), #

反向生成URL(Django独有)


通过别名反射成URL,简化URL的填写, 用于权限管理

#urls

url(r'^edit/(\w+)/(\w+)/', views.edit,name='n2'),
# html

<ul>
    {% for i in user_list %}
        <li>{{ i }} | <a href="/edit/{{ i }}/">编辑</a></li>
        <li>{{ i }} | <a href="{% url "n2" i 1 %}">编辑</a></li>   # i和1作为url中的参数
    {% endfor %}
</ul>

ORM基本操作(数据表+数据行操作)


操作前的配置步骤

 __init__.py文件
(ORM默认使用SQLlite连接数据库,需改成Mysql)

添加:
import pymysql
pymysql.install_as_MySQLdb()
 在mysql中手动创建数据库
# 配置setting文件中重写数数据库配置


TEMPLATES = [
    ……
        'DIRS': [os.path.join(BASE_DIR,'templates')],
 ……
]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME':'s4day70db',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost',
'PORT': 3306,
}
}

操作表

  • 创建表
# models


from django.db import models
class UserInfo(models.Model):   # 在数据库中的表名为模块名_UserInfo
    nid = models.BigAutoField(primary_key=True) #可不写,默认会生成表中的id字段
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=64)
# settings配置文件中安装app01模块

INSTALLED_APPS = [
    ……
    'app01',
]
# 执行语句

python manage.py makemigrations  #生成数据表配置文件,包含生成及修改等信息
python manage.py migrate  #执行生成的配置文件
  • 修改表:
# models

class UserInfo(models.Model):
……
age = models.IntegerField(default=1) # 新增字段时需设置默认值/允许为空
# age = models.IntegerField(null=True)
# 执行语句:

python manage.py makemigrations  #生成数据表配置文件,包含生成及修改等信息
python manage.py migrate  #执行生成的配置文件
  • 删除表:
# 参考修改表
  • 创建外键关联:
# models

class UserGroup(models.Model): #等同于主表,需将该类写在子表前面
    title = models.CharField(max_length=32)

class UserInfo(models.Model):   # 外键所在的表等同于子表
   ……
    ug = models.ForeignKey('UserGroup',null=True,on_delete='') # 外键关联字段关联UserGroup表中的Id字段,ug在UserInfo数据表中的字段为ug_id
  • 操作单表数据行:
# 增

from app01 import models
models.UserGroup.objects.create(title='销售部')
# 删

models.UserGroup.objects.filter(id=2).delete()
# 改

 models.UserGroup.objects.filter(id=2).update(title='公关部')
# 查

group_list = models.UserGroup.objects.all()
group_list = models.UserGroup.objects.filter(id=1)
group_list = models.UserGroup.objects.filter(id__gt=1) #大于1
group_list = models.UserGroup.objects.filter(id__lt=1) #小于1

Django视图CBV


urls

url(r'^login.html$', views.Login.as_view),

views

from django.views import View
class Login(View):  # 继承View类作为父类
 # #重写父类方法,该方法可作为装饰器功能
    def dispatch(self, request, *args, **kwargs):  # 自定制 dispatch方法,除了可以利用父类中原dispatch方法,还可以自定制处理逻辑
        print('before')
        obj = super(Login,self).dispatch(request, *args, **kwargs) # 传入Login对象作为参数,调用父类中的方法
        print('after')
        return obj

    def get(self,request):  # 请求为get请求时,自动调用该方法
        # return HttpResponse('Login.get')
        return render(request,'login.html')

    def post(self,request):   # 请求是POST请求时,自动调用该方法
        print(request.POST.get('user'))
        return HttpResponse('Login.post')
# html(login.html)

<form method="POST" action="/login.html">  # 以POST方式提交,会自动调用post方法
    <input type="text" name="user" />
    <input type="submit" value="提交" />
</form>

ORM连表操作(一对多)(一对多中,外键存在于从表中)


models

from django.db import models
class UserType(models.Model):
    # 用户类型
    title = models.CharField(max_length=32)
class UserInfo(models.Model):    """
    # 用户表    
    name = models.CharField(max_length=16)
    age = models.IntegerField()
    ut = models.ForeignKey('UserType',on_delete='')   # 关联UserType表中的id字段

urls

url(r'^test.html$', views.test),

views

# 创建数据

# models.UserType.objects.create(title='普通用户')
# models.UserType.objects.create(title='二逼用户')
# models.UserType.objects.create(title='牛逼用户')

# models.UserInfo.objects.create(name='方少伟',age=18,ut_id=1)
# models.UserInfo.objects.create(name='由秦兵',age=18,ut_id=2)
# models.UserInfo.objects.create(name='刘庚',age=18,ut_id=2)
# models.UserInfo.objects.create(name='陈涛',age=18,ut_id=3)
# models.UserInfo.objects.create(name='王者',age=18,ut_id=3)
# models.UserInfo.objects.create(name='杨涵',age=18,ut_id=1)
  • 一对多的正向操作(让存在外键的从表进行跨表,去查询关联主表中的字段):
# 获得Queryset对象格式数据(格式:对象名.外键字段名.关联表字段名)

obj = models.UserInfo.objects.all().first()   # 获取一条数据,无需再obj[0]来获取具体的对象
print(obj.name,obj.age,obj.ut.title) # 获取跨表后的字段用obj.ut.title方式,ut是外键关联中的字段
获得查询结果为字典格式组合成列表类型的Queryset数据,可用list方法转换成列表格式(从表中的外键字段名__主表中的字段名)

v1 = models.UserInfo.objects.values('id','name','ut__title')
# 获得查询结果为元组格式组合成列表类型的Queryset数据,可用List转换成列表(从表中的外键字段名__主表中的字段名)

result = models.UserInfo.objects.all().values_list('id','name'.'ut__title')
  • 一对多的反向操作(让主表进行跨表,去查询(有外键关联字段)从表中相应的字段作为查询条件或查询结果):
# 获得Queryset对象格式的数据,(格式:主表的QuerySet对象名.从表名__set.all())

(一个用户类型下可以有很多用户,获得所有用户类型对应的用户信息数据):
obj = models.UserType.objects.all().first()
for row in obj.userinfo_set.all(): 
    print(row.name,row.age)
# 获得字典格式Queryset对象格式的数据,需要转换成json字符串格式通过ajax返回数据时,可用list方法转换成列表(从表表名小写__主表字段名)

v2 = models.UserType.objects.values('id','title','userinfo__name')
# 获得元组格式Queryset对象格式的数据,需要转换成json字符串格式通过ajax返回数据时,可用list方法转换成列表。(外键字段名__从表字段名)

result = models.UserType.objects.all().values_list('id','name','userinfo__name')
  • 一对多其他参考:
# 跨表
# 正向查询:
1. q = UserInfo.objects.all().first()
q.ug.title

2. 
UserInfo.objects.values('nid','ug_id')              
UserInfo.objects.values('nid','ug_id','ug__title')  

3. UserInfo.objects.values_list('nid','ug_id','ug__title')

# 反向查询:
1. 小写的表名_set
obj = UserGroup.objects.all().first()
  result = obj.userinfo_set.all() [userinfo对象,userinfo对象,]

2. 小写的表名
v = UserGroup.objects.values('id','title')          
v = UserGroup.objects.values('id','title','小写的从表名称')          
v = UserGroup.objects.values('id','title','小写的从表名称__age')      

3. 小写的表名
v = UserGroup.objects.values_list('id','title')          
v = UserGroup.objects.values_list('id','title','小写的表名称')          
v = UserGroup.objects.values_list('id','title','小写的表名称__age')    

ORM连表操作(多对多)

(多对多中,主表与从表的外键都共同存在于第3张关联表中) ##


手动创建第三张关联表(推荐,手动更灵活)

# models

from django.db import models
class Boy(models.Model):
    name = models.CharField(max_length=32)
class Girl(models.Model):
    nick = models.CharField(max_length=32)
class Love(models.Model):
    b = models.ForeignKey('Boy',on_delete='')
    g = models.ForeignKey('Girl',on_delete='')
class Meta: #添加联合唯一字段
    unique_together = [
        ('b','g'),
    ]
# views

# 添加数据
objs = [
    models.Boy(name='方少伟'),
    models.Boy(name='由秦兵'),
    models.Boy(name='陈涛'),
    models.Boy(name='闫龙'),
    models.Boy(name='吴彦祖'),
]
models.Boy.objects.bulk_create(objs,5) # 批量添加数据

objss = [
    models.Girl(nick='小鱼'),
    models.Girl(nick='小周'),
    models.Girl(nick='小猫'),
    models.Girl(nick='小狗'),
]
models.Girl.objects.bulk_create(objss,5)


# 1. 查询和方少伟有关系的姑娘
# 第一种查询方式:跨表反向查询,获得对象
# obj = models.Boy.objects.filter(name='方少伟').first()
# love_list = obj.love_set.all() # 反向查询,获得所有love表中的对象
# for row in love_list:
#     print(row.g.nick)   # 获得对应的姑娘数据

# 第二种查询方式:连表查询(正向查询),直接查询love表,获得对象
# love_list = models.Love.objects.filter(b__name='方少伟') #获得Queryset对象
# for row in love_list:
#     print(row.g.nick)

# (推荐)第三种查询方式:只发送一次sql连接请求,获得字典,属于正向查询
# love_list = models.Love.objects.filter(b__name='方少伟').values('g__nick')
# for item in love_list:   # 获得字典格式的列表,[{'g__nick':'xxx},]                     
#     print(item['g__nick'])

# (推荐)第四种查询方式:相当于inner join方式连表查询,只发送一次sql连接请求,获得对象
# love_list = models.Love.objects.filter(b__name='方少伟').select_related('g')
# for obj in love_list: # 获得对象
#     print(obj.g.nick)

# 总结:多对多都是先获得关联表中的数据,再进行跨表操作
# 对象格式用.(点)进行跨表     字典和元组采用_(双下划线)进行跨表

Django自动生成第三张关联表(无法再手动添加其它字段)

# models

class Boy(models.Model):
    name = models.CharField(max_length=32)
    m = models.ManyToManyField('Girl') #自动生成关联表m,以两张表中的id字段作为关联字段
class Girl(models.Model):
    nick = models.CharField(max_length=32)
# views

# 增
# obj = models.Boy.objects.filter(name='方少伟').first()
# obj.m.add(2)
# obj.m.add(2,4) # 创建关联表的多条数据
# obj.m.add(*[1,3]) # 以列表形式创建多条数据

# 删
# obj.m.remove(1)
# obj.m.remove(2,3) # 删除关联表的多条数据
# obj.m.remove(*[4,])

# obj.m.set([1,])  # 覆盖数据库所有数据,重置
# obj = models.Boy.objects.filter(name='方少伟').first()
# obj.m.clear() # 删除所有与方少伟的关联数据

# 查
# 正向查询出单条数据
# obj = models.Boy.objects.filter(name='方少伟').first()
# # girl_list = obj.m.all() 
# girl_list = obj.m.filter(nick='小鱼') # 相当于从从表跨表到主表查询
# print(girl_list)

# 反向查询出多条数据
# obj = models.Girl.objects.filter(nick='小鱼').first()
# print(obj.id,obj.nick)
# boy_list = obj.boy_set.all()   # 相当于从主表跨表到从表反向查询

手动与自动结合

# models

class Boy(models.Model):
    name = models.CharField(max_length=32)
    m = models.ManyToManyField(to='Girl',through="Love",through_fields=('b','g',))
    # 可不写to关键字

class Girl(models.Model):
    nick = models.CharField(max_length=32)

class Love(models.Model):
    b = models.ForeignKey('Boy',on_delete='')
    g = models.ForeignKey('Girl',on_delete='')

    class Meta:
        unique_together = [
            ('b','g'),
        ]

# views

obj = models.Boy.objects.filter(name='方少伟').first()
obj.m.add(1)
# obj.m.remove(1)
# obj.m.clear() 可以
v = obj.m.all()
print(v)

ORM连表操作(多对多自关联)


原理:等同于复制出一张新表

models

class UserInfo(models.Model):
    nickname = models.CharField(max_length=32)
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=64)
    gender_choices = (
        (1,'男'),
        (2,'女'),
    )
    gender = models.IntegerField(choices=gender_choices)
    m = models.ManyToManyField('UserInfo') # 多对多自关联字段,自动生成第二张表,字段分别为from_userinfo_id和to_userinfo_id; 

    # 表中的m属性不会在userinfo表中生成m字段
def test(request):
# 查男生(通过m字段查询属于正向操作)
xz = models.UserInfo.objects.filter(id=1).first() #id为1代表男生的1条数据
u = xz.m.all()
for row in u:
    print(row.nickname)

# 查女生(通过表名称_set查询属于反向操作)
xz = models.UserInfo.objects.filter(id=4).first() #id为4代表女生的1条数据
v = xz.userinfo_set.all()
for row in v:
    print(row.nickname)
return HttpResponse('...')

外键自关联(常用于评论表功能)

等同于复制出一张新表,用原表中的外键作连表操作

class Comment(models.Model):
    """
    评论表
    """
    news_id = models.IntegerField()            # 新闻ID
    content = models.CharField(max_length=32)  # 评论内容
    user = models.CharField(max_length=32)     # 评论者
    reply = models.ForeignKey('Comment',null=True,blank=True,related_name='xxxx') #related_name表示反向查询时,代替 表名_set 和 表名__字段名 
"""
   新闻ID                         reply_id
1   1        别比比    root         null
2   1        就比比    root         null
3   1        瞎比比    shaowei      null
4   2        写的正好  root         null
5   1        拉倒吧    由清滨         2
6   1        拉倒吧1    xxxxx         2
7   1        拉倒吧2    xxxxx         5
"""
"""
新闻1
    别比比
    就比比
        - 拉倒吧
            - 拉倒吧2
        - 拉倒吧1
    瞎比比
新闻2:
    写的正好
"""

ORM操作补充(models模块中数据表属性定义操作)


models

from django.db import models
from django.core.validators import RegexValidator
class UserAdmin(models.Model):
    username = models.CharField(max_length=32)
    email = models.EmailField(null=True,default='111',
                              db_index=True,unique=True,
                              blank=True,verbose_name='邮箱',
                              editable=True, help_text='字段提示信息的内容',
                              )
    # blank控制admin是否为空,
    file = models.FileField() #文件字段,只针对admin
    ctime = models.DateTimeField() # 日期字段

    # 自定义正则表达式验证规则
    test = models.CharField(
        max_length=32,
        error_messages={
            'c1': '优先错信息1',
        },
        validators=[RegexValidator(regex='root_\d+', message='错误了', code='c1')],
        null=True
    )

    # 数字及小数
    # num = models.FloatField()
    # num = models.IntegerField()
    num = models.DecimalField(max_digits=30,decimal_places=10) # 总长度为30,小数点后面10位

    # 枚举
    color_list = (
        (1,'黑色'),
        (2,'白色'),
        (3,'蓝色')
    )
    color = models.IntegerField(choices=color_list)

    class Meta:
        unique_together=(
            ('email','username')   # 字段联合唯一索引
        )
        index_together=(
            ('email','username') #  联合索引,不做约束限制
        )
# admin模块

from django.contrib import admin
from app01 import models
admin.site.register(models.UserAdmin)

分页查询


内置分页函数

  • urls
url(r'^index.html$', views.index),
  • views
from django.core.paginator import Paginator,Page,PageNotAnInteger,EmptyPage
def index(request):
    user_list = models.UserInfo.objects.all() #获得所有数据库数据
    paginator = Paginator(user_list,10) #设置每页显示的总条数
    current_page = request.GET.get('page')# 获得当前页数
    try:
        posts = paginator.page(current_page) #设置当前页数对应的数据
    except PageNotAnInteger as e: #当前页面数非整数
        posts = paginator.page(1) 
    except EmptyPage as e: #当前页码数为空
        posts = paginator.page(1)
    return render(request,'index.html',{'posts':posts})
  • html
<h1>用户列表</h1>
<ul>
    {% for row in posts.object_list %}
        <li>{{ row.name }}</li>
    {% endfor %}
</ul>

<div>
    {% if posts.has_previous %} #是否有上一页
        <a href="/index.html?page={{ posts.previous_page_number }}">上一页</a>
    {% endif %}

    {% if posts.has_next %} #是否有下一页
        <a href="/index.html?page={{ posts.next_page_number }}">下一页</a>
    {% endif %}
</div>

自定分页

  • urls
url(r'^custom.html$', views.custom),
  • views
from utils.pager import PageInfo
def custom(request):
    all_count = models.UserInfo.objects.all().count() 
    page_info = PageInfo(request.GET.get('page'),all_count,10,'/custom.html',11)
    user_list = models.UserInfo.objects.all()[page_info.start():page_info.end()]
    return render(request,'custom.html',{'user_list':user_list,'page_info':page_info})
  • PageInfo工具类
class PageInfo(object):
    def __init__(self,current_page,all_count,per_page,base_url,show_page=11):
        '''
        :param current_page:
        :param all_count: 数据库总行数
        :param per_page: 每页显示行数
        :param base_url:
        :param show_page:分页码范围,默认为11
        '''
        try:
            self.current_page = int(current_page)
        except Exception as e:
            self.current_page = 1
        self.per_page=per_page
        a,b = divmod(all_count,per_page) #返回一个包含商和余数的元组
        if b: # 数据库总数/页面总数后还有多余的数据,所以还需要加1页来显示剩余的数据
            a = a+1
        self.all_pager= a # 总页数
        self.show_page= show_page
        self.base_url= base_url

    # 页码数对应的展示数据内容
    def start(self):
        return (self.current_page-1) * self.per_page # 起始数据位置
    def end(self):
        return self.current_page * self.per_page

    # 组装分页模块
    def pager(self):
        page_list=[]

        # 计算中间页码数显示起始数和结尾数
        half = int((self.show_page-1)/2) # 中间页码数
        # 如果数据总页数 < 分页码范围11
        if self.all_pager < self.show_page:
            begin =1
            stop=self.all_pager + 1
        # 如果数据总页数 > 分页码范围11
        else:
            # 如果当前页 <=5,永远显示1,11
            if self.current_page <= half:
                begin =1
                stop = self.show_page + 1
            else:
                if self.current_page + half > self.all_pager:
                    begin = self.all_pager - self.show_page + 1
                    stop = self.all_pager + 1
                else:
                    begin = self.current_page - half
                    stop = self.current_page + half + 1

        # 组装‘上一页’选项
        if self.current_page <= 1:
            prev = "<li><a href='#'>上一页</a></li>"
        else:
            prev = "<li><a href='%s?page=%s'>上一页</a></li>"%(self.base_url,self.current_page-1,)
        page_list.append(prev)

        # 组装中间页码数显示
        for i in range(begin, stop):
            if i == self.current_page:
                temp = "<li class='active'><a  href='%s?page=%s'>%s</a></li>" % (self.base_url, i, i,)
            else:
                temp = "<li><a href='%s?page=%s'>%s</a></li>" % (self.base_url, i, i,)
            page_list.append(temp)

        # 组装'下一页'选项
        if self.current_page >= self.all_pager:
            nex = "<li><a href='#'>下一页</a></li>"
        else:
            nex = "<li><a href='%s?page=%s'>下一页</a></li>" %(self.base_url,self.current_page+1,)
        page_list.append(nex)

        return ''.join(page_list)
  • html
<h1>用户列表</h1>
<ul>
    {% for row in user_list %}
        <li>{{ row.name }}</li>
    {% endfor %}
</ul>
<nav aria-label="Page navigation">
  <ul class="pagination">
      {{ page_info.pager|safe }}
  </ul>
</nav>

ORM补充之基本操作(数据行高级操作)


排序

user_list = models.UserInfo.objects.all().order_by('-id','name') 
# —id代表降序,id代表升序

分组

from django.db.models import Count,Sum,Max,Min
v =models.UserInfo.objects.values('ut_id').annotate(xxxx=Count('id'))
# 等价于SELECT `app01_userinfo`.`ut_id`, COUNT(`app01_userinfo`.`id`) AS `xxxx` 
FROM
`app01_userinfo` 
GROUP BY `app01_userinfo`.`ut_id`
ORDER BY NULL
# 带有having 分组条件过滤
v =models.UserInfo.objects.values('ut_id').annotate(xxxx=Count('id')).filter(xxxx__gt=2)
# 等价于SELECT `app01_userinfo`.`ut_id`, COUNT(`app01_userinfo`.`id`) AS `xxxx` 
FROM
`app01_userinfo` GROUP BY `app01_userinfo`.`ut_id`
HAVING COUNT(`app01_userinfo`.`id`) > 2 
ORDER BY NULL
v =models.UserInfo.objects.filter(id__gt=2).values('ut_id').annotate(xxxx=Count('id')).filter(xxxx__gt=2)
# 等价于SELECT `app01_userinfo`.`ut_id`, COUNT(`app01_userinfo`.`id`) AS `xxxx` 
FROM 
`app01_userinfo`
 WHERE
 `app01_userinfo`.`id` > 2 
GROUP BY
 `app01_userinfo`.`ut_id`
 HAVING 
COUNT(`app01_userinfo`.`id`) > 2 ORDER BY NULL
分组格式:model.类名.objects.values(显示的字段名).annotate(作为字段查结结果的别名=Count(字段id/1))
  # annotate依赖于values

条件过滤

models.UserInfo.objects.filter(id__gt=1)  # id>1
……(id__lt=1# id<1
……(id__lte=1) #id<=1
……(id__gte=1) # id>=1
……(id__in=[1,2,3]) #id in [1,2,3]
……(name__startswith='xxxx')  #
……(name__contains='xxxx') #
……exclude(id=1)  # not in (id=1)

F,Q,extra方法

  • F
from django.db.models import F
models.UserInfo.objects.all().update(age=F("age")+1)  # F()用来取对象中某列值
  • Q(构造复杂的查询条件)
# 对象方式(不推荐)

from django.db.models import Q
models.UserInfo.objects.filter(Q(id__gt=1))
models.UserInfo.objects.filter(Q(id=8) | Q(id=2)) # or
models.UserInfo.objects.filter(Q(id=8) & Q(id=2)) # and
  • 方法方式
from django.db.models import Q
q1 = Q()
q1.connector = 'OR'
q1.children.append(('id__gt', 1))
q1.children.append(('id', 10))
# 通过OR将3个条件进行连接组装

q2 = Q()
q2.connector = 'OR'
q2.children.append(('c1', 1))
q2.children.append(('c1', 10))

q3 = Q()
q3.connector = 'AND' #通过AND将2个条件进行连接组装
q3.children.append(('id', 1))
q3.children.append(('id', 2))
q1.add(q3,'OR') #还可将q3嵌入到q1条件组中

# 将q1和q2条件组通过AND汇总到一起,q1和q2内部分别用or组合条件
con = Q()
con.add(q1, 'AND')
con.add(q2, 'AND')
  • 方法方式实际应用(多条件组合查询时)
condition_dict = {  #用户将选择的条件组合成字典格式
    'k1':[1,2,3,4],
    'k2':[1,],
}
con = Q()
for k,v in condition_dict.items():
    q = Q()
    q.connector = 'OR'
    for i in v:
        q.children.append(('id', i))
    con.add(q,'AND')
models.UserInfo.objects.filter(con)

***********************************************************************
q1 = Q()
q1.connector = 'OR'
q1.children.append(('id', 1))
q1.children.append(('id', 10))
q1.children.append(('id', 9))


q2 = Q()
q2.connector = 'OR'
q2.children.append(('c1', 1))
q2.children.append(('c1', 10))
q2.children.append(('c1', 9))

q3 = Q()
q3.connector = 'AND'
q3.children.append(('id', 1))
q3.children.append(('id', 2))

q1.add(q3,'OR')

con = Q()
con.add(q1, 'AND')
con.add(q2, 'AND')
#以上构造结果等介于(id=1 or id = 10 or id=9 or (id=1 and id=2)) and (c1=1 or c1=10 or c1=9)
  • extra(添加额外的自定义sql语句)
models.UserInfo.objects.extra(self, select=None, where=None, params=None, tables=None, order_by=None, select_params=None)
 a. 映射
 select 
 select_params=None
select 此处 from 表
 b. 条件
 where=None
 params=None,
 select * from 表 where 此处
 c. 表
 tables
 select * from 表,此处
 c. 排序
order_by=None
 select * from 表 order by 此处
v = models.UserInfo.objects.all().extra(
    select={
        'n':"select count(1) from app01_usertype where id=%s or id=%s",
        'm':"select count(1) from app01_usertype where id=%s or id=%s",
    },
    select_params=[1,2,3,4])
for obj in v:
    print(obj.name,obj.id,obj.n) 

----------
等价于将查询结果作为字段显示列:
select
# id,
# name,
# (select count(1) from tb) as n
# from xb where ....
models.UserInfo.objects.extra(
select={'newid':'select count(1) from app01_usertype where id>%s'},
select_params=[1,],
where = ['age>%s'],
params=[18,],
order_by=['-age'],
tables=['app01_usertype']
)

----------
等价于原生sql语句如下:
select 
app01_userinfo.id,
(select count(1) from app01_usertype where id>1) as newid
from app01_userinfo,app01_usertype
where 
app01_userinfo.age > 18
order by 
app01_userinfo.age desc
result = models.UserInfo.objects.filter(id__gt=1).extra(
where=['app01_userinfo.id < %s'],
params=[100,],
tables=['app01_usertype'],
order_by=['-app01_userinfo.id'],
select={'uid':1,'sw':"select count(1) from app01_userinfo"} #添加查询字段
)


----------
SELECT (1) AS "uid", (select count(1) from app01_userinfo) AS "sw", "app01_userinfo"."id", "app01_userinfo"."name", "app01_userinfo"."age", "app01_userinfo"."ut_id" 
FROM
 "app01_userinfo" , "app01_usertype" 
WHERE
 ("app01_userinfo"."id" > 1 AND (app01_userinfo.id < 100))
 ORDER BY ("app01_userinfo".id) 
DESC
  • 取特定字段值
v = models.UserInfo.objects.all().only('id','name')
# 获取字段以外的字段会再发出第二次sql请求
  • 取当前字段以外的所有值
 v = models.UserInfo.objects.all().defer('name')
  • 反转
v = models.UserInfo.objects.all().order_by('-id','name').reverse()
# 只有在order_by()方法时才有效果
  • 使用数据库引擎
models.UserInfo.objects.all().using('db2')
  • 聚合
#统计总数
from django.db.models import Count
result = models.UserInfo.objects.aggregate(k=Count('ut_id', distinct=True), n=Count('id'))
# distinct代表去重
print(ruselt.query())
  • 以字典格式添加数据
obj = models.UserType.objects.create(**{'title': 'xxx'})
  • 以关键字参数添加数据
obj = models.UserType.objects.create(title='xxx')
  • 批量增加数据
objs = [
    models.UserInfo(name='r11'),
]
models.UserInfo.objects.bulk_create(objs, 10) # 10为一次提交10次数据,建议不超过999
  • 创建/获取
obj, created = models.UserInfo.objects.get_or_create(  #如果存在数据则获取,否则直接创建
    username='root1',
    pwd='ff',
    defaults={'email': '1111111','u_id': 2, 't_id': 2})
  • 条件范围
models.UserInfo.objects.in_bulk([1,2,3]) #根据主键进行查询
相当于models.UserInfo.objects.filter(id__in=[1,2,3])
  • raw(书写原生sql语句)
name_map = {'title': 'name'} # 将下面的title转换为name
v1 = models.UserInfo.objects.raw('SELECT id,title FROM app01_usertype',translations=name_map)
for i in v1:
    print(i,type(i))
  • select_related:查询主动做连表,一次性获取所有连表中的数据(性能相关:数据量少的情况下使用)
q = models.UserInfo.objects.all().select_related('ut','gp')
#等价于select * from userinfo inner join usertype on ...
for row in q:
    print(row.name,row.ut.title) #采用.的形式获取连表数据
  • prefetch_related:不做连表,但会做多次查询(性能相关:数据量多,查询频繁下使用)
 q = models.UserInfo.objects.all().prefetch_related('ut')
# select * from userinfo;
# Django内部:ut_id = [2,4]
# select * from usertype where id in [2,4]
for row in q:
    print(row.id,row.ut.title)

XSS攻击(跨站脚本攻击)


模拟攻击时:前提需要将对应设置注释
MIDDLEWARE = [
# 'django.middleware.csrf.CsrfViewMiddleware',
]

urls

url(r'^index/', views.index),
url(r'^comment/', views.comment),

views

def comment(request):
    if request.method == "GET":
        return render(request,'comment.html')
    else:
        v = request.POST.get('content')
        msg.append(v)
       return render(request,'comment.html')
def index(request):   
    return render(request,'index.html',{'msg':msg})

html

<h1>评论</h1>
{% for item in msg %}
    <div>{{ item|safe}}</div> #需要给响应的值添加safe
{% endfor %}
# 同时也可在视图函数中添加safe:
def test(request):
    from django.utils.safestring import mark_safe
    temp = "<a href='http://www.baidu.com'>百度</a>"
    newtemp = mark_safe(temp) #将内容处理成safe安全数据
    return render(request,'test.html',{'temp':newtemp})
黑客可通过伪造网站,进行xss攻击,获得用户访问正式网站中的cookies,
从而伪装该用户可到正式网站进行操作,所以cookies很重要,要xss要处于启动状态(默认xss为启用状态)

CSRF(跨站请求伪装攻击)


urls

# 前提需要setting文件中crsf验证开启
url(r'^csrf1.html$', views.csrf1)

views


def csrf1(request):
    if request.method == 'GET':
        return render(request,'csrf1.html')
    else:
        return HttpResponse('ok')

html

<form method="POST" action="/csrf1.html">
    {% csrf_token %}   # 需添加服务器发送的csrf随机字符串,才能访问成功
    <input id="user" type="text" name="user" />
    <input type="submit" value="提交"/>
    <a onclick="submitForm();">Ajax提交</a>
</form>

补充:csrf第二种处理方式:添加装饰器

from django.views import View
from django.utils.decorators import method_decorator

# CBV装饰器,无法将内置的@csrf_protect装饰器直接应用到函数上,而需手动写装饰器进行应用
def wrapper(func):
    def inner(*args,**kwargs):
        return func(*args,**kwargs)
    return inner
 #在指定方法上添加装饰器
    class Foo(View):
        @method_decorator(wrapper)
        def get(self,request):
            pass
        def post(self,request):
            pass
# 在类上添加
    @method_decorator(wrapper,name='XXX') #name表示应用的函数名称
    class Foo(View):
        def get(self,request):
            pass
        def post(self,request):
            pass

CSRF(Ajax请求模式)

  • html
<form method="POST" action="/csrf1.html">
    {% csrf_token %}
    <input id="user" type="text" name="user" />
    <input type="submit" value="提交"/>
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script>
  • js
<script>
    function submitForm(){
        var token = $.cookie('csrftoken'); # 获得浏览器里cookies中的csrf随机字符串
        var user = $('#user').val();
        $.ajax({
            url: '/csrf1.html',
            type: 'POST',
            headers:{'X-CSRFToken': token}, # 将数据添加到请求头中,让Django去取,硬性规定
            data: { "user":user},
            success:function(arg){
                console.log(arg);
            }
        })
    }
</script>

views

def csrf1(request):
    if request.method == 'GET':
        return render(request,'csrf1.html')
    else:
        return HttpResponse('ok')

ORM函数相关(html模版上使用函数)simple_tag


模版中使用内置函数

  • html
{{ name|upper }} # upper表示内置函数,将所有字母变大写
  • views
def test(request):
return render(request,'test.html',{'name':'aaaaAA'})

模版中使用自定义函数

  • 创建templatetags文件夹,再创建xx.py模块
from django import template
register = template.Library() # 规定写法,不能修改

@register.filter # 该定义的方法只能传入2个参数
def my_upper(value,arg):
    return value + arg

@register.filter  # 应用于html模版中的if判断语名
def my_bool(value):
    return False

@register.simple_tag # 推荐使用
def my_lower(value,a1,a2,a3):
    return value + a1 + a2 + a3
  • views
def test(request):
return render(request,'test.html',{'name':'aaaaAA'})
  • html
{% load xx %}{#导入加载xx模块#}
<h2>filter</h2>
    {{ name|my_upper:"666" }} # 最多支持2个参数
    {{ name|upper }}

    {% if name|my_bool %}
        <h3></h3>
    {% else %}
        <h3></h3>
    {% endif %}

<h2>tag</h2>
    {% my_lower "ALEX" "x" "SB" "V" %}
  • setting注册程序块
INSTALLED_APPS = [
    ……
    'app01',
]
  • 总结:
- simple_filter
- 最多两个参数,格式: {{第一个参数|函数名称:"第二个参数"}}
- 可以做条件判断
- simple_tag
- 无限制: {% 函数名 参数 参数%}

include小组件


html

 <div>
    <h3>特别漂亮的组件</h3>
    <div class="title">标题:{{ name }}</div>
    <div class="content">内容:{{ name }}</div>
</div>
……
{% include 'pub.html' %}
……

cookie和session(推荐使用session)


cookie是保存在客户端浏览器上的键值对,
Session是保存在服务端的数据(本质是键值对)
因为单独使用cookies,它会保留用户具体的明文形式(不转化成字符串的敏感信息)发送给浏览器(不安全),所以推荐使用session,
session发送的是随机字符串,不包含用户敏感信息(安全),其中session依赖于cookies,

urls

urlpatterns = [
   ……
    url(r'^login/', views.login),
    url(r'^index/', views.index),
]

views

def login(request):
    if request.method == 'GET':
        return render(request,'login.html')
    else:
        u = request.POST.get('user')
        p = request.POST.get('pwd')
        obj = models.UserAdmin.objects.filter(username=u,password=p).first()
        if obj:
            # 1. 生成随机字符串
            # 2. 通过cookie发送给客户端
            # 3. 服务端保存
            # {
            #   随机字符串1: {'username':'alex','email':x''...}
            # }
            request.session['username'] = obj.username
            return redirect('/index/')
        else:
            return render(request,'login.html',{'msg':'用户名或密码错误'})

def index(request):
# 获取客户端cookies中的随机字符串,去session中查找有无该字符串, 再通过字符串去session对应key的value中查看是有username,并获得它对应的值

    v = request.session.get('username')   #  v为username对应的具体值
    if v:
        return HttpResponse('登录成功:%s' %v)
    else:
        return redirect('/login/')

setting


# SESSION_COOKIE_NAME = "sessionid"                        # Session的cookie保存在浏览器上时的key,即:sessionid=随机字符串
# SESSION_COOKIE_PATH = "/"                                # Session的cookie保存的路径
# SESSION_COOKIE_DOMAIN = None                              # Session的cookie保存的域名
# SESSION_COOKIE_SECURE = False                             # 是否Https传输cookie
# SESSION_COOKIE_HTTPONLY = True                            # 是否Session的cookie只支持http传输
# SESSION_COOKIE_AGE = 1209600                              # Session的cookie失效日期(2周)
# SESSION_EXPIRE_AT_BROWSER_CLOSE = False                   # 是否关闭浏览器使得Session过期
# SESSION_SAVE_EVERY_REQUEST = False(推荐True)             # 是否每次请求都保存Session,默认修改之后才保存

SESSION_ENGINE = 'django.contrib.sessions.backends.cashe'   #引擎,缓存+数据库,推荐使用
SESSION__CASHE_ALLAS ='default'                             # 使用缓存别名

用户登陆demo


models

from django.db import models
class Boy(models.Model):
    nickname = models.CharField(max_length=32)
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=63)

class Girl(models.Model):
    nickname = models.CharField(max_length=32)
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=63)

class B2G(models.Model):
    b = models.ForeignKey(to='Boy', to_field='id',on_delete='')
    g = models.ForeignKey(to='Girl', to_field='id',on_delete='')

urls

urlpatterns = [
    url('admin/', admin.site.urls),
    url(r'^login.html$', account.login),
    url(r'^index.html$', love.index),
    url(r'^loginout.html$',account.loginout),
    url(r'^others.html$',love.others),
]

views(创立文件夹的形式用来区分模块关系)

  • account模块
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
def login(request):
    """
    用户登陆 
    :param request: 
    :return: 
    """
    if request.method == 'GET':
        return render(request,'login.html')
    else:
        user = request.POST.get('username')
        pwd = request.POST.get('password')
        gender = request.POST.get('gender')
        rmb = request.POST.get('rmb')
        # 性别判断
        if gender == "1":
            obj = models.Boy.objects.filter(username=user,password=pwd).first()
        else:
            obj = models.Girl.objects.filter(username=user,password=pwd).first()
        if not obj:
            # 未登录
            return render(request,'login.html',{'msg': '用户名或密码错误'})
        else:
            request.session['user_info'] = {'user_id':obj.id,'gender':gender,'username':user,'nickname':obj.nickname}
            return redirect('/index.html')

def loginout(request):
    """
    注销
    :param request: 
    :return: 
    """
    if request.session.get('user_info'):
        request.session.clear() # 清除服务端数据库session(推荐)
        # request.session.delete(request.session.session_key) #清除客户端session
    return redirect('/login.html')
  • love模块
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
def index(request):
    """
    首页信息展示
    :param request: 
    :return: 
    """
    if not request.session.get('user_info'): # 获取浏览器中的session随机字符串
        return redirect('/login.html')
    else:
        # 男:女生列表
        # 女:男生列表
        gender = request.session.get('user_info').get('gender')
        if gender == '1':
            user_list  = models.Girl.objects.all()
        else:
            user_list = models.Boy.objects.all()
        return render(request,'index.html',{'user_list':user_list})

def others(request):
    """
    获取与当前用户有关系的异性
    :param request:
    :return:
    """
    current_user_id = request.session.get('user_info').get('user_id')
    gender = request.session.get('user_info').get('gender')

    if gender == '1':
        user_list = models.B2G.objects.filter(b_id=current_user_id).values('g__nickname')
    else:
        user_list = models.B2G.objects.filter(g_id=current_user_id).values('b__nickname')
    print('result', user_list)
    return render(request,'others.html',{'user_list':user_list})

html

  • login.html
<form method="POST" action="/login.html">
    {% csrf_token %}
    <p>用户:<input type="text" name="username" /></p>
    <p>密码:<input type="password" name="password" /></p>
    <p>
        性别:
            男<input type="radio" name="gender" value="1" /><input type="radio" name="gender" value="2" />
    </p>
    <p>
        <input type="checkbox" name="rmb" value="11"  /> 一个月免登录
    </p>
    <input type="submit" value="提交" />{{ msg }}
</form>
  • 建立html组件:user_header
<h1>当前用户:{{ request.session.user_info.nickname }}</h1>
<a href="/logout.html">注销</a>
  • index.html
{% include 'user_header.html' %}
<h3>异性列表</h3>
<a href="/others.html">查看和我有关系的异性</a>
<ul>
    {% for row in user_list %}
        <li>{{ row.nickname }}</li>
    {% endfor %}
</ul>
  • others.html
{% include 'user_header.html' %}
<h1>有关系的异性列表</h1>
<ul>
    {% for row in user_list %}
        {% if row.g__nickname %}
            <li>{{ row.g__nickname }}</li>
        {% else %}
            <li>{{ row.b__nickname }}</li>
        {% endif %}
    {% endfor %}
</ul>

Form组件


初识Form组件

  • html
<form method="post" action="/login/">
    {% csrf_token %}
    <p>username:<input type="text" name="username">{{obj.errors.username.0 }}</p>
    <p>password:<input type="password" name="password">{{obj.errors.password.0  }}</p>
    <input type="submit" value="submit"> 
</form>
  • urls
urlpatterns = [
……
    url(r'^login/$', views.login),
]

views

from django.forms import Form,fields
# -------定义Form验证规则类
class LoginForm(Form):
    # 正则验证: 不能为空,6-18
    username = fields.CharField(
        max_length=18,
        min_length=6,
        required=True,
        error_messages={
            'required': '用户名不能为空',
            'min_length': '太短了',
            'max_length': '太长了',
        }
    )
    # 正则验证: 不能为空,16+
    password = fields.CharField(min_length=16,required=True)

def login(request):  #Form表单提交形式
    if request.method == "GET":
        return render(request,'login.html')
    else:
       obj = LoginForm(request.POST) #将提交的数据交给Form组件验证
       if obj.is_valid():
           # 用户输入格式正确
           print(obj.cleaned_data) # 字典类型,只包含Form组件校验后的字段数据
           return redirect('http://www.baidu.com')
       else:
           # 用户输入格式错误
           return render(request,'login.html',{'obj':obj})

Form验证流程分析

第一步:实例化,将字段转换为self.fields格式
LoginForm实例化时,
self.fields={
'user': 正则表达式
'pwd': 正则表达式
}
第二步:循环self.fields,获得字段
 flag = True
 errors 
 cleaned_data

 for k,v in self.fields.items():
input_value = request.POST.get(k)   # 循环获得k字段的值(k需与前端字段名保持一致)
校验input_value的值是否匹配正则表达式  
flag = False
 return flag

---------------------------------------
if obj.is_valid():    #返回结果为True则通过验证
print(obj.cleaned_data)
else:
print(obj.errors)
return render(request,'login.html')

Form和Ajax提交验证(Ajax提交不会刷新,上次内容自动保留)

  • html
<h1>用户登录</h1>
<form id="f1" action="/login/" method="POST">
    {% csrf_token %}
    <p>
        <input type="text" name="user" />{{ obj.errors.user.0 }}
    </p>
    <p>
        <input type="password" name="pwd" />{{ obj.errors.pwd.0 }}
    </p>
    <input type="submit" value="提交" />
    <a onclick="submitForm();">提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function submitForm(){
        $('.c1').remove();
        $.ajax({
            url: '/ajax_login/',
            type: 'POST',
            data: $('#f1').serialize(),// 序列化:user=alex&pwd=456&csrftoen=dfdf
            dataType:"JSON",
            success:function(arg){
                console.log(arg);
                if(arg.status){

                }else{
                    $.each(arg.msg,function(index,value){  #index为字段名,value为错误值                     
                        var tag = document.createElement('span');
                        tag.innerHTML = value[0];
                        tag.className = 'c1';
                        $('#f1').find('input[name="'+ index +'"]').after(tag);
                    })
                }
            }
        })
    }
</script>
  • urls
……
url(r'^ajax_login/', views.ajax_login),
  • views
class LoginForm(Form): #定义Form组件类,用来验证请求数据
    user = fields.CharField(required=True,min_length=6)
    pwd = fields.CharField(min_length=18)
def ajax_login(request):
    import json
    ret={'status':True,'msg':None}
    obj = LoginForm(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        ret['status']=False
        ret['msg']=obj.errors # 获得字典,k为字段名,v为错误信息列表
    v=json.dumps(ret)
    print(obj.errors) #print时,会自动调用__str__(),在该方法中将字典组装成了<ul>标签
    return HttpResponse(v)

Form组件常用字段及参数

class TestForm(Form):
    t1 = fields.CharField(
        required=True,
        max_length=8,
        min_length=2,
        error_messages={
            'required': '不能为空',
            'max_length': '太长',
            'min_length': '太短',
        }
    )
    t2 = fields.IntegerField(
        min_value=10,
        max_value=1000,
        error_messages={
            'required': 't2不能为空',
            'invalid': 't2格式错误,必须是数字',
            'min_value': '必须大于10',
            'max_value': '必须小于1000',
        },
    )
    t3 = fields.EmailField(
        error_messages={
            'required': 't3不能为空',
            'invalid': 't3格式错误,必须是邮箱格式',
        }
    )

   # 为空,长度,格式,正则t4=fields.URLField()
t5=fields.SlugField()
t6=fields.GenericIPAddressField()
t7=fields.DateField()
t8=fields.DateTimeField()
t9=fields.RegexField('139\d+')  # 自定义正则表达式的字段验证规则
生成HTML标签:
widget=widgets.Select, ******** 用于指定生成怎样的HTML,select,text,input/.
label='用户名',  # obj.t1.label
disabled=False,              # 是否可以编辑
label_suffix='--->',            # Label内容后缀  需要在html模版中添加{{ obj.as_p }}来显示出所有Form类中定义的字段
initial='666',            # 无用,猜测有问题应该在input框中显示默认值
help_text='。。。。。。',  # 提供帮助信息

Form组件之保留上次输入框内容

  • html
# 采用Form组件生成的表单组件作为页面标签才能完成保留上次输入框的数据
<form action="/register/" method="POST" novalidate> #novalidate是忽略浏览器的表单验证规则
    {% csrf_token %}
    <p>
        {{ obj.user }} {{ obj.errors.user.0 }}
    </p>
    <p>
        {{ obj.email }} {{ obj.errors.email.0 }}
    </p>
    <p>
        {{ obj.password }} {{ obj.errors.password.0 }}
    </p>
    <p>
        {{ obj.phone }} {{ obj.errors.phone.0 }}
    </p>
    <input type="submit" value="提交"  />
  • urls
url(r'^register/', views.register),
  • views
class RegiterForm(Form):
    user = fields.CharField(min_length=8)
    email = fields.EmailField()
    password = fields.CharField()
    phone = fields.RegexField('139\d+')

def register(request):  
    if request.method == 'GET':
        obj = RegiterForm()
        return render(request,'register.html',{'obj':obj}) # 只返回表单组件类的HTML文本,无数值返回
    else:
        obj = RegiterForm(request.POST) # 因用户提交了数据,Form组件会返回带有输入框值的HTML文本
        if obj.is_valid():
            print(obj.cleaned_data)
        else:
            print(obj.errors)
        return render(request,'register.html',{'obj':obj})

Form组件完成学员管理系统


models

from django.db import models
class Classes(models.Model): #默认生成id
    title = models.CharField(max_length=32)
    def __str__(self):  # 重载方法,打印对象时,打印的内容为对象包含的title属性
        return self.title

class Student(models.Model):
    name = models.CharField(max_length=32)
    email = models.CharField(max_length=32)
    age = models.IntegerField(max_length=32)
    cls = models.ForeignKey('Classes',on_delete='')

class Teacher(models.Model):
    tname = models.CharField(max_length=32)
    c2t = models.ManyToManyField('Classes') # 自动生成第3张关联表,表中自动生成两张表的外键关联id

班级管理

# urls


url(r'^class_list/',views.class_list),
# views

def class_list(request):
    cls_list = models.Classes.objects.all()
    return render(request,'class_list.html',{'cls_list':cls_list})
# html


<h1>班级列表</h1>
<div>
    <a href="/add_class/">添加</a>
    <ul>
        {% for row in cls_list %}
            <li>{{ row.title }}<a href="/edit_class/{{ row.id }}">编辑</a></li>
        {% endfor %}
    </ul>
</div>
# urls

url(r'^add_class/',views.add_class),
# views

class ClassForm(Form):
    title = fields.RegexField('全栈\d+')  # 定义From组件校验规则

def add_class(request):
    if request.method == 'GET':
        obj = ClassForm() # 用Form组件生成表单标签到页面上
        return render(request,'add_class.html',{'obj':obj})
    else:
        obj = ClassForm(request.POST) # 通过Form组件进行校验
        if obj.is_valid():            
            models.Classes.objects.create(**obj.cleaned_data)
            return redirect('/class_list/')
        return render(request, 'add_class.html', {'obj': obj})
# html

<h1>添加班级</h1>
<form method="post" action="/add_class/" novalidate> # 忽略浏览器数据校验
    {% csrf_token %}
    {{ obj.title }}{{ obj.errors.title.0 }}  # 0代表错误信息列表中的第1条数据
    <input type="submit" value="提交">
# urls

url(r'edit_class/(\d+)',views.edit_class),#接收任意数字id的正则
# views

……
省略Form组件定义类
……

def edit_class(request, nid):
    if request.method == 'GET':
        row = models.Classes.objects.filter(id=nid).first()  # 让页面显示初始值
        # obj = ClassForm(data={'title': row.title}) #发送到前端时,Form组件会进行校验
        obj = ClassForm(initial={'title': row.title}) #Form组件不会进行校验
        return render(request,'edit_class.html',{'nid':nid,'obj':obj})
    else:
        obj = ClassForm(request.POST)
        if obj.is_valid():
            # models.Classes.objects.filter(id=nid).update(title = obj.cleaned_data['title'])
            models.Classes.objects.filter(id=nid).update(**obj.cleaned_data) # 以字典格式插入数据
            return redirect('/class_list/')
        return render(request,'edit_class.html',{'nid': nid,'obj':obj})
# html

<h1>编辑班级</h1>
<form method="POST" action="/edit_class/{{ nid }}/">
    {% csrf_token %}
    <p>
        {{ obj.title }} {{ obj.errors.title.0 }}
    </p>
    <input type='submit' value="提交" />
</form>

学生管理

# urls

url(r'^student_list/', views.student_list),
# views

def student_list(request):
    stu_list = models.Student.objects.all()
    return render(request, 'student_list.html', {'stu_list':stu_list})
# html

<a href="/add_student/">添加</a>
<ul>
    {% for row in stu_list %}
        <li>
            {{ row.name }}-{{ row.email }}-{{ row.age }}-{{ row.cls_id }}-{{ row.cls.title }}
            <a href="/edit_student/{{ row.id }}">编辑</a>
        </li>
    {% endfor %}
</ul>
# urls

url(r'add_student/', views.add_student),
# views

# Form组件定义:
class StudentForm(Form):
    name = fields.CharField(
        min_length=2,
        max_length=6,
        widget=widgets.TextInput(attrs={'class': 'form-control'})  #表单组件样式选择及属性设置,默认组件样式为text文本框
    )
    email = fields.EmailField(widget=widgets.TextInput(attrs={'class': 'form-control'}))
    age = fields.IntegerField(min_value=18,max_value=25,widget=widgets.TextInput(attrs={'class': 'form-control'}))

    cls_id = fields.IntegerField(
        # widget=widgets.Select(choices=[(1,'上海'),(2,'北京')])
        widget=widgets.Select(choices=models.Classes.objects.values_list('id','title'),attrs={'class': 'form-control'}) 
      # 获得单选下拉框

       # 另外一种写法:cls_id=fields.ChoiceField(
                      choices = models.Class.objests.values_list('id','title')
                       widget = widgets.Select(attr={'class':''form-control})
                      )
     )

def add_student(request):
    if request.method == 'GET':
        obj = StudentForm()
        return render(request,'add_student.html',{'obj':obj})
    else:
        obj = StudentForm(request.POST)
        if obj.is_valid():
            models.Student.objects.create(**obj.cleaned_data)
            return redirect('/student_list/')
        else:
            return render(request,'add_student.html',{'obj':obj})
# html


<form action="/add_student/" method="POST" novalidate>
    {% csrf_token %}
    <p>
     姓名:{{ obj.name }}{{ obj.errors.name.0 }}
    </p>
    <p>
     邮箱:{{ obj.email }}{{ obj.errors.email.0 }}
    </p>
    <p>
     年龄:{{ obj.age }}{{ obj.errors.age.0 }}
    </p>
    <p>
     班级:{{ obj.cls_id }}{{ obj.errors.cls_id.0 }}
    </p>
    <input type="submit" value="提交" />
</form>
# urls

url(r'^edit_student/(\d+)/', views.edit_student),
# views

……省略Form组件……
def edit_student(request,nid):
    if request.method == 'GET':
        row = models.Student.objects.filter(id=nid).values('name','email','age','cls_id').first() #如果不添加first会报错,错误为“要解压的值太多”
        obj = StudentForm(initial=row)    # 将数据封装至Form组件中,initial设置为不做数据验证
        return render(request,'edit_student.html',{'nid':nid, 'obj':obj})
    else:
        obj = StudentForm(request.POST)
        if obj.is_valid():
            models.Student.objects.filter(id=nid).update(**obj.cleaned_data)
            return redirect('/student_list/')
        else:
            return render(request,'/edit_student.html',{'nid':id, 'obj':obj})
# html

<link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css"/>

<div style="width: 500px;margin: 0 auto;">
    <form class="form-horizontal" method="POST" action="/edit_student/{{ nid }}/">
        {% csrf_token %}
        <div class="form-group">
            <label class="col-sm-2 control-label">姓名:</label>

            <div class="col-sm-10">
                {{ obj.name }}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">邮箱:</label>

            <div class="col-sm-10">
                {{ obj.email }}
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-2 control-label">年龄:</label>

            <div class="col-sm-10">
                {{ obj.age }}
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-2 control-label">班级:</label>

            <div class="col-sm-10">
                {{ obj.cls_id }}
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" class="btn btn-default" value="提交" />
            </div>
        </div>
    </form>
</div>

老师管理

# urls

url(r'^teacher_list/', views.teacher_list),
# views

def teacher_list(request):
    tea_list = models.Teacher.objects.all()
    return render(request,'teacher_list.html',{'tea_list':tea_list})
# html

<h1>老师列表</h1>
<div>
    <a href="/add_teacher/">添加</a>
</div>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>老师姓名</th>
            <th>任教班级</th>
            <th>编辑</th>
        </tr>
    </thead>
    <tbody>
        {% for row in tea_list %}
            <tr>
                <td>{{ row.id }}</td>
                <td>{{ row.tname }}</td>
                <td>{{ row.c2t }}</td>
                <td>
                    <a href="/edit_teacher/{{ row.id }}/">编辑</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
# urls

url(r'^add_teacher/', views.add_teacher),
# views

#Form组件定义:(实现数据动态显示)
class TeacherForm(Form):
    tname=fields.CharField(min_length=2)

    cls_id = fields.MultipleChoiceField(  # 多选模式,过滤出字典中包含的是列表格式数据{'cls_id': ['2', '3']},而非列表字符串格式{'cls_id': “['2', '3']”}
        # choices=models.Classes.objects.values_list('id','title'),
        #  生成下拉框对应的值,有了__init__()构造方法后可以不用写choices关键字参数
        widget=widgets.SelectMultiple # 多选下拉框表单组件
    )
    #因From组件对象不会重新启动获得数据库的值,
    #所以需要每一次类加载实例化的构造方法来重新获取数据库的值,实现数据动态显示
    def __init__(self,*args,**kwargs):
        super(TeacherForm,self).__init__(*args,**kwargs) # 调用父类构造方法
        self.fields['cls_id'].choices=models.Classes.objects.values_list('id','title')
         # 获得字典中字段的插件widget中的choices

# Form组件执行方式
# obj = TeacherForm()
# 1. 找到所有字段
# 2. self.fields = {   # 加载字典中的所有字段
#       tname: fields.CharField(min_length=2)
# }

def add_teacher(request):
    if request == 'GET':
        obj = TeacherForm()
        return render(request,'add_teacher.html',{'obj':obj})
    else:
        obj = TeacherForm(request.POST)
        if obj.is_valid():
            cls_id= obj.cleaned_data.pop('cls_id') # 单独提取出cls_id的值
            row = models.Teacher.objects.create(**obj.cleaned_data)
            # **字典,会自动将字典格式{'tname': 'tom'}转换成tname='tom'格式的数据
            row.c2t.add(*cls_id) # *代表列表格式插入
            return redirect('/teacher_list/')
        return render(request,'add_teacher.html',{'obj':obj})
# html

<form method="POST" action="/add_teacher/" novalidate>
    {% csrf_token %}
    <p>
        姓名:{{ obj.tname }}
    </p>
    <p>
        班级:{{ obj.cls_id }}
    </p>
    <input type="submit" value="提交" />
</form>
# urls

url(r'^edit_teacher/(\d+)/', views.edit_teacher),
# views

def edit_teacher(request,nid):
    if request.method == "GET":
        row = models.Teacher.objects.filter(id=nid).first()
        class_ids = row.c2t.values_list('id')   #获得关联的班级id,值为[(3,),(1,)]
        # zip()将[(3,),(1,)]转换为[(3,1),]
        id_list = list(zip(*class_ids))[0] if list(zip(*class_ids)) else []      
        # obj = TeacherForm(initial={'tname':row.tname,'xx':[1,2,3]})
        obj = TeacherForm(initial={'tname':row.tname,'cls_id':id_list})
        return render(request,'edit_teacher.html',{'obj':obj})
# html

{{ obj.tname }}
{{ obj.cls_id }}

Form常用组件定制


class TestForm(Form):
    t1 = fields.MultipleChoiceField(    # 验证多选框的值
        choices =[(1,'篮球'),(2,'足球')],   # 制定显示值
        widget=widgets.CheckboxSelectMultiple   # 生成多选框组件
    )
    t2 =fields.MultipleChoiceField( 
        choices=[(1,'篮球'),(2,'足球')],
        widget=widgets.RadioSelect # 单选按钮组件
    )
    t3 = fields.FileField(
        widget=widgets.FileInput    # 文件输入框
    )

Form组件中的钩子(扩展自定义函数)


class TestForm(Form):
    user = fields.CharField( # 添加自定义正则表达式
    validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), 
                RegexValidator(r'^159[0-9]+$', '数字必须以159开头')],)

email = fields.EmailField()    
def clean_user(self): # 常用于扩展用户名是否在数据库中存在,验证码是否匹配,传参request
    v = self.cleaned_data['user']
    if models.Student.object.filter(name=v).count():
        raise ValuedationError('用户已存在')
    return self.cleaned_data['user']

def clean(self):    # 常用于字段的联合唯一判断
    user=self.cleaned_data.get('user')
    email=self.cleaned_data.get('email')
    if models.Stuent.objects.filter(user=user,email=email).count():
        raise ValuedationError('用户名和邮箱联合已经存在')
    return self.cleaned_data

Ajax提交数据部分


原生Ajax提交数据

// 原生Ajax完成GET方式提交数据
function add2() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function () {
        if (xhr.readyState == 4){
            // 状态值为4表示接收全部数据
            alert(xhr.responseText);
        }
    }
    xhr.open('GET','/add2/?i1=12&i2=19');
    xhr.send();
}

// 原生Ajax完成POST方式提交数据
function add2() {
    var xhr =new XMLHttpRequest();
    xhr.onreadystatechange=function () {
        if (xhr.readyState == 4){
            alert(xhr.responseText);
        }
    }
    xhr.open('POST','/add2/');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded ')
    # 必须要添加Http请求头数据才能从body中取出数据
    xhr.send('i1=12&i2=19');
}

伪Ajax提交数据

<form id="f1" method="POST" action="/fake_ajax/" target="ifr"> // 将由name=ifram的标签去发送请求到
     // ifram自动发送请求,且接收响应值显示在该标签内,标签外的内容不变化
    <iframe id="ifr" name="ifr" style="display: none"></iframe>
    <input type="text" name="user" />
    <a onclick="submitForm();">提交</a>
</form>

<script>
    function submitForm(){
        // 先绑定loadIframe,将loadIframe加载到内存后再提交,解决由上到下执行顺序的问题
        // onload表示有返回的内容时加载该标签,会再次动触发加载到内存中的loadIframe函数
        document.getElementById('ifr').onload = loadIframe; 
        document.getElementById('f1').submit();
    }

    function loadIframe(){
        var content = document.getElementById('ifr').contentWindow.document.body.innerText; // 获得标签内的数据
        alert(content);
    }
</script>

上传文件


原生Ajax上传文件

  • html
 <h1>原生Ajax上传文件</h1>
    <input type="file" id="i1" />
    <a onclick="upload1();">上传</a>
    <div id="container1"></div>

<script>
     function upload1(){
            var formData = new FormData(); # 构造需要发送给服务器的内容
            formData.append('k1','v1');
            formData.append('fafafa',document.getElementById('i1').files[0]); # 获得文件对象

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    var  file_path = xhr.responseText;
                    var tag = document.createElement('img');
                    tag.src = "/"+ file_path;
                    document.getElementById('container1').appendChild(tag);
                }
            };
            xhr.open('POST','/upload/');
            xhr.send(formData);
        }
</script>
  • views
import os
def upload(request):
    if request.method == 'GET':
        return render(request, 'upload.html')
    else:     
        file_obj = request.FILES.get('fafafa') # 获得浏览器发送的文件
        file_path = os.path.join('static', file_obj.name) # 组装文件路径
        with open(file_path, 'wb') as f:
            for chunk in file_obj.chunks(): # 把文件块以字节的形式写入文件
                f.write(chunk)
        return HttpResponse(file_path)
  • JQuery Ajax上传文件
  • html
<h1>JQuery Ajax上传文件</h1>
<input type="file" id="i2" />
<a onclick="upload2();">上传</a>
<div id="container2"></div>

<script src="/static/jquery-1.12.4.js"></script>
function upload2() {
    var formData = new FormData();
    formData.append('fafafa',$('#i2').files[0]);
    $.ajax({
        url:'/upload/',
        type:'POST',
        data:formData,
        contentType:false, # 避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件,ajax会默认添加请求头 
        processData:false, # 交由FormData进行处理
        success:function (arg) {
            var tag = document.createElement('img')
            tag.src='/'+arg;
            $('#container2').append(tag)
        }
    })
}
  • views
同原生Ajax的后台处理一样

伪Ajax上传文件(浏览器兼容性更好)

  • html
<h1>伪Ajax上传文件</h1>
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
    <iframe id="ifr" style="display: none" name="ifr"></iframe>
    <input type="file" name="fafafa"/>
    <a onclick="upload3();">上传</a>
</form>
<div id="container3"></div>

function upload3() {
    document.getElementById('ifr').onload = loadIframe;
    document.getElementById('f1').submit();
}
function loadIframe() {
    var content = document.getElementById('ifr').contentWindow.document.body.innerText;
    var tag = document.createElement('img');
    tag.src='/'+content;
    $('#container3').append(tag);
}
  • views
同原生Ajax的后台处理一样

jsonp(解决跨域问题,需请求方与响应方约定规则)


属于一种技巧/技术

Ajax使用时:
访问自己域名URL-可以
访问其他域名URL - 被阻止(跨站请求)

被阻止原因:
浏览器:因为同源策略,Ajax跨域发送请求时,浏览器拒绝接收响应数据。
但script标签发送请求时,返回的数据可以被允许接收,不被浏览器禁止。
示例:
<a onclick="sendMsg();">发送</a>
<script src="/static/jquery-1.12.4.js"></script>

{#      // 加载该内容时会将文件中的函数加载到内存中,当响应的数据中包含该函数名时,会执行内存中的该函数#}
<script src="/static/common1.js"></script>
<script src="/static/common2.js"></script>

function sendMsg() {
    var tag = document.createElement('script')

# 通过scripte向该网址发送请求,然后将该页面内容全部下载到内存中
# 该网址将返回调用list函数的执行方法: list(……),会立即执行js文件中的函数
    tag.src='http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403' 
    document.head.appendChild(tag)
}

# 使用该方式的要求:
客户端: 发送函数名,URL?callback = xxx
         定义函数,function xxx(arg){}

服务端:获取发送过来的函数名 funcname = request.GET.get(callback)
        返回时,将需要返回的数据作为参数传入函数名中 funcname(……)一起发送回来,然后自动执行内存中存在的该方法

注:实现跨域数据交互时,需要双方事先约定函数规则
# common1.js文件内容

function f1() {
    alert('kkk')
}

# common2.js文件内容
function list(arg){  # 定义list函数
    console.log(arg)
}

自定义API用作返回数据

  • urls
url(r'^users/', views.users),
  • views
def users(request):
    print('请求到来')
    callback = request.GET.get('funcname')
    user_list=[
        'leo', 'tom', 'jack'
    ]
    temp = '%s(%s)'%(callback, user_list)
    print(temp)
    # return HttpResponse(json.dumps(user_list))
    return HttpResponse(temp) # 返回一个字符串对象
  • setting配置‘
ALLOWED_HOSTS = ['www.s4.com'] # 允许访问的主机
  • 本地PC配置
C:\Windows\System32\drivers\etc  

往hosts文件中添加内容:127.0.0.1 www.s4.com
  • 2种解决方案
<input type="button" onclick="sendMsg();" value="ajax提交">
<input type="button" onclick="sendMsg2();" value="script标签方式提交">
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
  {#方案一:使用jsonp形式跨站完成数据交互#}
    function sendMsg() {      
        $.ajax({
            url: 'http://www.s4.com:8001/users/',
            type: 'GET',
            {#声明时,使用的是jsonp发送数据,不采用XMLHttpResponse发送数据,jsonp采用GET形式,即使声明的是POST形式也会自动转换成GET #}
            dataType: 'JSONP',
            {#其它服务器接收到的K值,从而获得函数名bbb#}
            jsonp: 'funcname',
            {#定义回调函数#}
            jsonpCallback: 'bbb'
        })
    }

   {#方案二:使用js形式跨站完成数据交互,与jsonp原理一样#}
    function sendMsg2() {
        var tag = document.createElement('script');
        {#返回结果为:bbb(['leo', 'tom', 'jack'])#}
        tag.src = "http://www.s4.com:8001/users/?funcname=bbb";
        document.head.appendChild(tag);
    }

    function bbb(arg) {     
        alert(arg);
    }

CORS解决跨域问题(跨来源资源共享)(响应头添加值)


简单请求

<input type="button" onclick="getUsers();" value="cors跨来源资源共享方式">
function getUsers() {
    $.ajax({
        url:'http://www.s4.com:8001/new_users/',
        type:'GET',
        success:function (arg) {
            alert(arg)
        }
    })
}

第三方服务器

 url(r'^new_users/', views.new_users),
def new_users(request):
    user_list = [
        'lleo', 'tom', 'jack'
    ]
    obj = HttpResponse(json.dumps(user_list))
    # 添加令牌,添加响应头信息
    obj["Access-Control-Allow-Origin"]='http://www.s5.com:8000' # 允许跨站的数据响应返回,浏览器不设阻拦
    # obj["Access-Control-Allow-Origin"]=”*“
    print('请求')
    return obj

复杂请求

  • 第三方服务器
# 复杂请求的处理
def new_users(request):
    if request.method == 'OPTIONS':
        obj = HttpResponse()
        obj["Access-Control-Allow-Origin"] ='*'
        obj["Access-Control-Allow-Origin"] ='DELETE'
        return obj

    obj = HttpResponse('adsf')
    obj["Access-Control-Allow-Origin"] = '*'
    return obj

猜你喜欢

转载自blog.csdn.net/qq_33591055/article/details/80628418
今日推荐