BBS little doubt that point and project solutions (continually updated)

1. Python installed library using requirement.txt

Today chance to see this document, but they forget is doing, so he checked, and now make a brief summary of

First you have to understand python is a transfer package Xia, so when you import the third package, you need to set the necessary environment and related components, based on this, the document appeared.

The file name suggests, the record is all dependent packages and their precise version numbers, so that when deploying the new environment will be a lot easier, such as: requests == 1.2.0 Flask == 0.10.1

See this blog specific use Python project generated requirement.txt

2. Field of the difference between the blank and null

null is for the purposes of the database, if the null = True, indicates that the field database can be empty.
blank against the form, if blank = True, the form that you fill in this field when you can not fill, such as adding a record time model under admin interface. Visually see that the field is not bold
Popular point that, after the field is null = true, you insert, when modifying operation may be empty, then Django convert null to null exists in the database, but only in a blank form validation time if you can detect empty

Reference [ distinction on Django field type of blank and null ]

3. auth_now_add和auth_now

auto_now_add = is time to add, there will be no change when updating the object to True.

auto_now = True Whether you add or modify an object, add or modify the time for your time

4. label tag

<label for="{{ foo.auto_id }}">{{ foo.label }}</label> {{foo}}

This is for the inside with the id, the id tag will be able to bind foo, click on the corresponding label text (ie foo.label) can be selected foo objects

5. A method of binding change

'''
应用场景：
    元素的值发生改变时就会触发该方法，里面写一个回调函数，触发该方法时就会执行函数里面的方法。
'''

#代码：
    
    $("input").change(function){
        alert('文本已被修改')
    }
    
#当我修改input框里面的文本时，就会弹出框，提示文本已被修改的信息。

#注意：

'''
    当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
'''

6. File Viewer (onload event and attr () method)

'''
应用场景：
    在上传用户头像时，我们希望在选择文件后，把当前的文件换成我选中的文件，用到change方法，然后我们
    需要把选中的文件放到前端页面中展示出来，于是就应用了文件阅读器
'''

#文件阅读器的核心代码
    $('#myfile').change(function () {
        // 文件阅读器
        //1 产生一个文件阅读器对象
        var fileReader = new FileReader(); 
        //2 获取用户上传的文件
        var fileObj = $(this)[0].files[0]; #当前jq对象,[0]取原生js对象，再取文件列表，进而取文件
        //3 让文件阅读器读取该文件
        fileReader.readAsDataURL(fileObj);  // 这一步是异步 提交完之后直接运行下一行
        //4 利用文件阅读器将文件展示出来
        #此处有一个问题，就是上一步因为是异步，所以有可能还没完全读取文件之后，就执行下一步展示文件信息了，这样就可以加onload事件，在页面完全加载完（文件读取完）之后，执行显示文件操作
        fileReader.onload = function () {
            $('#myimg').attr('src', fileReader.result)
        }
        #这里加了一个attr方法，就是说，当页面加载完成之后，会把选择的文件结果（是个相对路径),加到myimg标签的src中,这样就能实现，选中文件的前端显示
    });




##############
##onload方法##
##############

'''
用法：
    onload 事件会在页面或图像加载完成后立即发生。
    onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
'''

'''
语法：
    在 HTML 中:<body onload="SomeJavaScriptCode">
    在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};
    
    

参数SomeJavaScriptCode是必需的。规定该事件发生时执行的 JavaScript。
'''

#举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试onload</title>
<script>
function myFunction(){
    alert("页面加载完成");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

#页面加载完成后，弹窗显示页面加载完成，然后显示hello world!



###########
##attr方法##
###########

'''
用法：
    attr() 方法设置或返回被选元素的属性值，可以加一个参数，多个参数，函数等
'''

'''
实例：
    点击button按钮，图片的宽度变为180
'''
    $("button").click(function(){
      $("img").attr("width","180");
    })
    
详细介绍请见：
    https://www.w3school.com.cn/jquery/attributes_attr.asp

7. difference and click on events

element.click () does not support such an approach to dynamic binding element or style event. Support for dynamic element binding events is .live () and .on (). live after jQquery1.7 not recommended for use. When using .on () Note that, on the front of the DOM elements must exist on the inside when the page is loaded.

See demo code difference and click on events

8. jq in each () method

Small example:

var arr=[1,2,3,4];
$.each(arr,function(i,n){
    alert("索引"+i+"对应的值"+n);
});

#这个的意思是说，对arr进行循环遍历，然后在提示框中打出索引值i 和对应的值n

Project examples:

    $.each($('#myform').serializeArray(),function (index,obj) {
            formDataObj.append(obj.name,obj.value)
        });
    
    
#这句话的意思是，首先自动把input框中的输入数据取到并得到不同的键值对的大字典（serializeArray做的事），再对这个字典进行遍历，遍历一次，就会在formDataObj中加入一个键值对{obj.name:obj.value}

Error information obtained background hook function 9. ajax get and display the logic

##展示错误信息

$.each(data.msg,function (index,obj) {
                       # index就是一个个的报错字段名  obj就是数组 里面是报错信息
                       # 手动拼接对应的input框的id值
                        var targetId = '#id_' + index;
                       # $('#id_username') $('#id_password')
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                        ###当前input框的下一个标签（span）,在里面把错误信息（即数组的第一个值）加进去，再在它的父标签加一个已经存在错误信息的类（用于后面，聚焦该输入框后，把该类去除掉）
                    })


##取消错误信息

 $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
##鼠标聚焦到输入框，取它下面的span标签，然后把内容置空，再把父类的错误信息类去掉