框架以外的学问整理

  布局响应式

  响应式就是浏览器就边框的紧缩会来的浏览样式的别。

@media (max-width: 700px) {
       .jeff{
       width: 100%;
       height: 100px;
       background-color: yellow;
}

图片 1图片 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
                .jeff{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        @media (max-width: 700px) {
                    .jeff{
            width: 100%;
            height: 100px;
            background-color: yellow;
        }
        }

    </style>
</head>
<body>
    <div class="jeff">love</div>
</body>
</html>

响应式test

  当然为可以动用bootstrap里封装好之领航条等代码,其成就响应式的艺术为是因@media就的。

  栅格系统

  bootstrap把页面分为12独要命格子,使用.col-md-8的点子尽管可轻松的将页面划分开。一共来四种植艺术分割,根据显示屏幕的像素大小分别为.col-xs-<.col-sm-<.col-md-<.col-lg-。

图片 3图片 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"/>
</head>
<body>

    <div style="background-color: #dddddd">
        <div class="col-lg-1">左边</div>
        <div class="col-lg-11">右边</div>
    </div>
    <div style="background-color: #dddddd">
        <div class="col-md-1">左边</div>
        <div class="col-md-11">右边</div>
    </div>
    <div style="background-color: #dddddd">
        <div class="col-sm-1">左边</div>
        <div class="col-sm-11">右边</div>
    </div>
    <div style="background-color: #dddddd">
        <div class="col-xs-1">左边</div>
        <div class="col-xs-11">右边</div>
    </div>
</body>
</html>

栅格系统

  栅格也是依据响应式做的分寸调整。

  不容许缩放的栅格:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

   hover:

  之前举行的鼠标悬浮外层div使子层发生样式改变都是用js来形成的,其实可以直接动用hover来成功:

外层:hover 要改变的里层{悬浮后的样式}

图片 5图片 6

        .pg-header .avatar .user-info{
            display: none;
            background-color: white;
            border: 1px solid #dddddd;
            position: absolute;width: 200px;top: 48px;right: 2px;color: white;z-index: 100;
        }
        .pg-header .avatar:hover .user-info{
            display: block;

hover

  html模板渲染

#后台视图函数
def test(request):
    return render(request,'test.html',{'k1': 1,'k2': 'uuu'})

#前端test.html
<body>
    <h1>{{ k1 }}</h1>
    <h1>{{ k2 }}</h1>

    <script>
        alert('{{ k2 }}');//uuu
        alert({{ k2 }});//uuu not define
    </script>
</body>

  后端一定是预先以html文件渲染以后更发送给客户端浏览器,{{k2}}在后端被渲染成uuu,前者因为字符串形式产生,后者则让前端认为是变量未定义报错。

  Cookie

  简单的喻也保存于浏览器端“键值对”,用于解决http无状态短连接的题目,发送Http请求时,在请求头中携带当前具有可看的cookie。

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 == 'alex' and pwd == '123':
            obj = redirect('/classes/')
            obj.set_cookie('ticket',"123123")#设置cookie
            return obj
        else:
            return render(request,'login.html')

//登陆的页面视图函数可以接收头部的cookie
    # 去请求的cookie中找凭证
    tk = request.COOKIES.get('ticket')print(tk)
    if not tk:
        return redirect('/login/')

  set_cookie可以来成百上千的参数:

  max_age,存在时长单位s。超过时间就是机关失效。

  expires与max_age意义一样,只是它们用来指定具体的工夫。相比较而言,max_age更常用。

图片 7图片 8

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 == 'alex' and pwd == '123':
            obj = redirect('/classes/')
            import datetime
            from datetime import timedelta
            ct = datetime.datetime.utcnow()#当前时间
            v= timedelta(seconds=10)#往后延迟10s
            value = ct + v
            # obj.set_cookie('ticket',"asdasdsd",max_age=10)
            obj.set_cookie('ticket',"asdasdsd",expires=value)
            return obj
        else:
            return render(request,'login.html')

expires

  path,指定cookie生效的url,默认是path(/),在普路径下还见效。

  domain,指定域名访问。

   secure=False,httponly=False部分安全操作,httponly只能自Http请求被传播,js代码无法取到(抓包依然可以获得),secure是控制Https操作。

  cookie签名(类似加盐)

obj.set_signed_cookie('ticket',"123123",salt='jjjjjj')
request.get_signed_cookie('ticket',salt='jjjjjj')

   xss攻击

  xss就是于网页评论等input框里,写入js语句,从而决定得后台cookie等操作。django默认是好阻碍xss攻击的。

  但是我们有时候要要运用及传播html语句的。

图片 9图片 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>评论</h1>
    {% for item in msg %}
        <div>{{ item|safe }}</div>
    {% endfor %}
</body>
</html>

|safe 可以生效

图片 11图片 12

def test(request):
    from django.utils.safestring import mark_safe
    temp = "<a href='http://www.baidu.com'>百度</a>"
    newtemp = mark_safe(temp)
    return render(request,'test.html',{'temp':newtemp})

后端导入mark_safe

  如果你开了操作放行了xss,那么您势必要是当后台做了滤来管你的安全。

图片 13图片 14

def comment(request):
    if request.method == "GET":
        return render(request,'comment.html')
    else:
        v = request.POST.get('content')
        if "script" in v:
            return render(request,'comment.html',{'error': '小比崽子还黑我'})
        else:
            msg.append(v)
            return render(request,'comment.html')

过滤掉关键字

   CSRF

  简单的吧即使是在页面生成随机字符串来提携确认用户位置的(用户下同样赖登陆就会见带在这字符串)。

  django默认开启了CSRF功能,在页面写上{% csrf_token
%},浏览器就见面渲染成

图片 15图片 16

<input type="hidden" name="csrfmiddlewaretoken" value="HJ5pKbvzGcCMeBYSm37ceuTXraBe6ZTi5xS2d0desCTU9iglNcIBtTEIdYVY28Bp">

csrf

  同时,在cookie中吗生是字符串。

  要惦记全栈都禁用csrf就使以settings.py中一直注释掉。

  局部禁用csrf要运装饰器@csrf_exempt:

图片 17图片 18

            from django.views.decorators.csrf import csrf_exempt

            @csrf_exempt
            def csrf1(request):

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

一部分禁用

  局部使用,全局下一旦忍受用,只于运用的函数前加装饰器@csrf_protect:

图片 19图片 20

            # 'django.middleware.csrf.CsrfViewMiddleware',

            from django.views.decorators.csrf import csrf_exempt,csrf_protect

            @csrf_protect
            def csrf1(request):

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

有的使用

  CBV添加装饰器的点子

CBV:
    from django import views
    from django.utils.decorators import method_decorator

    @method_decorator(auth,name='dispatch')
    class Order(views.View):

        # @method_decorator(auth)
        # def dispatch(self, request, *args, **kwargs):
        #     return super(Order,self).dispatch(request, *args, **kwargs)

        # @method_decorator(auth)
        def get(self,reqeust):
            v = reqeust.COOKIES.get('username111')
            return render(reqeust,'index.html',{'current_user': v})

        def post(self,reqeust):
            v = reqeust.COOKIES.get('username111')
            return render(reqeust,'index.html',{'current_user': v})

图片 21图片 22

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

@method_decorator(csrf_protect,name='dispatch')#name是使用的函数名
class Foo(View):

    def get(self,request):
        pass

    def post(self,request):
        pass

CBV禁用csrf

   如果网站发出csrf,那么向后大发Ajax时为亟须使将csrf传到后台。除了将标签里之input中之csrf以data传到后台,还足以经cookie的艺术传送。

图片 23图片 24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <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>{#  jQuery简单获取cookie的插件#}

    <script>
        function submitForm(){
            var token = $.cookie('csrftoken');
            var user = $('#user').val();
            $.ajax({
                url: '/csrf1.html',
                type: 'POST',
                headers:{'X-CSRFToken': token},//只能放在请求头里传到后台,X-CSRFToken名字不能改
                data: { "user":user},
                success:function(arg){
                    console.log(arg);
                }
            })
        }
    </script>
</body>
</html>

cookie传递csrf的值

  $.cookie(‘csrftoken’)可以收获到cookie的价,还足以装cookie的值$.cookie(‘csrftoken’,’123123’),cookie的价值还可是多。

  admin管理

  django自带了数据库后台管理,我们运用

python manage.py createsuperuser

  设置用户账号以及密码便可登陆进后台。

  操作的表要在admin.py中注册:

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

   MVC与MTV

  这两者其实是一个定义,MVC是models(数据库,模型),views(html模板),controllers(业务逻辑处理)。而MTV则是更换了单称呼models(数据库,模型),templates(html模板),views(业务逻辑处理)。django使用的哪怕是MTV的逻辑。

  django的生命周期

  web框架之本来面目是socket,我们下的django从本质上上的话是wsgi(wsgiref模块或其它wsgi模块)与django两部分构成。

Wsgi+Django
    from wsgiref.simple_server import make_server


    def RunServer(environ, start_response):

        Django框架开始
        中间件
        路由系统
        视图函数
        。。。。。

        start_response('200 OK', [('Content-Type', 'text/html')])


        return [bytes('<h1>Hello, web!</h1>', encoding='utf-8'), ]


    if __name__ == '__main__':
        httpd = make_server('127.0.0.1', 8000, RunServer)
        httpd.serve_forever()

  中间件

图片 25图片 26

from django.utils.deprecation import MiddlewareMixin
from django.shortcuts import HttpResponse
class M1(MiddlewareMixin):
    def process_request(self,request):
        print('m1.process_request')

    def process_view(self, request, callback, callback_args, callback_kwargs):
        print('m1.process_view')
        # response = callback(request,*callback_args,**callback_kwargs)
        # return response

    def process_response(self,request,response):
        print('m1.process_response')
        return response

    def process_exception(self, request, exception):
        print('m1.process_exception')

    def process_template_response(self,request,response):
        """
        视图函数的返回值中,如果有render方法,才被调用
        :param request:
        :param response:
        :return:
        """
        print('m1.process_template_response')
        return response

缔造中件

  创建了在安排中注册即可见效。process_request与请求信息相关,若定义返回值,则直接下中间件的response返回。process_view与视图有关,若发生返值,直接跨越了剩下的中间件的process_view函数,从最后一个response返回,process_exception,出错时才见面沾,并且越了之后有所process_exception,从最终一个response返回。process_response有归值,并且一直从最后一个response返回。

图片 27图片 28

class JSONResponse:
    def __init__(self,req,status,msg):
        self.req = req
        self.status = status
        self.msg = msg
    def render(self):#有render方法才能触发
        import json
        ret = {
            'status': self.status,
            'msg':self.msg
        }
        return HttpResponse(json.dumps(ret))

def test(request):
    return JSONResponse(request,True,"错误信息")

process_template_response

   中间件是以对负有请求或局部告做批量甩卖的。

相关文章