django思路图大致整理
2017-07-10 09:23:16 1 举报
AI智能生成
Django的一些常用知识整理的思维导图,大致内容
作者其他创作
大纲/内容
路由层
通过设置url文件下的url来匹配路由,过于简单不多做赘述
模板层
继承母版
写好母版后可以通过子板可以通过{% extends 'base.html' %}导入母版的内容
母版中需要替换的内容区域可以写上
{% block xx %}{% endblock %},子板再通过写入对应的代码块,在其中写入子板个性化页面
{% 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>密 码: <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 %}
{% 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);
}
})
}
{% 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>
<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>
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
-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_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
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': '密码不能为空',})
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');
}
}
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({
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>
<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>
<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);
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);
}
};
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);
}
})
}
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>
服务端:
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>
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)
}
$.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
只要服务器方加一个返回头,浏览器就会允许数据通过
简单请求
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
obj['Access-Control-Allow-Origin'] = "*"
return obj
收藏
收藏
0 条评论
下一页