Django框架|使用Django构建个人网站（二）——加载模板和静态文件 django|python

目录
一、创建django项目
二、模板和静态文件
2.1、模板设置
2.2、静态文件设置
三、URL的设置
四、视图处理函数
五、静态文件加载
5.1、启动服务
5.2、修改静态文件路由
六、总结
上一篇博文我简单的用bootstrap构建了个人网站的主页，现在就使用Django把它加载出来。
如果要一起跟着我做，这里附上个人网站主页的下载地址，供大家使用。
【Django框架|使用Django构建个人网站（二）——加载模板和静态文件】我的个人主页资源
一、创建django项目新建一个文件夹，我把他命名为djangosite，以和我以前的flasksite区分开。
使用终端进入这个文件夹，GOGOGO

$django-admin startproject mysite .

现在就创建好项目了，文档结构如下图所示：

文章图片

二、模板和静态文件所谓模板，通俗点说其实就是网页；静态文件，就是一些CSS、Javascript、图片等等。Django可以把模板和静态文件分散到多个应用中，也可以放在一起。在这里我使用后者，即创建一个文件夹，命名为templates以及static，然后进行相关设置。

文章图片

2.1、模板设置编辑./mysite/settings.py文件，找到TEMPLATES的设置，修改为如下代码：

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', #在这里设置了模板文件的路径 'DIRS': [os.path.join(BASE_DIR, 'templates'), ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]

os.path.join(BASE_DIR, 'templates')的意思是，得到一个路径，这个路径是./templates，BASE_DIR的定义在settings.py最上方定义了，可以看一下了解一下。
接下来，把index.html放入templates中，结构如下所示：

文章图片

2.2、静态文件设置编辑./mysite/settings.py
找到这个代码段

STATIC_URL = '/static/'

紧跟着在他下面写这样一段代码，这个代码的作用就是声明一下静态文件的路径

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

在这里注意变量名，我自己曾因为DIRS少了个S排查错误排查很久，都找不出来问题。
添加路径后，在static建立三个文件夹，分别命名为css、javascript、images，目的是区分静态文件。我们的前段页面由于用的是远程bootstrap框架，因此暂时没有css即js文件（部分少量的css重写我直接在模板中完成了），所以我们现在把图片资源放入./mysite/static/images下：

文章图片

三、URL的设置我们先创建一个新的应用吧，叫做index，这个app的作用就是加载主页

$django-admin startapp index

进入./mysite/urls.py中，设置好URL：

from django.contrib import admin from django.urls import path, includeurlpatterns = [ path('admin/', admin.site.urls), path('', include('index.urls')), ]

这段代码表示，如果url之后参数为空，则路由配置转向由index应用下的urls.py，这就是include的作用
接下来我们就要去./index/urls.py中进行设置了，新建一个urls.py，然后把mysite/urls.py中的内容先粘过去，然后删掉urlpatterns中的内容，如下

from django.contrib import admin from django.urls import path, includeurlpatterns = []

接着在这里面写路由，我们的目的是输入url没有任何参数时返回主页，那么写成这样

from django.contrib import admin from django.urls import path, include from .views import *urlpatterns = [ path('', index), ]

这样子，URL就设置好了，这段代码表示，由“index视图函数响应请求”，注意，index函数是从.views模块中导入的，看第三行代码。
四、视图处理函数进入./index/views.py，编写视图处理函数index

from django.shortcuts import render# Create your views here. def index(request): return render(request, 'index.html')

render的作用是进行模板渲染
request参数负责响应接受到的请求，而且不可缺少，它总是处于第一的位置。
五、静态文件加载 5.1、启动服务

$python manage.py runserver

输入如下代码启动服务，当你满心欢喜准备迎接网页的时候，你发现之前的页面没了，一个图片都没了。这是因为静态文件的路由变了，需要重新设置。

文章图片

一个缺少了灵魂的网页
5.2、修改静态文件路由为什么加载不出，图片，我们可以看一下之前的网页

文章图片

这是截取其中的任意一个图片的src，这个路径，已经变了，我们不能再使用相对路径，而应该使用他在服务器上的地址。例如上图代码应修改为：

文章图片

图省事，就代码全文搜索，把“./”替换为“/static/”
刷新一下，看是不是没问题了
六、总结今天完成了主页的加载，主要的要注意的点就是模板、静态文件的路径配置，URL的正确配置，掌握了之后，加载一个静态页面就非常简单了。
下一次，我可能会开始写一个博客的前端界面，然后开始进行涉及数据库部分，及制作动态网页了。