将现有的Web前端项目生成导入到Django的Template

发表于 更新于 阅读次数： 阅读次数：

实际项目中，会遇到这样的问题：没有使用任何服务器端框架的前端代码，即包含html网页文件，也包含js和css的代码，如何将这些现有的项目做最少的修改而引入到Django框架中呢？Django官网上给出了解决方法，使用static目录来存放css和js代码（虽然js是动态代码，但Django将其与css等同为静态代码，因为在后端看来，前端代码是静态的），然后在html文件里面，将原先的href引用改为通过static目录来引用。可以看这里，但里面讲的不是很清楚，我在查了一些资料后才搞定这个问题，所以这里写个总结来总结总结。

修改配置文件，增加static相关目录

在配置文件settings.py里面，增加STATIC_ROOT，STATIC_URL和STATICFILES_DIRS变量，使得程序在执行时知道从哪里读取配置文件： 

1
2
3
4
5
6
7
8
9
10
SITE_ROOT = os.path.join(os.path.abspath(os.path.dirname(__file__)),'')
STAIC_ROOT = os.path.join(SITE_ROOT,'static')
STATIC_URL = '/static/'

#最后关键部分需要添加上STATICFILE_DIRS的配置
STATICFILES_DIRS = (
    ("css", os.path.join(STATIC_ROOT,'css')),
    ("js", os.path.join(STATIC_ROOT,'js')),
    ("images", os.path.join(STATIC_ROOT,'images')),
)

上面代码中，为了更容易地表示STATIC_ROOT的值，先获取了SITE_ROOT的值。
注意：这个设置只能在DEBUG=True，即处于开发状态的的时候才有用，实际生产环境中的配置还有些区别。

在app里面创建static目录

在相应的app里面创建好static目录，然后将现有项目的css和js目录拷贝到该目录下。 至于html文件，则放在相应的templates目录下。

修改html文件里面的href引用

因为原先项目中，对于Javascript和CSS代码的引用都是通过相对目录来引用的，例如： 

1
2
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css">

而在Django里面，需要对相对目录进行修改，将其改为通过static来引用的方式，也很简单： 

1
2
3
4
5
{% raw %}
** {% load staticfiles %}**
{% endraw %}
<link rel="stylesheet" type="text/css" {% raw %} href="{% static "css/bootstrap.css" %}" {% endraw %}>
<link rel="stylesheet" type="text/css" {% raw %} href="{% static "css/jquery.fullPage.css" %}"> {% endraw %}

我们可以看到主要有2处修改：
1.增加了 `{% load staticfiles %}` 语句，其中staticfiles是Django自带的库，`{% %}` 是Django的模板语法。这条语句表示导入staticfiles模块。
2. 将href中的引用修改为 `href="{% static "subfolder/filename" %}"` 的格式，也很好理解，相当于文件引用路径是static + subfolder/filename，即通过前面settings.py里面设置的static目录来寻找css和js文件。

页面跳转的问题

还遇到了一些问题，比如说在现成的前端项目中，我们要跳转到别的网页，我们可以这样写： 

1
<a href="something.html">Something</a>

但在Django里面，却要改为： 

1
<a href="/something/">Something</a>

否则会跳转出错。