使用Python+Django构建可视化界面（一）_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

2. for 标签

<ul>
{% for item in list %}//{% for item in list reversed %}
    <li>{{ item.name }}</li>
{% endfor %}
</ul>
//可使用reversed逆置遍历 支持嵌套
1
2
3
4
5
6

3. ifequal/ifnotequal 标签

{% ifequal section 'sitenews' %}
    <h1>Site News</h1>
{% else %}
    <h1>No News Here</h1>
{% endifequal %}
//可使用reversed逆置遍历 支持嵌套
1
2
3
4
5
6

4. 注释标签

{# 这是一个注释 #}
1

5. 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" }}
6、default：如果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