码迷,mamicode.com
首页 > 编程语言 > 详细

Django入门(三)   前端模版语言

时间:2016-03-09 19:28:19      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:django(三)

    经过前面两节的讲解,我们现在已经可以通过引入外部的样式对我们的html页面进行装饰了。但是不论我们再如何装饰,发布出来的html也只是个静态的页面。比如我们现在需要每次页面刷新的时间都在页面上展示出来。静态页面的内容都是写死的,那现在我们尝试用动态的的语言来实现我们的功能。


django中实现动态页面需要从两个地方进行处理:

1、应用文件夹app01中的views.py要修改index()函数的内容定义要传给html页面的变量内容

2、在html页面代码中加入jinja格式的动态脚本语言,将index()函数里变量内容引入html页面里(Django实现这个功能其实用的就是jinja2这个包)


先简单介绍一下jinja2的动态语言语法。目前常用的其实就是实现for循环和if else判断了。在python中如果要用for方法遍历一个列表的话,代码如下:

li=[1,2,3]
for i in li:
    print i

如果用jinja实现这个循环列表,那么语法就变成了

{% for i in li %}
    <h1>{{ i }}</h1>
{% endfor %}

因为html没哟print语法,所以输出的时候加了个<h1>标签。

if的python方法就不写了,直接写jinja的语法了

{% if x == 1 %}
    <h1>1234</h1>
{% else %}
    <h1>5678</h1> 
{% endif %}

 从上面的语法可以看出来,其实jinja的判断语句格式python很像。在只是在判断语句两边添加了 {% %} 这个标识。另外在最后的结束的时候还要写上关闭符{% endxx %}。变量用双大括号{{ i }}来包裹。但是不管是列表li还是变量x都是由views.py里的index()传进去的。下面我们来编写一个完整的代码

先修改views.py文件里的index()

views.py

from django.shortcuts import render
import time
# Create your views here.
def index(request):
    # 将获取的当前时间格式化后赋值给now_time
    now_time = time.strftime(‘%Y-%m-%d %H:%M:%S‘)
    # 建立一个字典,将要传给html的变量作为key值,变量的内容作为value值
    index_dic = {
        ‘li‘: [‘haha‘, ‘hehe‘, ‘heihei‘],
        ‘x‘: 2,
        ‘now‘: now_time
               }
    # 将字典导入render方法
    return render(request, ‘index.html‘, index_dic)

在修改templates目录下index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/commons.css">
</head>
<body>
{#    所有展示的内容居中显示#}
    <div style="text-align: center">
{#        标签内容用红色字体显示#}
        <p style="color: red;">this is list</p>
{#        循环遍历列表li#}
        {% for i in li %}
            <h4>{{ i }}</h4>
        {% endfor %}
        <p style="color: red;">this is if else</p>
{#        if else 循环#}
        {% if x == 1 %}
            <h4>1234</h4>
        {% else %}
            <h4>5678</h4>
        {% endif %}
{#        输出页面被刷新的时间#}
        <h1>Now time {{ now }}</h1>
    </div>
<script type="application/javascript" src="/static/js/jquery-2.2.1.min.js"></script>
<script type="application/javascript" src="/static/plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

最后查看网页的运行效果

技术分享


到这里,我们就可以结合python把我们想要的内容通过前端脚本语言呈现给用户了。




本文出自 “霹雳豆包” 博客,谢绝转载!

Django入门(三)   前端模版语言

标签:django(三)

原文地址:http://830909.blog.51cto.com/8311014/1749080

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!