day01

目录

• 笔记记录：
  • 头像上传
  • ajax 提交数据
  • 获取焦点事件：

笔记记录：

1.AJAX 提交POST 请求数据： 模板语法！！
data:{'csrfmiddlewaretoken':'{{ csrf_token }}' }
# 前端参数如果没有起作用 你可以尝试着给参数加一个引号

2.项目数据表个创建：

流程：1.先确定表名
	 2.确定字段
      3.确定表关系

3.表关系 ： 自关联表关系
  --eg: 评论区内包含子评论
parent   : 跟自己所在的表外键关联（一对多）
parent = models.ForeignKey(to='self',null=True)  # 语义更明确

4.创建表内的字段：
avatar = models.FileField(upload_to='avatar/',default='')
# 该字段你直接传文件即可 会自动将文件保存到avatar文件夹下  然后数据库里面存文件路径 （默认一个文件路径）

上传文件(文件，图片，音频，视频) --》默认文件夹

5.数据库：
在mysql的命令模式下，输入：同步数据库
set global time_zone='+8:00';


6.前端each() :
    --$.each()是对数组，json和dom结构等的遍历
    --通过$.each() 提取相关数据，添加到数组中
    {{each(i, card) data}} i 相当于for 循环中的递增变量， card 是迭代变量，data是传入的json数据
   
  
7.前端change():
    --具有改变的意思，change事件会在元素数据发生变化的时候触发
    
8.ajax发送文件时：
发送文件一定要指定两个参数
  processData:false,  // 不要让浏览器处理你的数据
  contentType:false,  不要使用任何的编码  django能够识别对象自身

头像上传

<script>
    $('#mdd').on('change',function () {
        // 需要利用内置对象 FileReader完成文件的读取操作
        let MyFileReader = new FileReader();
        // 获取用户上传的文件对象
        let fileObj = $(this)[0].files[0];
        // 让文件阅读器 读取文件
        MyFileReader.readAsDataURL(fileObj);  // IO操作   异步
        // 将读取之后的内容替换到img标签src属性中
        MyFileReader.onload = function(){  // 等待文件阅读器读取完毕之后再执行下面的代码
             $('#img').attr('src',MyFileReader.result)
        }
    });

#头像上传

ajax 提交数据

  // 提交按钮
    $('#submit').click(function () {
        // 将用户输入的数据全部发送给后端     普通的键值对   文件
        let MyFormData = new FormData();
        // 不停的朝里面添加键值对
        {#MyFormData.append('','')#}
        {#console.log($('#myform').serializeArray())#}
        // 普通键值对添加完毕 （利用form标签内部有一个自动序列化普通键值对方法）
        $.each($('#myform').serializeArray(),function (index,obj) {
            MyFormData.append(obj.name,obj.value)
        });
        // 手动添加文件数据
        MyFormData.append('avatar',$('#mdd')[0].files[0]);
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            // 发送文件一定要指定两个参数
            processData:false,  // 不要让浏览器处理你的数据
            contentType:false,  // 不要使用任何的编码  django能够识别对象自身

            success:function (data) {
                if (data.code == 1000){
                    // 跳转到登录页面
                    window.location.href = data.url
                }else{
                    $.each(data.msg,function (index,obj) {
                        // {#console.log(index,obj)#} index就是报错字段  obj就是错误信息 数组的形式
                        // 获取报错字段  手动拼接处该字段所对应的input框的id值
                        let targetId = '#id_' + index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                    })
                }
            }
        })

#ajax 提交前端客户输入的键值对 和 文件
      对后端与前端校验后的结果，做出响应

获取焦点事件：

// input框获取焦点事件
    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
    
 $(this)[0].files[0]

#获取或删除 input 样式的属性 
#获取input 框内文件的内容