Django学习(6)配置静态文件

矫情吗；* 2022-06-02 10:11 264阅读 0赞

本文将详细讲述如何在Django中配置静态文件，如图片（images）,JavaScript,CSS等。  
  我们将要实现的网页如下：

![原始页面][SouthEast]  
  
当按下按钮“Change Text”时，图片下方的“Good morning!”会变成“Good night!”.再次按下时，则会变成“Good morning!”，如此循环往复地变化。如下图所示：  
  
![改变文字后页面][SouthEast 1]  
  
  首先在’/home/vagrant/django\_project’下新建Django项目staticFilesTest,在该项目中新建APP为myapp,命令行代码如下：

cd ~/django_project
    django-admin.py startproject staticFilesTest
    cd ./staticFilesTest
    django-admin.py startapp myapp

配置settings.py文件，如下：

1.  添加应用：在“INSTALLED\_APPS”中添加’myapp’;
2.  设置模板路径：在”TEMPLATES”中的“DIRS”中添加“/home/vagrant/django\_project/staticFilesTets/myapp/”
3.  在“STATIC\_URL = ‘/static/’”后添加代码

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

在myapp文件夹下，新建index.html文件，这是我们创建的网页页面的模板。代码如下：

<html>
        <head>
        {% load staticfiles %}
        <link rel="stylesheet" type="text/css" href="{% static 'myapp/my.css' %}" />
        <script type="text/javascript" src="{% static 'myapp/changeText.js' %}"></script>   
        </head>
    <body>
        <h1>Hello Django!</h1>
        <img src="{% static "myapp/django.jpg" %}" alt="My image"/>
        <p id="text">Good morning!</p>
        <button type="button" onclick="change()">Change Text</button>
    </body>
    </html>

编辑views.py文件，代码如下：（显然，这仅仅只是一个简单的例子而已~）

from django.shortcuts import render_to_response
    
    def index(request):
        return render_to_response('index.html')

在myapp文件夹下新建static文件夹，在static文件夹下新建myapp文件夹，在此myapp文件夹下，放置的文件如下：

![myapp文件夹中的文件][myapp]  
  
其中my.css中的代码如下：

h1 {
        color: red;
        text-align: left;
        font-size: 20pt;
        }
    p {margin-left: 20px;}

changeText.js中的代码如下：

最后配置urls.py,代码如下：

from django.conf.urls import include, url
    from django.contrib import admin
    
    urlpatterns = [
        url(r'^admin/', include(admin.site.urls)),
        url(r'^test', 'myapp.views.index'),
    ]

这样我们就完成了全部的配置。如果想过运行该项目，只需在命令行中输入：

cd ~/django_project/staticFilesTest
    python3 manage.py runserver 8000

在本地浏览器中输入“localhost:8000/test”即可看到一开始展示的页面~~  
  本次分享到此结束，欢迎大家交流与批评 ~~

--------------------

参考网址：

1.  Django官方文档：https://docs.djangoproject.com/en/1.8/howto/static-files/

[SouthEast]: /images/20220602/5ffd1bf1bbab4f7bbf164f111b820037.png
[SouthEast 1]: /images/20220602/f0c852a86deb4e4fac9aff44caa77948.png
[myapp]: /images/20220602/061bfa4cc6264cc7ae02b4ced07c4f7a.png