我的django之旅（二）模板和静态文件

时间：2022-04-20 07:01:14

我的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" %}访问静态文件。

相关文章