zoukankan      html  css  js  c++  java
  • 我的django之旅(二)模板和静态文件

    我的django之旅(二)模板和静态文件

    标签(空格分隔): django


    1.为什么要使用模板

    在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大。模板是一种方便的标签,存在于HTML文件中,我们可以通过模板的语法格式,动态接收服务器发送的数据,再由模板进行渲染。

    2.模板目录的配置

    既然我们要使用模板,那么我们就要有个目录来存放模板。而且为了我们的程序能够搜索到模板,还要对模板目录进行配置。
    (1)在我们的项目目录下新建一个templates文件夹
    (2)在templates下新建rango文件夹(注:rango是我的项目中的一个应用)
    (3)打开settings.py配置我们的模板信息
    方法一:

    TEMPLATE_DIRS=(<workspace>/<projectname>)
    

    虽然我们可以使用绝对路径,但是当我们的项目要运行再其他人的机器上时,workspace的名称可能不一样,这样我们就需要使用动态的路径来表示。url和path这种东西,在我们的开发中切忌写“死”了
    方法二:(推荐)
    在我们的settings.py中有一个名为BASE_DIR的变量,它表示文件所在目录的上级目录,也就是我们的templates文件夹所在目录。
    所以我们新建一个变量TEMPLATE_PATH=os.path.join(BASE_DIR,'templates')
    ps:os.path.join这个函数会将路径相结合,得到的就是BASE_DIR/templates
    好了,现在我们的

    TEMPLATE_DIRS=(TEMPLATE_PATH)
    

    3.添加模板

    万事俱备,就等我们添加一个模板了。这个模板的位置自然就在templates/rango中,新建一个index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Rango</title>
    <h1>rango says</h1>
    hello<strong>{{USERNAME}}</strong>!
    <a href="/rango/about">About</a>
    </head>
    <body>
    </body>
    </html>
    

    这段html代码表示我们对一个user,say hello

    4.修改views.py

    目前,我们的views.py文件中,index函数还不能映射到这个index.html文件。所以要对其进行修改

    from django.shortcuts import render
    

    引入render(渲染)
    新建一个字典变量

    context_dict = {'username': "Liao"}
    return render(request,'rango/index.html',context_dict)
    

    运行

    python manage.py runserver
    

    就可以看到我们的

    helloLiao!
    

    5.静态文件

    前端开发,html,css,js缺一不可。我们虽然能够使用模板开始渲染了,但是还没有使用到css来给网页添加样式,也没有图片,所以得到的只是一个粗糙简单的页面
    (1)在我们的项目中新建static文件夹,在static中再新建images文件夹
    (2)同上面,我们为了让程序搜索到static文件夹,仍然需要在settings.py文件中配置相关变量

    STATIC_PATH = os.path.join(BASE_DIR,'static')
    STATICFILES_DIRS=(STATIC_PATH)
    

    (3)让我们在images文件夹里面悄悄地放一张图片,然后运行程序,
    访问
    http://127.0.0.1:8000/static/images/
    image-name是我们的图片名称,切记要带后缀
    不出意外,我们将会在浏览器上看到这幅图片,如果出错,一般会报404 not found
    仔细检查django的配置文件拼写即可。

    6.结合静态文件和模板

    为了使用静态文件,我们需要再模板首行加上这么一句话

    {% load staticfiles %}
    

    为了显示我们的图片

    <img src="{% static "image/test1.jpg" %}" alt='test picture' />
    

    当中使用到了static,表示我们引用的是一个静态文件。
    同理,当我们要使用js,css等外部静态文件时,也可以使用static,提供路径即可。

    7.总结

    今天学习了模板和静态文件
    1.模板
    (1)在我们的templates文件夹中新建所需的模板,并且在settings.py文件中配置

        TEMPLATE_PATH=os.path.join(BASE_DIR,'tmeplates')
        TEMPLATE_DIRS=(TEMPALTE_PATH,)
    

    (2)在应用的views.py文件中新建视图函数,在视图函数中创建一个字典,在字典中存放我们要传入到模板中的数据。
    (3)使用render()函数,生成渲染模板响应

    2.静态文件
    在static文件夹中存放我们所需的css,js等文件,在static文件夹中新建images文件夹,存放图片。
    (1)配置static目录

    STATIC_PATH=os.path.join(BASE_DIR,'static')
    STATICFILES_DIRS=(STATIC_PATH,)
    

    (2)访问静态文件

    localhost:8000/static/images/filename
    

    (3)在模板中访问静态文件

    {% load staticfile%}
    

    切记,上面那行代码要放再<!DOCUMENT>下面,而在上面的位置,如果放在中,会造成不必要的空格。
    使用{% static "filename" %}访问静态文件。

  • 相关阅读:
    html页面特效代码大全
    ASP.NET中个文件夹功能
    A project with an Output Type of Class Library cannot be started directly
    Chapter10“I/O设备的同步和异步”之I/O设备同步操作
    c c++ 文件操作
    linux find 文件夹下查找字符串
    c c++ sizeof
    c socket编程
    c fcntl函数
    read write 返回值
  • 原文地址:https://www.cnblogs.com/liaozhichao/p/4908250.html
Copyright © 2011-2022 走看看