BBS项目复习

注册功能
forms组件
models是models forms是forms 二者没有任何关系
只是咱们认为用forms组件校验models里面的数据

一般是用来校验模型表的数据   ModelForm
        1.渲染标签
        2.校验数据
        3.展现信息
    from django import forms
    class MyForm(forms.Form):
        username = forms.CharField(...)
        
    将数据当作字典传入类中
    is_valid()  校验数据多传不校验少传默认下不行的 
    cleaned_data
    errors
    
    渲染标签三种方式(render渲染)
        form_obj = MyForm()  # get请求和post变量名必须是同样的
        if request.method == "POST":
            form_obj = MyForm(request.POST)
        return render(request,'...html',locals())

        1.{{ form_obj.as_p }}
        2.{{ form_obj.username.label }}{{ form_obj.username }}
        3.{% for foo in form_obj %}
                {{foo.label}}{{foo}}
                {{foo.errors.0}}
            {%endfor%}
    钩子函数
        
    
注册功能
    1.利用forms组件渲染前端页面
        1.局部钩子 校验用户名是否存在
        2.全局钩子 校验密码是否一致
    2.本身写前端获取用户头像
        1.利用label标签可以自动指向指定的input
        2.将img标签放入了label标签中，将默认的type=file框隐藏了
    3.用户选择头像以后动态展现出来
        """
        img标签的src的值
            1.图片的路径地址
            2.图片的二进制数据
            3.后端url
        """
        1.利用ajax给input绑定了一个change事件
        2.利用内置对象FileReader读取文件 
            var fileReader = new FileReader();
            var fileObj = $('input[type="file"]')[0].files[0];
            # 交给文件阅读器读取文件内容
            fileReader.readAsDataURL(fileObj)  # 异步操做
            # 等待文件阅读器读取完毕
            fileReader.onload = function(){
                $('#img_avatar').attr('src',fileReader.result)
            }
        3.利用ajax提交post请求
            1.当用户点击提交按钮你须要作的事
                1.利用form标签的内置的可序列化方法将普通获取用户输入的文本框键值对自动获取出来
                $('#myform').serializeArray()  # 获取到的是一个数组内部是一个个自定义对象
                2.利用each循环循环取出自定义对象里面的键值对(username,password,confirm_password,email,csrfmiddlewaretoken)
                3.既要传文件有要传数据 利用内置的FormData对象
                    循环普通键值对
                    var formData = new FormData();
                    formData.append('','')
                    # 添加文件数据
                    formData.append('my_avatar',$('input[type="file"]')[0].files[0])
                4.发送formdata类型的数据  应该考虑 先后端传输数据的编码格式
                    ps:1.urlencoded(form与ajax默认的提交数据编码格式)，2.formdata，3.application/json
                    
                    data:formData
                    contentType:false,
                    processData:false,
                
        4.post请求后端逻辑
            1.将reuqest.POST中的数据直接交给forms组件校验
            2.若是校验经过 cleaned_data   ps:在存储数据的时候models.Userinfo.objects.create(username='',password='')
            3.向将多余的键值对的去除 将文件键值对手动添加进去
            4.直接将字典打散传入 
            
            
            5.当数据校验不经过 返回错误信息
                错误信息(form_obj.errors)以json的形式返回给ajax的回调函数
                forms组件在渲染input框的时候 id值有固定格式   id_字段名
            6.回调函数中利用each循环手动拼接input框的id值
                将错误渲染到对应的input下面的span标签中
            7.健壮性功能  用户再次输入的时候 将报错信息移除
                $('input').focus(function(){
                    $(this).next().html('').parent().removeClass('has-error')
                })
        

登录功能
    1.手动搭建获取用户登陆的前端页面 用户名 密码 验证码
    
    2.验证码功能
        ps:利用的是img标签src属性可以支持后端url书写 自动访问该url
        1.直接将后端一个图片以二进制形式发送
        2.利用pillow模块 动态生成图片
            pip3 install pillow
            from PIL import Image,ImageDraw,ImageFont
            # 生成图片Image.new('RGB',(280,40),'red')/Image.new('RGB',(280,40),(255,255,255))
            # 生成画笔对象 将生成好的图片对象传入ImageDraw.draw(img_obj)
            # 生成字体对象 将字体文件(.ttf)和字体大小传入ImageFont.truetype(字体文件,字体大小)
            
            # 如何生成随机验证码
            ps:chr,ord
            import random
            code = ''
            for i in range(5):
                upper_str = chr(random.randint(65,90))
                lower_str = chr(random.randint(97,122))
                random_int = str(random.randint(0,9))
                # 随机获取上面的一个   写到图片上
                res = random.choice([upper_str,lower_str,random_int])
                draw_obj.text((20+i*45,20),res,get_random(),font_obj)
                code += res
            # 须要将验证码存入session中以便后续的校验
            request.session['code'] = code
            """
            1.自动生成一个随机字符串
            2.将键值对存入django本身建立session表中
                ps:django session默认的超时时间 两周 
            3.将生成好随机字符串返回给浏览器保存
            """
            
    3.ajax提交数据
        1 先校验验证码是否一致
        2 在校验用户名和密码是否正确(auth模块自动auth.authenticate(username='',password=''))
        3.登录成功以后记录用户状态 auth.login(request,user_obj)
            

主页
    1.将网站全部的文章都展现出来
        借助于django admin快速录入数据
            1.createsuperuser
            2.将须要操做的模型表注册到对应的应用下的admin.py文件中
                admin.site.register(models.Userinfo)
            3.录入数据的时候 关系绑定必定要考虑周全
                eg:用户与我的站点你得手动去绑定
    2.网站用的静态的资源默认放在static文件夹下
        用户上传的静态文件应该单独再开一个文件夹存放(media)
    
    3.去settings.py中配置路径
        MEDIA_ROOT = os.path.join(BASE_DIR,'media')
        # 用户上传的文件就会自动方法media文件夹
    
    4.将media文件夹暴露给用户
        手动开路由
        from django.views.static import serve
        from BBS import settings
        url(r'^media/(?P<path>.*)',serve,{'document_root':settins.MEDIA_ROOT})
    5.media配置能够暴露后端任意文件夹中的资源

我的站点
    1.展现的是当前用户本身写的全部文章
    2.侧边栏展现
    
        article_list  # 当前用户全部的文章
        1.文章标签
            # 查询当前用户下的每个标签及标签下的文章数
            models.Tag.objects.filter(blog=blog).annotate(c=Count('article__id')).values_list('c','tag_name')
        2.文章分类
            # 同上 理
        3.日期归档
            # 参考的是官方文档
    3.侧边栏筛选功能
        1.视图函数 共用site
            url(r'^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<params>.*)/',views.site)
        2.site视图函数形参修改
            site(request,username,**kwargs)
        3.基于当前用户全部的文章再作一层筛选 利用queryset对象能够无限制的调用queryset方法
            1.判断kwargs有没有值
            2.获取kwargs里面的值
                condition = kwargs.get('condition')
                params = kwargs.get('params')
            3.判断condition从而决定按照什么条件筛选
                category_id
                tag__id
                基于双下滑线 __year,__month
                
文章详情
    1.模板继承 须要解决侧边栏展现的问题
    2.自定义inclusion_tag
        from django.template import Library
        register = Library()
        
        @register.inclusion_tag('left_menu.html')
        def left_menu(username):
            # 将我的站点视图函数中侧边栏相关代码直接拷贝过来 须要什么补什么
            ...
    3.使用 {% load my_tag %}   {% left_menu username %}
    4.点赞点踩
        1.拷贝博客园样式(html+css)
        2.给赞和踩设置一个公共的类属性 而后给这个类属性绑定点击事件
        3.经过$(this).hasClass()判断用户点击的是赞仍是踩
        4.ajax发送
        5.后端接收
            1.is_up是一个字符串形式的js布尔值类型
                你能够利用json直接转成python布尔值
            2.首先判断当前全球是不是ajax全球
            3.判断用户是否登录request.user.is_authenticated()
            4.判断当前文章是不是当前用户本身写的
                根据前端传过来的id值 查询出对应的文章对象
                文章对象获取用户对象跟request.user比较
            5.判断当前文章是否已经被当前用户点过
                只须要去点赞点踩查数据 若是有值就意味着 点过
                没有 就没有点过
            6.数据库操做
                文章表里面的普通字段
                        根据is_up判断是up_num仍是down_num更新
                点赞点踩表记录数据
                        user 
                        article
                        is_up
        6.前端渲染成功或者失败的信息
            若是点赞点踩成功 你应该讲 对应的数字加1  注意数字应该先转成number类型再加一
            若是错误 找到span标签 将信息填入便可
    5.评论
        1.根评论
            1.前端页面搭建(参考博客园样式)
            2.给提交按钮绑点击事件
                1.将用户评论内容 当前文章id 发送给后端
                2.判断是否登录(login_required)
                    局部和全局配置
                    @login_required(login_url='/login/')
                    LOGIN_URL = '/login/'
                3.判断是否ajax请求
                4.利用事务
                    """事务四大特性:ACID"""
                    from django.db import transaction
                    with transaction.atomic():
                        # 事务操做
            3.渲染评论楼
                render渲染
                    查询当前文章全部的评论 
                    前端循环展现
                        forloop
                            counter0
                            counter
                            first
                            last
                        
                DOM临时渲染
                    利用ecs6新语法 模板字符串
                    var userName = 'jason'
                    `my name is ${userName}`
            
            
            
            
            
        2.子评论
            1.parent字段设置的是null=True 因此在建立数据的时候该字段传None也不会有问题
            2.点击回复按钮要作的事情
                1.将回复按钮对应的评论的人名渲染到textarea中
                    @人名
                2.textarea自动聚焦 并换行
                    $('input').focus()
                ps:将评论对应的用户名和评论id存到了回复按钮
                3.将全局parentID设值
                
            3.每次提交成功成功将parentId再次清空
            4.将子评论中的@人名文本去除
                1.前端利用slice去除
                2.后端
            5.render渲染子评论
                1.判断当前评论对象是否有parant
                2.跨表查询 利用parent跨本身查根评论的用户名
    
6.后台管理
    1.只有登陆的用户才能看到本身的后台管理
    2.罗列出当前用户写的全部的文章
    3.添加文章
        """
        XSS攻击
        文章简介
        """
        1.kindeditor编辑器
        2.直接利用form表单发送post请求
        3.文章标题 文章内容  文章简介
            1.利用bs4模块
            from bs4 import Beautifulsoup
            res = Beautifulsoup(content,'parser.html')
            res = res.find_all()
            for tag in res:
                print(tag.name)
                if tag.name == 'script':
                    tag.decompose()
            desc = res.text[0:150]
            models.Article.objects.create(...content=str(res))
    4.上传图片   去文档里面找指定方法
    
    5.编辑
    6.删除
    
7.用户头像修改
    若是用queryset的update方法 不会自动拼接avatar前缀
    可使用对象点的方式修改