前端以及django零碎补充

末鹿安然 提交于 2020-02-13 16:02:15

前端

1. js的循环each

前端需要循环,可以借助each这个方法

复制代码
var dic = {'key1':'value1','key2':'value2'};
var lis = ['1','3','2'];
//each(变量, 方法)
$.each(lis, function (index, obj) {
    console.log(index, obj)
})
// 如果传入的变量是对象object(字典),那么方法中的index,和value分别是key和value
    //key1 value1
    //key2 value2
//如果传入的变量是数组array(列表) , 那么方法中的index和value分别是索引和对应的值
    // 0  '1'
    // 1  '3'
    // 2  '2'
复制代码

 2. 快速获得form标签下的普通输入标签的内容  serializeArray

// serializeArray 方法可查看出form表单下面普通输入框的标签的内容,选择提交标签不行
res = $('#id_form').serializeArray();
console.log(res)

获得的标签内容,分别是name和value的值

3. img标签中src可输入的三种方式

  a. 可以直接输入绝对路径

  b. 可以输入url

  c. 可以输入图片的二进制文件  (FileRead)

下面为前端input获得图片文件对象然后渲染到其他img标签上的步骤

复制代码
// 首先,对于一个input标签, 我们想要获得他的文件,首先需要拿到他的js对象
// 然后,.file拿出文件数组,索引0取出文件对象
var file_obj = $('input')[0].file[0];
// 生成文件阅读器
var fileReader = new FileReader();
// 把文件对象放到文件阅读器中 readAsDataURL
fileReader.readAsDataURL(file_obj);
// 拿出结果
res = fileReader.result
//res 放到img标签的src属性中,就可以渲染出图片了
复制代码

 

django

1. 上传访问静态文件meida配置

在settings中

# 在settings中配置用户默认上传的文件夹
# 规定用户上传的静态资源同意放到media文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在urls中

复制代码
# 首先需要导入serve 和 settings.py
from django.views.static import serve
from testbbs import settings
# urls编辑时

# 向用户开放静态资源的文件夹, 固定写法, 可以公开任意文件夹
url(r'^media/(?P<path>.*)/',serve, {'document_root':settings.MEDIA_ROOT}),
# 如果把MEDIA_ROOT改成app01的话,那么app01就会向用户公开,千万不能公开源代码
# url(r'^app01/(?P<path>.*)/',serve, {'document_root':settings.MEDIA_ROOT}),
复制代码

2. inclusion_tag

如果有一些html小组件,需要渲染之后再返回,可以使用inclusion_tag

1. 首先再app文件夹下创建templatetags文件夹

2. 然后在文件夹中随意创建py文件

3. py文件中需要写出指向组件html的函数

复制代码
from django.template import Library

# 导入Library 实例化出固定的register
register = Library()

# inclusion_tag中指定组件html
@register.inclusion_tag('base.html')
def func(parameter):
    
    # 把组件中需要的参数返给他,locals 或者 大字典 都行
    return locals() 
复制代码

4. 在需要的地方加载inclusion_tag并传参,就能获得组件html代码

//load 加载我们自定义的py文件
{% load mytemplate %}
//使用inclusion_tag
//直接函数名 参数1 参数2
{% func 参数 %}

 

前端

1. js的循环each

前端需要循环,可以借助each这个方法

复制代码
var dic = {'key1':'value1','key2':'value2'};
var lis = ['1','3','2'];
//each(变量, 方法)
$.each(lis, function (index, obj) {
    console.log(index, obj)
})
// 如果传入的变量是对象object(字典),那么方法中的index,和value分别是key和value
    //key1 value1
    //key2 value2
//如果传入的变量是数组array(列表) , 那么方法中的index和value分别是索引和对应的值
    // 0  '1'
    // 1  '3'
    // 2  '2'
复制代码

 2. 快速获得form标签下的普通输入标签的内容  serializeArray

// serializeArray 方法可查看出form表单下面普通输入框的标签的内容,选择提交标签不行
res = $('#id_form').serializeArray();
console.log(res)

获得的标签内容,分别是name和value的值

3. img标签中src可输入的三种方式

  a. 可以直接输入绝对路径

  b. 可以输入url

  c. 可以输入图片的二进制文件  (FileRead)

下面为前端input获得图片文件对象然后渲染到其他img标签上的步骤

复制代码
// 首先,对于一个input标签, 我们想要获得他的文件,首先需要拿到他的js对象
// 然后,.file拿出文件数组,索引0取出文件对象
var file_obj = $('input')[0].file[0];
// 生成文件阅读器
var fileReader = new FileReader();
// 把文件对象放到文件阅读器中 readAsDataURL
fileReader.readAsDataURL(file_obj);
// 拿出结果
res = fileReader.result
//res 放到img标签的src属性中,就可以渲染出图片了
复制代码

 

django

1. 上传访问静态文件meida配置

在settings中

# 在settings中配置用户默认上传的文件夹
# 规定用户上传的静态资源同意放到media文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在urls中

复制代码
# 首先需要导入serve 和 settings.py
from django.views.static import serve
from testbbs import settings
# urls编辑时

# 向用户开放静态资源的文件夹, 固定写法, 可以公开任意文件夹
url(r'^media/(?P<path>.*)/',serve, {'document_root':settings.MEDIA_ROOT}),
# 如果把MEDIA_ROOT改成app01的话,那么app01就会向用户公开,千万不能公开源代码
# url(r'^app01/(?P<path>.*)/',serve, {'document_root':settings.MEDIA_ROOT}),
复制代码

2. inclusion_tag

如果有一些html小组件,需要渲染之后再返回,可以使用inclusion_tag

1. 首先再app文件夹下创建templatetags文件夹

2. 然后在文件夹中随意创建py文件

3. py文件中需要写出指向组件html的函数

复制代码
from django.template import Library

# 导入Library 实例化出固定的register
register = Library()

# inclusion_tag中指定组件html
@register.inclusion_tag('base.html')
def func(parameter):
    
    # 把组件中需要的参数返给他,locals 或者 大字典 都行
    return locals() 
复制代码

4. 在需要的地方加载inclusion_tag并传参,就能获得组件html代码

//load 加载我们自定义的py文件
{% load mytemplate %}
//使用inclusion_tag
//直接函数名 参数1 参数2
{% func 参数 %}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!