当前位置:   article > 正文

使用Python+Django构建可视化界面(一)_python django可以可视化编写html吗

python django可以可视化编写html吗

一、创建Django项目

  • 使用Pycharm创建Django项目
  • 创建templates文件夹,并创建index.html
  • 将templates目录写入setting.py中
  • 在urls中写入path(“index/”,index.func) #要from kg import index.py
  • 在kg文件夹中建立index.py,实现交互功能,生成前端视图,首先def func函数:传入request,return render(request, ‘index.html’, context) #context为上下文JSON数据,其中内容是生成HTML页面的参数,在HTML页面中可用{{ 参数 }}来获取

二、数据绑定

Django框架采用的是MVC模式,即模型、视图、控制三方面,控制器用于生成HTML视图并返回给前端显示,在这个生成过程中设计一些HTML生成的语法,我们称具有这种语法的中间HTML页面为模板templates

  1. if/else 标签
{% if condition1 %}
   ... display 1
{% elif condition2 %}
   ... display 2
{% else %}
   ... display 3
{% endif %}
//可使用 and or not 等词语
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1. for 标签
<ul>
{% for item in list %}//{% for item in list reversed %}
    <li>{{ item.name }}</li>
{% endfor %}
</ul>
//可使用reversed逆置遍历 支持嵌套
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. ifequal/ifnotequal 标签
{% ifequal section 'sitenews' %}
    <h1>Site News</h1>
{% else %}
    <h1>No News Here</h1>
{% endifequal %}
//可使用reversed逆置遍历 支持嵌套
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 注释标签
{# 这是一个注释 #}
  • 1
  1. include 标签
{% include "nav.html" %}//包含其他html内容
  • 1

三、过滤器

{{ name|lower }} //通过lower处理前方name内容
{{ bio|truncatewords:"30" }} //带参数的过滤器
//其他过滤器
1、add :将value的值增加2。使用形式为:{{ value | add: "2"}}2、addslashes:在value中的引号前增加反斜线。使用形式为:{{ value | addslashes }}3、capfirst:value的第一个字符转化成大写形式。使用形式为:{{ value | capfirst }}4、cut:从给定value中删除所有arg的值。使用形式为:{{ value | cut:arg}}5、date: 格式化时间格式。使用形式为:{{ value | date:"Y-m-d H:i:s" }}
6default:如果value是False,那么输出使用缺省值。使用形式:{{ value | default: "nothing" }}。例如,如果value是“”,那么输出将是nothing
7、default_if_none:如果value是None,那么输出将使用缺省值。使用形式:{{ value | default_if_none:"nothing" }},例如,如果value是None,那么输出将是nothing
8、dictsort:如果value的值是一个字典,那么返回值是按照关键字排序的结果
使用形式:{{ value | dictsort:"name"}},例如,
如果value是:
[{'name': 'python'},{'name': 'java'},{'name': 'c++'},]
那么,输出是:
[{'name': 'c++'},{'name': 'java'},{'name': 'python'}, ]
9、dictsortreversed:如果value的值是一个字典,那么返回值是按照关键字排序的结果的反序。使用形式:与dictsort过滤器相同。
10、divisibleby:如果value能够被arg整除,那么返回值将是True。使用形式:{{ value | divisibleby:arg}},如果value是9,arg是3,那么输出将是True
11、escape:替换value中的某些字符,以适应HTML格式。使用形式:{{ value | escape}}。例如,< 转化为 <> 转化为 >' 转化为 '" 转化为 "
13、filesizeformat:格式化value,使其成为易读的文件大小。使用形式:{{ value | filesizeformat }}。例如:13KB,4.1MB等。
14、first:返回列表/字符串中的第一个元素。使用形式:{{ value | first }}
16、iriencode:如果value中有非ASCII字符,那么将其进行转化成URL中适合的编码,如果value已经进行过URLENCODE,改操作就不会再起作用。使用形式:{{value | iriencode}}
17、join:使用指定的字符串连接一个list,作用如同python的str.join(list)。使用形式:{{ value | join:"arg"}},如果value是['a','b','c'],arg是'//'那么输出是a//b//c
18、last:返回列表/字符串中的最后一个元素。使用形式:{{ value | last }}
19、length:返回value的长度。使用形式:{{ value | length }}
20、length_is:如果value的长度等于arg的时候返回True。使用形式:{{ value | length_is:"arg"}}。例如:如果value是['a','b','c'],arg是3,那么返回True
21、linebreaks:value中的"\n"将被
替代,并且整个value使用</p>包围起来。使用形式:{{value|linebreaks}}
22、linebreaksbr:value中的"\n"将被
替代。使用形式:{{value |linebreaksbr}}
23、linenumbers:显示的文本,带有行数。使用形式:{{value | linenumbers}}
24、ljust:在一个给定宽度的字段中,左对齐显示value。使用形式:{{value | ljust}}
25、center:在一个给定宽度的字段中,中心对齐显示value。使用形式:{{value | center}}
26、rjust::在一个给定宽度的字段中,右对齐显示value。使用形式:{{value | rjust}}
27、lower:将一个字符串转换成小写形式。使用形式:{{value | lower}}
30、random:从给定的list中返回一个任意的Item。使用形式:{{value | random}}
31、removetags:删除value中tag1,tag2....的标签。使用形式:{{value | removetags:"tag1 tag2 tag3..."}}
32、safe:当系统设置autoescaping打开的时候,该过滤器使得输出不进行escape转换。使用形式:{{value | safe}}
33、safeseq:与safe基本相同,但有一点不同的就是:safe是针对字符串,而safeseq是针对多个字符串组成的sequence
34、slice:与python语法中的slice相同。使用形式:{{some_list | slice:"2"}}
37、striptags:删除value中的所有HTML标签.使用形式:{{value | striptags}}
38、time:格式化时间输出。使用形式:{{value | time:"H:i"}}或者{{value | time}}
39、title:转换一个字符串成为title格式。
40、truncatewords:将value切成truncatewords指定的单词数目。使用形式:{{value | truncatewords:2}}。例如,如果value是Joel is a slug 那么输出将是:Joel is ...
42、upper:转换一个字符串为大写形式
43、urlencode:将一个字符串进行URLEncode
44、wordcount:返回字符串中单词的数目
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

四、模板继承

  • 被继承模板可修改部分:
    {% block mainbody %}
       <p>original</p>
    {% endblock %}
  • 1
  • 2
  • 3
  • 引用模板部分:
{%extends "base.html" %}
{% block mainbody %}
<p>pink</p>
{% endblock %}
  • 1
  • 2
  • 3
  • 4
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/164865
推荐阅读
相关标签
  

闽ICP备14008679号