首页 思维导图 详情

django思路图大致整理

2017-07-10 09:23:16 1 举报
仅支持查看
AI智能生成
Django的一些常用知识整理的思维导图，大致内容
Django思维导图
作者其他创作
大纲/内容
路由层
通过设置url文件下的url来匹配路由，过于简单不多做赘述
模板层
继承母版
写好母版后可以通过子板可以通过{% extends 'base.html' %}导入母版的内容
母版中需要替换的内容区域可以写上
     {% block xx  %}{% endblock %}，子板再通过写入对应的代码块，在其中写入子板个性化页面
定义小工具
在一个页面写好小工具后可以通过{% include 'pub.html' %}导入，类似一个写好的独立的样式可以重复使用
数据提交
form表达提交
示例：
<form action="/login/" method="POST">
    {% csrf_token %}
    <div>用户名：<input type="text" class="user_name" name="user_name"></div>
    <div>密 &nbsp;&nbsp;码： <input type="password" class="pwd" name="pwd"></div>
    <input type="submit" class="login" value="登录账户" onclick="login()">
    <div style="color: red" class="help">{{ help }}</div>
</form>
ajax提交
需要jq插件：
$.ajax(
    {
        type:'POST',
        url:'/classs/',
        data:{'class_name':$('.class_name').val()},
        success:function (arg)
        {
           if (arg=='ok'){
               location.reload()
           }else {
               alert('添加失败')
           }
        }
    }
)
子主题
模型层
修改setting里的数据库配置文件
在models文件中创建数据类
在setting中注册app
制作数据迁移，python manage.py makemigrations
数据迁移到数据库,python manage.py migrate
视图层
在views文件中写入对应url的函数在返回渲染后的网页字符串
直接打印字符到网页，
return HttpResponse（'...'）
返回并渲染页面 return render（request，‘test.html’{传入前端的字典元素}）
页面跳转 return redirect（‘url’）
其他层
CSRF跨站请求伪造防护
form表单中添加
   {% csrf_token %}
局部禁用
导入from django.views.decorators.csrf import csrf_exempt
指定函数加上装饰器@csrf_exempt
局部使用
导入from django.views.decorators.csrf import csrf_exempt,csrf_protect
指定函数加上@csrf_protect
ajax提交数据
<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>
     function submitForm(){
      var csrf = $('input[name="csrfmiddlewaretoken"]').val();
      var user = $('#user').val();
      $.ajax({
       url: '/csrf1.html',
       type: 'POST',
       data: { "user":user,'csrfmiddlewaretoken': csrf},
       success:function(arg){
        console.log(arg);
       }
      })
     }
    </script>通过查看源码用jq找到标签取值后提交
放在请求头中
   
     <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>
     <script>
      function submitForm(){
       var token = $.cookie('csrftoken');
       var user = $('#user').val();
       $.ajax({
        url: '/csrf1.html',
        type: 'POST',
        headers:{'X-CSRFToken': token},
        data: { "user":user},
        success:function(arg){
         console.log(arg);
        }
       })
      }
     </script>
cookie
保存在客户端浏览器上的键值对
使用方法：
obj=redirect('/classs/')
obj.set_signed_cookie('name','cris',salt='666',max_age=10000)
取值：
cok=request.get_signed_cookie('name',salt='666')
session
保存在服务端的数据（本质是键值对），作用：保持会话（Web网站）
使用方法request.session[key]=value
取值：request.session.get(key)
设置超时时间：request.SESSION_COOKIE_AGE = 604800
删除数据库中过期的session数据
     -manage.py cleanup
session的配置文件，可将其放入settings:
   # 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
删除session
  request.session.delete(request.session.session_key)清除数据库中的过期session
  request.session.clear()删除浏览器cookie
中间件
中间件类似于一个过滤器，在执行请求或者返回参数的时候会执行相应的函数
所有中间件在setting配置文件中的函数，以及注册地点:
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'm.M1',
    'm.M2',
]
中间件的过滤请求函数：
def process_request(self,ruquest):
    print('M1.process_request') 如果在请求函数中直接返回的话就会从当前类中的返回函数中返回
中间件的过滤返回函数：
def process_response(self,response):
    print('M1.process_response')
    return response#注意response必须要有返回函数
中间件的过滤视图函数，一共有四个值self，view函数,*args,**kwargs
def process_view(self,request,view_fuc,args,kwargs):
    print('M1.process_view')
    response=view_fuc(request,*args,**kwargs)
    return response
Form表单
通过Form表单来过滤input的输入数据
class RegisterFprm(Form):
    username = fields.CharField(max_length=16,
                                min_length=6,
                                required=True,
                                error_messages={'max_length': '用户名格式不正确',
                                                'min_length': '用户名格式不正确',
                                                'required': '用户名不能为空'})
    pwd = fields.CharField(max_length=32,
                           min_length=10,
                           required=True,
                           error_messages={'max_length': '密码格式不正确',
                                            'min_length': '密码格式不正确',
                                            'required': '密码不能为空',})
    pwda= fields.CharField(max_length=32,
                           min_length=10,
                           required=True,
                           error_messages={'max_length': '密码不正确',
                                            'min_length': '密码不正确',
                                            'required': '密码不能为空',})
通过Form表单来生成HTML标签
创建好Form对象，将Form对象（无参数）通过模板语言的方式传入前端
如何设置form表单的样式？可以通过设置插件的方式来设置标签的样式
设置多选框样式 
widget=widgets.CheckboxSelectMultiple
单选按钮样式 
widget=widgets.RadioSelect
文件选择样式 
widget=widgets.FileInput
设置下拉框以及设置class 
cls_id = fields.
ModelMultipleChoiceField
(
    # widget=widgets.Select(choices=[(1,'上海'),(2,'北京')])
    widget=widgets.Select(choices=models.Classes.objects.values_list('id','title'),attrs={'class': 'form-control'})
)
Ajax的原理
原生Ajax
1原生Ajax：XMLHttpRequest
 GET方式：
  function add1()
    {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                alert(xhr.responseText)
            }
        };
        xhr.open('GET','/add1/?id=123&id1=123');
        xhr.send();
    }
 POST方式：
 function add1()
    {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                alert(xhr.responseText)
            }
        };
        xhr.open('POST','/add1/');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send('i1=12&i2=19');
    }
   
  
 }
JqAjax
jquery Ajax：内部基于原生ajax
  $.ajax({
   url:
   data:
   type:
   success:
  })
伪Ajax
伪ajax，非XMLHttpRequest，（通过iframe标签的特殊属性，实现不用刷新就可以实现数据提交）
  <form id="f1" action="/add2/" method="post" target="ifr">
   <iframe id="ifr" name="ifr"></iframe>
   <input type="text" name="user"/>
   <button onclick="submit()">提交</button>
  </form>
  <script>
   function submit() {
    document.getElementById('ifr').onload=load;
    document.getElementById('f1').submit();
   }
   function load() {
    var content=document.getElementById('ifr').contentWindow.document.body.innerTxet
    alert(content)
   }
  </script>
文件上传（本次模拟一个图片上传，上传后再在页面上进行预览）
伪ajax
   <form id="f1" action="/add2/" method="POST" target="ifr" enctype="multipart/form-data">
    <iframe id="ifr" name="ifr" style="display: none"></iframe>
    <input id="i1" type="file" name="fff"/>
    <a onclick="submit()">提交</a>
   </form>
   <div id="img"></div>
   <script src="/static/jquery-3.2.1.js">
   </script>
   <script>
    function submit()
    {
     document.getElementById('ifr').onload = load;
     document.getElementById('f1').submit();
    }
    function load() {
     var doc=document.getElementById('ifr').contentWindow.document.body.innerText;
     var tag=document.createElement('img');
     tag.src='/'+doc;
     document.getElementById('img').appendChild(tag)
    }
   </script>
原生ajax文件提交：
    function upload1(){
            var formData = new FormData();
            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);
        }
jquery ajax文件提交:
  function upload2(){
            var formData = new FormData();
            // formData.append('fafafa',document.getElementById('i1').files[0]);
            formData.append('fafafa',$('#i2')[0].files[0]);
            $.ajax({
                url: '/upload/',
                type: 'POST',
                data: formData,
                contentType:false,
                processData:false,
                success:function(arg){
                    var tag = document.createElement('img');
                    tag.src = "/"+ arg;
                    $('#container2').append(tag);
                }
            })
        }
JSONP
JSONP是因为浏览器的同源策略，让浏览器无法实现跨域请求，而存在的，那么如何绕过同源策略呢
自己写：
   服务端：
    def test(request):
     print('1111')
     fucname=request.GET.get('call_back')
     my_list=[
      'cris',
      'alex',
      'lion',
      'marry',
     ]
     my_data=json.dumps(my_list)
     value='%s(%s)'%(fucname,my_list)
     return HttpResponse(value)
   
   客户端：
    <div>
     <input type="button" onclick="add1()" value="请求">
    </div>
    <script>
     function add1() {
      var tag=document.createElement('script');
      tag.src='http://127.0.0.1:8000/test/?call_back=call_back';
      document.head.appendChild(tag)
     }
     function call_back(arg) {
      console.log(arg)
     }
    </script>
jquery方式：
   $.ajax({
   url:'http:/127.0.0.1:8000/test',
   type:'GET',
   dataType:'JSONP',
   jsonp：'funcname',
   jsonpCallback:'fuc'
   })
   function fuc(arg){
    console:log(arg)
   }
CORS方式：
   只要服务器方加一个返回头，浏览器就会允许数据通过
   简单请求
   def new_users(request):
    obj = HttpResponse('asdfasdf')
    obj['Access-Control-Allow-Origin'] = "*"
    return obj
   
   复杂请求：
   def new_users(request):
    print(request.method)
    if request.method == "OPTIONS":
     obj = HttpResponse()
     obj['Access-Control-Allow-Origin'] = "*"
     obj['Access-Control-Allow-Methods'] = "DELETE"
     return obj
    obj = HttpResponse('asdfasdf')
    obj['Access-Control-Allow-Origin'] = "*"
    return obj
评论
0 条评论
下一页
为你推荐
查看更多
Django
Django
基本思路
基本思路
服务管控思路
服务管控思路
BD思路map
BD思路map
Django 流程图
Django 流程图
Django数据模型
Django数据模型
数据整理
数据整理
Django
Django
思路
思路
简历归一规则思路整理
简历归一规则思路整理