首页  思维导图  详情

django思路图大致整理

2017-07-10 09:23:16   1  举报





仅支持查看

AI智能生成

Django的一些常用知识整理的思维导图，大致内容

Django思维导图

作者其他创作

大纲/内容

路由层

通过设置url文件下的url来匹配路由，过于简单不多做赘述

模板层

继承母版

写好母版后可以通过子板可以通过{% extends 'base.html' %}导入母版的内容

母版中需要替换的内容区域可以写上      {% block xx  %}{% endblock %}，子板再通过写入对应的代码块，在其中写入子板个性化页面

定义小工具

在一个页面写好小工具后可以通过{% include 'pub.html' %}导入，类似一个写好的独立的样式可以重复使用

数据提交

form表达提交

示例：<pre><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></pre>

ajax提交

需要jq插件：<pre>$.ajax( { type:'POST', url:'/classs/', data:{'class_name':$('.class_name').val()}, success:function (arg) { if (arg=='ok'){ location.reload() }else { alert('添加失败') } } } )</pre>

子主题

模型层

修改setting里的数据库配置文件

在models文件中创建数据类

在setting中注册app

制作数据迁移，python manage.py makemigrations

数据迁移到数据库,python manage.py migrate

视图层

在views文件中写入对应url的函数在返回渲染后的网页字符串

直接打印字符到网页，<pre>return HttpResponse（'...'）</pre>

返回并渲染页面 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提交数据

<div><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);        }       })      }</div><div>    </script>通过查看源码用jq找到标签取值后提交</div>

<div>放在请求头中          <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></div><div>     <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></div>

保存在客户端浏览器上的键值对

使用方法：<pre>obj=redirect('/classs/') obj.set_signed_cookie('name','cris',salt='666',max_age=10000)</pre>

取值：<pre>cok=request.get_signed_cookie('name',salt='666')</pre>

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配置文件中的函数，以及注册地点:<pre>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', ]</pre>

中间件的过滤请求函数：<pre>def process_request(self,ruquest): print('M1.process_request') 如果在请求函数中直接返回的话就会从当前类中的返回函数中返回</pre>

中间件的过滤返回函数：<pre>def process_response(self,response): print('M1.process_response') return response#注意response必须要有返回函数</pre>

中间件的过滤视图函数，一共有四个值self，view函数,*args,**kwargs<pre>def process_view(self,request,view_fuc,args,kwargs): print('M1.process_view') response=view_fuc(request,*args,**kwargs) return response</pre>

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表单的样式？可以通过设置插件的方式来设置标签的样式

设置多选框样式

<pre>widget=widgets.CheckboxSelectMultiple</pre>

单选按钮样式

<pre>widget=widgets.RadioSelect</pre>

文件选择样式

<pre>widget=widgets.FileInput</pre>

设置下拉框以及设置class

<pre>cls_id = fields.<pre>ModelMultipleChoiceField</pre>( # widget=widgets.Select(choices=[(1,'上海'),(2,'北京')]) widget=widgets.Select(choices=models.Classes.objects.values_list('id','title'),attrs={'class': 'form-control'}) )</pre>

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>

<div>原生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);</div><div>                }             };             xhr.open('POST','/upload/');             xhr.send(formData);         }</div>

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是因为浏览器的同源策略，让浏览器无法实现跨域请求，而存在的，那么如何绕过同源策略呢

<div>自己写：    服务端：     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></div><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></div>

jquery方式：    $.ajax({    url:'http:/127.0.0.1:8000/test',    type:'GET',    dataType:'JSONP',    jsonp：'funcname',    jsonpCallback:'fuc'    })    function fuc(arg){     console:log(arg)    }

<div>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</div><div>    obj = HttpResponse('asdfasdf')     obj['Access-Control-Allow-Origin'] = "*"     return obj</div>