Django前端自定义标签-前后端不分离

对前端页面中显示的一些内容，可以不在后端代码中进行处理，直接用前端自定义标签达到处理要显示在前端的数据的目的

比如：想要对返回在前端页面中的文章描述长度做一些处理，如果太长就不予显示。那么，不需要在views中对查到的所有数据进行逐一判断，可以只在前端页面显示文章描述的地方进行自定义处理

1，首先在子项目目录下新建名为templatetags(固定的名字) 的python package ,再创建一个py 文件比如 my_tag.py

my_tag.py

 1 from django import template
 2 register=template.Library()
 3 # 这些都是写死的
 4 @register.filter
 5 # 这个最多只能有两个参数
 6 def test(s,length=5):
 7     if len(s)>length:
 8         s=s[:2]+'...'
 9     return s
10 
11 @register.simple_tag
12 # 这个可以有很多参数
13 def test2(s,length,str):
14     if len(s)>length:
15         s=s[:2]+str+'...'
16     return s

2，在前端页面中如何使用

1 {% load my_tag %}
2 {#导入自定义前端标签的文件#}

1                  <p>{{ article.desc | test:5 }}</p>
2 {#                        第一种用法           {{   参数|函数名：第二个参数}}#}

1                   <p>{% test2 article.desc 5 '111' %}</p>
2 {#                    第二种用法 {% 函数名 参数1 参数2 参数3 %}#}

3,有django自带的函数，不需要自己写register,可以直接使用

 1 {{ s.0 }}
 2 取列表下标为0的元素
 3 {{ s|length }}
 4 取长度
 5 {{ s|slice: "0:2" }}
 6 切片
 7 {{ s|join:"-"}}
 8 join 以什么来拼接
 9 {{ s|default:"admin" }}
10 如果为空，返回一个默认值
11 {{ s|date:"Y-m-d H:i:s" }}
12 时间格式
13 {{ s|truncatechars:20 }}
14 切片
15 {{ s|add:2 }}
16 数字比如年龄增加2岁
17 {{ s|add:"先生" }}
18 比如名字后面增加 先生
19 {{ s|upper }}
20 转换成大写
21 {{ s|lower }}
22 转换成小写
23 {{ s|safe }}
24 该字符被认为是安全的。如果这样写，会引起xss注入

4,关于xss注入

如果在前端比如有用户输入框的地方，用户输入了一些css或者js代码，会改变前端页面的布局，甚至会有安全隐患

现在浏览器默认是防范的，不会出现问题，如果使用了safe函数，就表明这个数据是安全的，那么浏览器就会按照用户输入的标签等内容去显示

比如，在views中返回的数据是这样一个标签：

1 def test(request):
2     s='<h1 style="color: red; font-size: 10px" >11111111</h1>'
3     return render(request,'test.html',locals())

在前端页面中用了safe

1 {{ s|safe }}

那么浏览器中就会显示这个h1的样式

Django前端自定义标签-前后端不分离

猜你喜欢